Spacing | Arcadia Design

Scale

A 4px grid with quarter steps for optical adjustments. Product CSS spaces with these tokens: the only literal lengths it may write are 0, 1px and 2px.

The whole steps on the 4px grid, drawn at twice their size.

Token	Use	Value
	Hairlines and one-pixel nudges.
	Tight gaps: inside a chip, between stacked rows.
	A label to its description.
	Optical: centring a glyph.
	Hover actions apart in a row.
	A row's leading slot to its label.
	Row padding and gaps inside a control.
	A medium button's padding.
	Card padding and gaps between controls.
	Optical: between stream rows.
	Panel padding and the dialog gutter.
	Optical.
	Roomy padding.
	Between groups; the gap between turns.
	Between sections of a panel.
	Between sections of a page.
	Large section breaks.
	The unit for layout widths, as in `calc(var(--space-16) * 3)`.

In use

A sidebar row at twice its size. Its padding, leading slot and gap are all steps on the grid, and its height is a layout token.

Controls and icons

Control heights

Buttons, icon buttons, inputs, rows and segmented items share four heights, so anything on one line lines up.

Token	Sample	Use	Value
		Extra-small icon buttons and badges, key cap rows.
		Toolbar buttons, pickers and small inputs.
		The default control and row.
		Large buttons, tab strips and card headers.

Icon sizes

A standalone icon strokes at 1.5px at every size; an icon beside text takes the text's frame and stem. The Icons page states the rules.

Token	Sample	Use	Value
		The smallest standalone icon: an icon button 20px tall.
		The default: icon buttons, icon-only segments, empty states.
		Large icon buttons, a sign-in screen's glyph.
		Feature glyphs.
	Folder	Beside text: a whole-pixel frame around a drawing 1.09 cap heights tall, 11 beside 13px.
		Marks and loaders only: a spinner, a provider mark, the checkbox's check.
		Marks and loaders only.

Icon side

On a control with a visible edge, the side that ends in an icon sits as far from the edge as from the top and bottom: (height − icon) / 2 − border.

README.md

Chip

Button

Picker

The chip's glyph (its label's 13px text frame) sits (24 − 13) / 2 = 5.5 from the edge against an 8px text side; the button's (28 − 13) / 2 − 1 = 6.5 against 14.

Control	Height	Icon	Border	Icon side	Text side
Button xs / sm / md / lg	20 / 24 / 28 / 32	12 / 13 / 13 / 13	1px	3 / 4.5 / 6.5 / 8.5	6 / 8 / 10 / 12 (a pill adds 4)
Chip	24	13	0	5.5	8
PickerTrigger sm / md	24 / 28	13	0	5.5 / 7.5	8 / 10
Badge md / sm	20 / 16	12 / 11	0	4 / 2.5	8 / 6
Input sm / md / lg	24 / 28 / 32	13	1px	4.5 / 6.5 / 8.5	8 / 10 / 12
Segmented item, pill tab	24 / 20	13 / 12	0	5.5 / 4	12 / 8
Menu item md / lg	30 / 32	16 (the column)	0	7 / 8	10

Components derive it (stylex.env.nest.iconInset); a glyph passed inside a label takes the same call with its own box.

In a pill that puts the icon's centre on the cap's centre. The text side keeps the control's own padding, so it is always the larger.

Label centre

A control's label sits on its capitals.

Segmented control

Button

README.md

Chip

Field

The capitals leave the same room above and below, to within a quarter of a pixel on a 2x display.

Label	Line box, 1x	Line box, 2x	Capitals, 1x	Capitals, 2x
13 on 18, in 24 / 28 / 32	0.42 low	0.42 low	0.42 low	0.08 high
13 on 18, a field in 28	0.42 low	0.42 low	0.08 high	0.08 high
12 on 16, in 20	0.50 high	0.27 low	0.50 high	0.23 high
15 on 24, in 32	0.72 low	0.22 low	0.28 high	0.22 low

Components take it from stylex.env.nest.caps on each text of the control's line (a label, a key hint, a picker's second word, a row's description), and stylex.env.nest.capsRow on the control centres a glyph with them. A text field clips to its line, so it is never trimmed: padding moves its whole line onto its capitals (nest.capsField). A browser without text-box keeps the line box. The layout check fails a kit control whose capitals sit more than a quarter pixel off its middle.

Its text is trimmed to the cap band, cap line to baseline, and padded back to its line's height, so nothing around it moves and the control centres what the eye reads. A line box centres the font's ascent and descent instead, which sets the capitals of 13px text 0.42px under the middle: most of a pixel on a 2x display, and a label that reads low in its pill.

Layout

Shared dimensions, so every surface lines up. Values are read live from the stylesheet.

General

Token	Use	Value
	The window's top bar.
	The sidebar; it resizes between `--sidebar-width-min` and `--sidebar-width-max`.
	Inset dividers in hairline lists.
	A blockquote's rule.
	Images and long tool bodies before they scroll.
	Space left beside the narrow-window drawer.

App shell

Measured from Lookout's window so its sidebar, stream and composer line up. They are not for general use: another product should define its own rather than borrow these.

Token	Use	Value
	A sidebar row: a 30px fill on a 31px pitch.
	A sidebar group's label: Agents, Projects.
	Between a sidebar group's sub-groups: one section and the next, an open project and its neighbours.
	Above a sidebar group that follows another.
	The conversation column.
	Aligns prose with the text inside a user bubble.
	The home composer.
	Between stream rows.
	Between turns.
	The right-aligned recency box in a row.
	Home suggestion rows.
	How tall the composer grows (with 50vh).

Space, size and weight carry a sidebar's hierarchy, not lines or brightness. Rows sit 1px apart, sub-groups --sidebar-subgroup-gap apart and groups --sidebar-group-gap apart.

Two header levels: a group label at 13/500 in text-1, 30px tall; a sub-group at 12/500 in text-3, 24px tall. Rows are 13/418.

No line divides two groups. A hairline appears only where fixed chrome meets the scroller while content is under it: the top while the list is scrolled, the footer while more is below.

Radius follows the same grid; Radius shows how corners nest.