Spacing and density

Spacing runs on a 4 px base. Component padding lives on 4, 8, 12, 16 and 20. Use the scale; a value that is not on it is a defect.

Token	CSS variable	Value
ui.space.0	--okr-ui-space-0	0px
ui.space.1	--okr-ui-space-1	4px
ui.space.2	--okr-ui-space-2	8px
ui.space.3	--okr-ui-space-3	12px
ui.space.4	--okr-ui-space-4	16px
ui.space.5	--okr-ui-space-5	20px
ui.space.6	--okr-ui-space-6	24px
ui.space.8	--okr-ui-space-8	32px
ui.space.10	--okr-ui-space-10	40px
ui.space.12	--okr-ui-space-12	48px
ui.space.16	--okr-ui-space-16	64px
ui.space.20	--okr-ui-space-20	80px
ui.space.24	--okr-ui-space-24	96px
ui.space.32	--okr-ui-space-32	128px
ui.space.42	--okr-ui-space-42	168px
ui.space.0-5	--okr-ui-space-0-5	2px
ui.space.section	--okr-ui-space-section	clamp(96px, 5rem + 5vw, 168px)
ui.space.hero-top	--okr-ui-space-hero-top	clamp(40px, 2rem + 4vw, 104px)

Density

comfortable is the default and is what marketing and docs use. compact is for tables and the app shell; set data-density="compact" on the root, and every token below changes. Coarse pointers keep targets of at least 44 px.

Token	CSS variable	Comfortable	Compact
ui.row.height	--okr-ui-row-height	40px	32px
ui.control.height	--okr-ui-control-height	36px	28px
ui.control.padding-x	--okr-ui-control-padding-x	12px	8px
ui.control.gap	--okr-ui-control-gap	8px	4px
ui.nav.item	--okr-ui-nav-item	32px	28px
ui.inset.card	--okr-ui-inset-card	16px	12px