Foundations

Typography

The type stack leads with the platform's own UI face, so text renders in the grey the OS already optimises for and no webfont ships. Tracking tightens as type grows, because the same em value reads looser at larger sizes.

Families

Interface text and fixed-width data.

Every label reads at a glance

--aihio-font-family-body Interface and body typeface for every component and page surface.
<aihio-button variant="outline">

--aihio-font-family-code Typeface for code samples, markup, token names, and other fixed-width data.

Sizes

What components read, then the scale beneath it.

Settings saved for every workspace

--aihio-font-size-heading 1.25rem 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.
Settings saved for every workspace

--aihio-font-size-heading-sm 1.125rem Compact surface title size for dialogs and smaller panels.
Settings saved for every workspace

--aihio-font-size-body 1rem Default document body text size.
Settings saved for every workspace

--aihio-font-size-control-lg 1rem Larger text size for prominent controls.
Settings saved for every workspace

--aihio-font-size-body-sm 0.875rem Supporting text size for descriptions and secondary copy.
Settings saved for every workspace

--aihio-font-size-control 0.875rem Default text size for controls.
Settings saved for every workspace

--aihio-font-size-badge 0.75rem Dense label size for badges and tiny metadata chips.
Settings saved for every workspace

--aihio-font-size-control-sm 0.75rem Compact text size for small controls.

Scale

Aa

--aihio-font-size-xs 0.75rem
Aa

--aihio-font-size-sm 0.875rem
Aa

--aihio-font-size-base 1rem
Aa

--aihio-font-size-lg 1.125rem
Aa

--aihio-font-size-xl 1.25rem
Aa

--aihio-font-size-2xl 1.5rem
Aa

--aihio-font-size-3xl 1.875rem
Aa

--aihio-font-size-4xl 2.25rem

Weights

Badge

--aihio-font-weight-badge 600 Dense emphasis weight for badges.
Body

--aihio-font-weight-body 400 Default document body weight.
Control

--aihio-font-weight-control 500 Emphasized but compact weight for controls and inline titles.
Heading

--aihio-font-weight-heading 600 Strong surface-heading weight.

Tracking

Letter spacing by role. label is the one positive value, for small capitalised labels.

Design that reads to people and agents

--aihio-letter-spacing-body -0.011em Default body and control tracking. Slightly negative, because the system stack sets a touch wide at UI sizes.
Design that reads to people and agents

--aihio-letter-spacing-display -0.025em Tracking for large display type, where glyph gaps open up as size grows.
Design that reads to people and agents

--aihio-letter-spacing-heading -0.018em Tracking for surface titles and section headings.
Components

--aihio-letter-spacing-label 0.02em Positive tracking for the one place it earns its keep: small capitalised labels.

Line height

A form field collects one value from the person using it. Its label says what the value is, its description says how to give it, and its error says what went wrong when it does.

--aihio-line-height-body 1.5 Default readable line height for body and field text.
A form field collects one value from the person using it. Its label says what the value is, its description says how to give it, and its error says what went wrong when it does.

--aihio-line-height-compact 1 Tight line height for headings, labels, and short control text.