Control heights, glyph sizes, avatars, chips, insets — the numbers that are never invented.
Part of the Konjo design language. The laws in the spine apply here unless this chapter contradicts them.
Everything a screen needs that isn't colour, type or space. Each of these was invented from scratch by an agent testing this document, which is how they got here.
| Thing | Value |
|---|---|
| Icon, inline (arrow, chevron, row glyph) | 16 |
| Icon, standalone control (header, toolbar) | 24 |
| Icon, status glyph on a tile | 19 |
| Avatar, list row | 32 |
| Avatar, header | 32, with a 1px border.hairline ring |
| Avatar, profile | 88 |
| Touch target floor | 44 — use hitSlop when the visual is smaller |
| Screen top inset | insets.top + spacing.tight before the first header element |
| Scroll inset above the tab bar | insets.bottom + 80 |
| Scroll inset, modal (no tab bar) | insets.bottom + spacing.section |
| Chip / pill | height controlHeight.chip 32 (+hitSlop), pad-h 12, radius.pill, label type, surface.card fill + 1px border.control |
| Skeleton fill | border.input — border.hairline on surface.page is 1.09:1 and vanishes. Radius follows the shape it stands in for, per states |
| Belt / rank swatch | swatchSize.ranked 10 / roster 16 / subject 28, always a 1px border.control ring |
| Pressed opacity | 0.85 |
Belt dots carry a 1px border.control ring, always — every rank, both themes. One
token solves both ends of the ladder: without it a white belt on a white card is 1.2:1, and a
black belt on the dark card is 1.01:1. border.control is 3.53:1 on the white card and 3.16:1
on the dark one, so the ring clears SC 1.4.11 either way. A 1.5px ring and an
rgba(255,255,255,.55) literal were specified here previously; neither is on the ramp.
On the spacing aliases: this document uses page / section / card / tight. The
code ships both: page/pageHorizontal, section/sectionGap and
card/componentPadding are the same numbers under two names. New work uses the short
names; the long ones stay for the 521 call sites that already have them. Do not invent a
third naming scheme. And detailHorizontal (24) is not "the padding for detail screens" — it
is one screen's deliberate widening.
On the chip fill. This table used to say surface.tag fill with no border. That is the
invisible-chip anti-pattern: surface.tag is 1.017:1 against the page, so a chip carrying
only that fill is not a control anyone can see. A chip is surface.card with a 1px
border.control edge — the same rule colour, buttons,
search and filter and L3 all state.
On the top of the screen. The bottom of every screen was specified to the point and the top
was not specified at all, which left the offset of the first element — the ✕, the ‹ Back —
invented per screen. It is insets.top + spacing.tight: the safe area already holds the status
bar and the notch, so the gap above the first control is small on purpose. A larger gap there
reads as an empty band, and on a small phone it costs a row of content before anyone has
scrolled.