# The small metrics Control heights, glyph sizes, avatars, chips, insets — the numbers that are never invented. > Part of the [Konjo design language](../konjo-design-language.md). 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](../patterns/states.md) | | 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](colour.md), [buttons](../patterns/buttons.md), [search and filter](../patterns/search-filter.md) 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.