Foundations · 74 semantic tokens

Token reference

Primitive scales give values, semantic tokens give them a purpose, and components read only the purpose: --aihio-color-surface-bg, --aihio-spacing-stack-md, never a position on a scale. Every name is --aihio-<group>-<name>, and everything below is generated from tokens/semantic.json.

color

Themed colours, named for what they colour. Each has a light and a dark value.

30 tokens

CSS variable	Source	Description
`--aihio-color-border-subtle`	`light: --aihio-color-zinc-200 · dark: --aihio-color-zinc-850`	Default border color for surfaces and outlines.
`--aihio-color-control-highlight-bg`	`light: --aihio-color-zinc-100 · dark: --aihio-color-zinc-900`	Hover and pressed highlight background for neutral controls.
`--aihio-color-control-highlight-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Foreground on hover and pressed highlight backgrounds.
`--aihio-color-destructive-bg`	`light: --aihio-color-red-600 · dark: --aihio-color-red-600`	Destructive emphasis background and error color.
`--aihio-color-destructive-fg`	`light: --aihio-color-zinc-0 · dark: --aihio-color-zinc-0`	Foreground on destructive emphasis backgrounds.
`--aihio-color-destructive-text`	`light: --aihio-color-red-600 · dark: --aihio-color-red-400`	Destructive text and iconography drawn directly on page or surface backgrounds, where the emphasis background is not used.
`--aihio-color-field-border`	`light: --aihio-color-zinc-500 · dark: --aihio-color-zinc-550`	Default border color for editable form fields.
`--aihio-color-focus-ring`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-300`	Focus indication ring for keyboard interactions.
`--aihio-color-muted-bg`	`light: --aihio-color-zinc-50 · dark: --aihio-color-zinc-950`	Muted fill for grouped controls and subdued surfaces.
`--aihio-color-muted-fg`	`light: --aihio-color-zinc-550 · dark: --aihio-color-zinc-450`	Supporting foreground on muted fills.
`--aihio-color-overlay-bg`	`light: --aihio-color-zinc-0 · dark: --aihio-color-zinc-900`	Surface background for transient overlays such as dropdowns.
`--aihio-color-overlay-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Foreground on transient overlays.
`--aihio-color-overlay-highlight-bg`	`light: --aihio-color-zinc-100 · dark: --aihio-color-zinc-800`	The highlighted item inside an overlay: the active combobox option or a hovered dropdown item. It has to differ from overlay-bg, which control-highlight-bg does not in the dark theme.
`--aihio-color-overlay-scrim`	`oklch(0 0 0 / 0.8)`	Modal backdrop scrim behind blocking overlays.
`--aihio-color-page-bg`	`light: --aihio-color-zinc-0 · dark: --aihio-color-zinc-1000`	Default page canvas and neutral active backgrounds.
`--aihio-color-page-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Primary foreground on the page canvas.
`--aihio-color-placeholder-bg`	`light: --aihio-color-zinc-200 · dark: --aihio-color-zinc-800`	Fill for something that stands in for missing content, such as an avatar's initials. One step off both the page and a surface, where muted-bg matches the surface and disappears into a card.
`--aihio-color-placeholder-fg`	`light: --aihio-color-zinc-700 · dark: --aihio-color-zinc-300`	Text on the placeholder fill.
`--aihio-color-primary-action-bg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Default filled action background.
`--aihio-color-primary-action-fg`	`light: --aihio-color-zinc-0 · dark: --aihio-color-zinc-1000`	Foreground on default filled actions.
`--aihio-color-secondary-action-bg`	`light: --aihio-color-zinc-100 · dark: --aihio-color-zinc-900`	Lower-emphasis filled action background.
`--aihio-color-secondary-action-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Foreground on lower-emphasis filled actions.
`--aihio-color-success-bg`	`light: --aihio-color-green-600 · dark: --aihio-color-green-600`	Emphasis background for confirmed and healthy states.
`--aihio-color-success-fg`	`light: --aihio-color-zinc-0 · dark: --aihio-color-zinc-0`	Foreground on success emphasis backgrounds.
`--aihio-color-success-text`	`light: --aihio-color-green-600 · dark: --aihio-color-green-400`	Success text and iconography drawn directly on page or surface backgrounds.
`--aihio-color-surface-bg`	`light: --aihio-color-zinc-50 · dark: --aihio-color-zinc-950`	Raised surface background for cards, alerts, and dialog panels.
`--aihio-color-surface-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-50`	Primary foreground on raised surfaces.
`--aihio-color-warning-bg`	`light: --aihio-color-amber-400 · dark: --aihio-color-amber-400`	Emphasis background for states that need attention but are not failures.
`--aihio-color-warning-fg`	`light: --aihio-color-zinc-900 · dark: --aihio-color-zinc-1000`	Foreground on warning emphasis backgrounds. Dark, because an accessible amber fill is light in both themes.
`--aihio-color-warning-text`	`light: --aihio-color-amber-700 · dark: --aihio-color-amber-400`	Warning text and iconography drawn directly on page or surface backgrounds.

spacing

Gaps and padding, named for the rhythm they set rather than a step on the scale.

13 tokens

CSS variable	Source	Description
`--aihio-spacing-cluster-gap-tight`	`--aihio-spacing-1`	Tight spacing inside grouped interactive controls and menu chrome.
`--aihio-spacing-control-gap`	`--aihio-spacing-2`	Default inline gap between icons, labels, and grouped actions.
`--aihio-spacing-field-padding-block`	`--aihio-spacing-2`	Block padding for default form fields.
`--aihio-spacing-field-padding-block-lg`	`--aihio-spacing-2-5`	Block padding for spacious form fields.
`--aihio-spacing-field-padding-block-sm`	`--aihio-spacing-1`	Block padding for compact form fields.
`--aihio-spacing-field-padding-inline`	`--aihio-spacing-3`	Inline padding for default form fields.
`--aihio-spacing-field-padding-inline-lg`	`--aihio-spacing-4`	Inline padding for spacious form fields.
`--aihio-spacing-field-padding-inline-sm`	`--aihio-spacing-2`	Inline padding for compact form fields.
`--aihio-spacing-form-field-gap`	`--aihio-spacing-3`	Recommended gap between labels, help text, and form controls.
`--aihio-spacing-stack-lg`	`--aihio-spacing-6`	Large separation for footer action areas and major section breaks.
`--aihio-spacing-stack-md`	`--aihio-spacing-4`	Standard section spacing within surfaced components.
`--aihio-spacing-stack-sm`	`--aihio-spacing-3`	Short vertical separation between related blocks such as alert content and panels.
`--aihio-spacing-stack-tight`	`--aihio-spacing-1-5`	Compact vertical rhythm for headings with short supporting copy.

radius

Corner rounding for surfaces and controls.

4 tokens

CSS variable	Source	Description
`--aihio-radius-interactive`	`--aihio-radius-md`	Default corner radius for buttons, inputs, toggles, and menus.
`--aihio-radius-interactive-compact`	`--aihio-radius-sm`	Tighter radius for dense interactive children such as tabs and menu items.
`--aihio-radius-pill`	`--aihio-radius-full`	Fully rounded presentation for badges, avatars, and pill-shaped affordances.
`--aihio-radius-surface`	`--aihio-radius-lg`	Corner radius for cards, alerts, and other framed surfaces.

font-family

Typefaces for interface text and fixed-width data.

2 tokens

CSS variable	Source	Description
`--aihio-font-family-body`	`--aihio-font-family-sans`	Interface and body typeface for every component and page surface.
`--aihio-font-family-code`	`--aihio-font-family-mono`	Typeface for code samples, markup, token names, and other fixed-width data.

font-size

Text sizes for body copy, controls, and surface titles.

8 tokens

CSS variable	Source	Description
`--aihio-font-size-badge`	`--aihio-font-size-xs`	Dense label size for badges and tiny metadata chips.
`--aihio-font-size-body`	`--aihio-font-size-base`	Default document body text size.
`--aihio-font-size-body-sm`	`--aihio-font-size-sm`	Supporting text size for descriptions and secondary copy.
`--aihio-font-size-control`	`--aihio-font-size-sm`	Default text size for controls.
`--aihio-font-size-control-lg`	`--aihio-font-size-base`	Larger text size for prominent controls.
`--aihio-font-size-control-sm`	`--aihio-font-size-xs`	Compact text size for small controls.
`--aihio-font-size-heading`	`--aihio-font-size-xl`	Large surface title size. Sized to lead a card, not to headline a page — a title much larger than this stops reading as part of the surface it sits on.
`--aihio-font-size-heading-sm`	`--aihio-font-size-lg`	Compact surface title size for dialogs and smaller panels.

font-weight

Weights for body text, controls, and headings.

4 tokens

CSS variable	Source	Description
`--aihio-font-weight-badge`	`--aihio-font-weight-semibold`	Dense emphasis weight for badges.
`--aihio-font-weight-body`	`--aihio-font-weight-normal`	Default document body weight.
`--aihio-font-weight-control`	`--aihio-font-weight-medium`	Emphasized but compact weight for controls and inline titles.
`--aihio-font-weight-heading`	`--aihio-font-weight-semibold`	Strong surface-heading weight.

letter-spacing

Optical tracking, tightening as type grows.

4 tokens

CSS variable	Source	Description
`--aihio-letter-spacing-body`	`--aihio-letter-spacing-normal`	Default body and control tracking. Slightly negative, because the system stack sets a touch wide at UI sizes.
`--aihio-letter-spacing-display`	`--aihio-letter-spacing-tighter`	Tracking for large display type, where glyph gaps open up as size grows.
`--aihio-letter-spacing-heading`	`--aihio-letter-spacing-tight`	Tracking for surface titles and section headings.
`--aihio-letter-spacing-label`	`--aihio-letter-spacing-wide`	Positive tracking for the one place it earns its keep: small capitalised labels.

line-height

Line heights for readable copy and compact labels.

2 tokens

CSS variable	Source	Description
`--aihio-line-height-body`	`--aihio-line-height-normal`	Default readable line height for body and field text.
`--aihio-line-height-compact`	`--aihio-line-height-none`	Tight line height for headings, labels, and short control text.

shadow

Elevation for surfaces and overlays.

3 tokens

CSS variable	Source	Description
`--aihio-shadow-modal`	`--aihio-shadow-lg`	Deeper elevation for blocking modal dialogs.
`--aihio-shadow-overlay`	`--aihio-shadow-md`	Elevation for popovers and transient overlays.
`--aihio-shadow-surface`	`--aihio-shadow-sm`	Subtle elevation for surfaced content.

duration

Motion timing for feedback and overlay entrance. Collapsed to 1ms under reduced motion, except the spinner.

4 tokens

CSS variable	Source	Description
`--aihio-duration-feedback`	`--aihio-duration-normal`	Default control feedback transition duration.
`--aihio-duration-feedback-fast`	`--aihio-duration-fast`	Fast hover and menu-item feedback transitions.
`--aihio-duration-overlay`	`--aihio-duration-slow`	Entrance timing for larger blocking overlays.
`--aihio-duration-spinner`	`--aihio-duration-spin`	One full rotation of an indeterminate busy indicator.

Component tokens

Sizes specific to one component, from tokens/component.json.

28 tokens

CSS variable	Value
`--aihio-button-height-sm`	`2.25rem`
`--aihio-button-height-md`	`2.5rem`
`--aihio-button-height-lg`	`2.75rem`
`--aihio-button-height-icon`	`2.5rem`
`--aihio-button-padding-x-sm`	`0.75rem`
`--aihio-button-padding-x-md`	`1rem`
`--aihio-button-padding-x-lg`	`2rem`
`--aihio-button-padding-x-icon`	`0`
`--aihio-button-font-size-sm`	`0.875rem`
`--aihio-button-font-size-md`	`0.875rem`
`--aihio-button-font-size-lg`	`1rem`
`--aihio-input-height-sm`	`2.25rem`
`--aihio-input-height-md`	`2.5rem`
`--aihio-input-height-lg`	`2.75rem`
`--aihio-badge-padding-x`	`0.625rem`
`--aihio-badge-padding-y`	`0.125rem`
`--aihio-badge-font-size`	`0.75rem`
`--aihio-avatar-size-sm`	`2rem`
`--aihio-avatar-size-md`	`2.5rem`
`--aihio-avatar-size-lg`	`3rem`
`--aihio-card-padding`	`1.5rem`
`--aihio-dialog-width`	`32rem`
`--aihio-dialog-padding`	`1.5rem`
`--aihio-data-grid-height`	`min(32rem, 75dvh)`
`--aihio-table-cell-padding-y-default`	`0.75rem`
`--aihio-table-cell-padding-y-compact`	`0.375rem`
`--aihio-table-cell-padding-x`	`0.75rem`
`--aihio-table-max-height`	`min(32rem, 75dvh)`

Primitives

The raw scales the semantic tokens resolve to, from tokens/base.json. Components never read them directly.

spacing

CSS variable	Value
`--aihio-spacing-0`	`0`
`--aihio-spacing-0-5`	`0.125rem`
`--aihio-spacing-1`	`0.25rem`
`--aihio-spacing-1-5`	`0.375rem`
`--aihio-spacing-2`	`0.5rem`
`--aihio-spacing-2-5`	`0.625rem`
`--aihio-spacing-3`	`0.75rem`
`--aihio-spacing-3-5`	`0.875rem`
`--aihio-spacing-4`	`1rem`
`--aihio-spacing-5`	`1.25rem`
`--aihio-spacing-6`	`1.5rem`
`--aihio-spacing-8`	`2rem`
`--aihio-spacing-10`	`2.5rem`
`--aihio-spacing-12`	`3rem`
`--aihio-spacing-16`	`4rem`
`--aihio-spacing-20`	`5rem`
`--aihio-spacing-24`	`6rem`

radius

CSS variable	Value
`--aihio-radius-base`	`0.5rem`
`--aihio-radius-none`	`0`
`--aihio-radius-sm`	`calc(0.5rem - 4px)`
`--aihio-radius-md`	`calc(0.5rem - 2px)`
`--aihio-radius-lg`	`0.5rem`
`--aihio-radius-xl`	`calc(0.5rem + 4px)`
`--aihio-radius-2xl`	`calc(0.5rem + 8px)`
`--aihio-radius-full`	`9999px`

font-family

CSS variable	Value
`--aihio-font-family-sans`	`-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
`--aihio-font-family-mono`	`ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace`

font-size

CSS variable	Value
`--aihio-font-size-xs`	`0.75rem`
`--aihio-font-size-sm`	`0.875rem`
`--aihio-font-size-base`	`1rem`
`--aihio-font-size-lg`	`1.125rem`
`--aihio-font-size-xl`	`1.25rem`
`--aihio-font-size-2xl`	`1.5rem`
`--aihio-font-size-3xl`	`1.875rem`
`--aihio-font-size-4xl`	`2.25rem`

font-weight

CSS variable	Value
`--aihio-font-weight-normal`	`400`
`--aihio-font-weight-medium`	`500`
`--aihio-font-weight-semibold`	`600`
`--aihio-font-weight-bold`	`700`

letter-spacing

CSS variable	Value
`--aihio-letter-spacing-tighter`	`-0.025em`
`--aihio-letter-spacing-tight`	`-0.018em`
`--aihio-letter-spacing-normal`	`-0.011em`
`--aihio-letter-spacing-wide`	`0.02em`

line-height

CSS variable	Value
`--aihio-line-height-none`	`1`
`--aihio-line-height-tight`	`1.25`
`--aihio-line-height-snug`	`1.375`
`--aihio-line-height-normal`	`1.5`
`--aihio-line-height-relaxed`	`1.625`

shadow

CSS variable	Value
`--aihio-shadow-sm`	`0 1px 2px 0 oklch(0 0 0 / 0.05)`
`--aihio-shadow-md`	`0 8px 24px -6px oklch(0 0 0 / 0.12), 0 2px 6px -2px oklch(0 0 0 / 0.08)`
`--aihio-shadow-lg`	`0 24px 64px -12px oklch(0 0 0 / 0.22), 0 6px 16px -6px oklch(0 0 0 / 0.12)`

duration

CSS variable	Value
`--aihio-duration-fast`	`100ms`
`--aihio-duration-normal`	`150ms`
`--aihio-duration-slow`	`200ms`
`--aihio-duration-spin`	`700ms`

The colour ramps are on Color.

Generated artifact

The same reference ships inside the package, as markdown and as JSON with resolved values for both themes, so agents read it without scraping this site.

semantic-tokens.md tokens.json