Spacing and radius

Ooko uses shared spacing and corner-radius tokens to keep component density and shape consistent. Bounded token values use rem so they continue to follow the consumer's root font size.

Spacing primitives

The spacing scale is based on a 0.25rem step, with half steps for compact control layouts. Use these tokens for padding, margin, gap, border spacing, and scroll spacing.

Token	Value	Size at a 16px root
--o-space-0	0	0px
--o-space-0-5	0.125rem	2px
--o-space-1	0.25rem	4px
--o-space-1-5	0.375rem	6px
--o-space-2	0.5rem	8px
--o-space-2-5	0.625rem	10px
--o-space-3	0.75rem	12px
--o-space-4	1rem	16px
--o-space-5	1.25rem	20px
--o-space-6	1.5rem	24px
--o-space-8	2rem	32px
--o-space-10	2.5rem	40px
--o-space-12	3rem	48px
--o-space-16	4rem	64px

Components expose meaningful custom properties such as --o-button-padding and map their defaults to this primitive scale. Prefer the component property when customizing one component, and a spacing primitive when authoring a new component or layout.

.example-layout {
  display: grid;
  gap: var(--o-space-4);
  padding: var(--o-space-6);
}

Direct spacing values are reserved for browser resets or a documented optical or technical constraint that the scale cannot express. Dimensions, border widths, typography, and icon sizes are not spacing and do not use this scale.

Form-control sizes

Form-related components accept only sm and md, with md as their built-in default.

Size	Token	Default
sm	--o-control-form-height-sm	1.75rem
md	--o-control-form-height-md	2.25rem

Controls are compact (36px by default) while surfaces stay airy: cards pad their content by 1.25rem and separate sections by 1rem, and table cells use 0.75rem by 1rem. The contrast between dense controls and generous layout is what keeps an admin screen readable.

These minimum heights preserve text wrapping and user font-size growth rather than forcing a fixed block size.

Radius primitives

Token	Value	Size at a 16px root
--o-radius-none	0	0px
--o-radius-xs	0.125rem	2px
--o-radius-sm	0.25rem	4px
--o-radius-md	0.375rem	6px
--o-radius-lg	0.5rem	8px
--o-radius-xl	0.75rem	12px
--o-radius-2xl	1rem	16px
--o-radius-full	9999px	Fully rounded

Semantic radius roles

Components consume semantic roles so Ooko's overall shape can be adjusted without overriding each component independently.

Token	Default	Intended use
--o-radius-control-compact	var(--o-radius-sm)	Small controls and close actions
--o-radius-control	var(--o-radius-lg)	Form controls
--o-radius-surface	var(--o-radius-xl)	Alerts, cards, and containers
--o-radius-overlay	var(--o-radius-2xl)	Dialogs, menus, and popovers
--o-radius-round	var(--o-radius-full)	Buttons, segmented controls, pagination, and chips

Override a semantic role in an unlayered stylesheet loaded after Ooko to change every consumer of that role:

:root {
  --o-radius-control: var(--o-radius-lg);
  --o-radius-surface: var(--o-radius-xl);
}

Use a component custom property for a local exception. Avoid applying primitive radius tokens directly inside components when an existing semantic role describes the element.