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

The stroke stays 1.25px at every size.

Token	Sample	Use	Value
		Inline in 11px text.
		Dense rows and tooltips.
		The default glyph.
		The composer's plus, empty states.
		Feature glyphs.

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 side is (24 − 14) / 2 = 5 against an 8px text side; the button's (28 − 14) / 2 − 1 = 6 against 14.

Control	Height	Icon	Border	Icon side	Text side
Button xs / sm / md / lg	20 / 24 / 28 / 32	12 / 14 / 14 / 16	1px	3 / 4 / 6 / 7	6 / 8 / 10 / 12 (a pill adds 4)
Chip	24	14	0	5	8
PickerTrigger sm / md	24 / 28	14	0	5 / 7	8 / 10
Badge md / sm	20 / 16	12 / 10	0	4 / 3	8 / 6
Input sm / md / lg	24 / 28 / 32	14	1px	4 / 6 / 8	8 / 10 / 12
Segmented item, pill tab	24 / 20	14 / 12	0	5 / 4	12 / 8
Menu item md / lg	30 / 32	16	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.

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 section label.
	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).

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