Skip to content
Aihio v2.3.0
Search
GitHub
Search Describe what you are building, or name a component, intent, or token. Components and patterns are ranked the way the MCP server's find tool ranks them for an agent.

Foundations

Color

The neutral ramp is monochrome, and colour appears only where it carries state. Light and dark are built as mirror images: a pure canvas, a surface one step off it, and a hairline that only just separates them. Every swatch on this page is drawn with the token itself, inside a data-theme subtree, so both themes show at once.

Semantic colours

What components read. Each is shown in light, then dark, with the primitive it resolves to.

  • --aihio-color-border-subtle zinc-200 · zinc-850

    Default border color for surfaces and outlines.

  • --aihio-color-control-highlight-bg zinc-100 · zinc-900

    Hover and pressed highlight background for neutral controls.

  • --aihio-color-control-highlight-fg zinc-900 · zinc-50

    Foreground on hover and pressed highlight backgrounds.

  • --aihio-color-destructive-bg red-600 · red-600

    Destructive emphasis background and error color.

  • --aihio-color-destructive-fg zinc-0 · zinc-0

    Foreground on destructive emphasis backgrounds.

  • --aihio-color-destructive-text red-600 · red-400

    Destructive text and iconography drawn directly on page or surface backgrounds, where the emphasis background is not used.

  • --aihio-color-field-border zinc-500 · zinc-550

    Default border color for editable form fields.

  • --aihio-color-focus-ring zinc-900 · zinc-300

    Focus indication ring for keyboard interactions.

  • --aihio-color-muted-bg zinc-50 · zinc-950

    Muted fill for grouped controls and subdued surfaces.

  • --aihio-color-muted-fg zinc-550 · zinc-450

    Supporting foreground on muted fills.

  • --aihio-color-overlay-bg zinc-0 · zinc-900

    Surface background for transient overlays such as dropdowns.

  • --aihio-color-overlay-fg zinc-900 · zinc-50

    Foreground on transient overlays.

  • --aihio-color-overlay-highlight-bg zinc-100 · 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), both themes

    Modal backdrop scrim behind blocking overlays.

  • --aihio-color-page-bg zinc-0 · zinc-1000

    Default page canvas and neutral active backgrounds.

  • --aihio-color-page-fg zinc-900 · zinc-50

    Primary foreground on the page canvas.

  • --aihio-color-placeholder-bg zinc-200 · 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 zinc-700 · zinc-300

    Text on the placeholder fill.

  • --aihio-color-primary-action-bg zinc-900 · zinc-50

    Default filled action background.

  • --aihio-color-primary-action-fg zinc-0 · zinc-1000

    Foreground on default filled actions.

  • --aihio-color-secondary-action-bg zinc-100 · zinc-900

    Lower-emphasis filled action background.

  • --aihio-color-secondary-action-fg zinc-900 · zinc-50

    Foreground on lower-emphasis filled actions.

  • --aihio-color-success-bg green-600 · green-600

    Emphasis background for confirmed and healthy states.

  • --aihio-color-success-fg zinc-0 · zinc-0

    Foreground on success emphasis backgrounds.

  • --aihio-color-success-text green-600 · green-400

    Success text and iconography drawn directly on page or surface backgrounds.

  • --aihio-color-surface-bg zinc-50 · zinc-950

    Raised surface background for cards, alerts, and dialog panels.

  • --aihio-color-surface-fg zinc-900 · zinc-50

    Primary foreground on raised surfaces.

  • --aihio-color-warning-bg amber-400 · amber-400

    Emphasis background for states that need attention but are not failures.

  • --aihio-color-warning-fg zinc-900 · zinc-1000

    Foreground on warning emphasis backgrounds. Dark, because an accessible amber fill is light in both themes.

  • --aihio-color-warning-text amber-700 · amber-400

    Warning text and iconography drawn directly on page or surface backgrounds.

Contrast contract

The pairs the token build measures in both themes, failing if any drops below its minimum: 4.5:1 for text, 3:1 for the boundary of a control. Card and alert borders are left out on purpose; they are framing, not the kind of boundary WCAG 1.4.11 covers, and holding them to 3:1 would make every surface shout.

Pair Light Dark Minimum
destructive-fg on destructive-bg
Destructive button label on its fill.
 Aa 5.15:1 Aa 5.15:1 4.5:1
destructive-text on page-bg
Destructive alert copy drawn on the page canvas.
 Aa 5.15:1 Aa 7.62:1 4.5:1
success-fg on success-bg
Success badge label on its fill.
 Aa 5.17:1 Aa 5.17:1 4.5:1
success-text on page-bg
Success alert copy drawn on the page canvas.
 Aa 5.17:1 Aa 8.99:1 4.5:1
warning-fg on warning-bg
Warning badge label on its fill. The fill is light in both themes, so this pairs with a dark foreground.
 Aa 8.81:1 Aa 10.99:1 4.5:1
warning-text on page-bg
Warning alert copy drawn on the page canvas.
 Aa 5.6:1 Aa 10.99:1 4.5:1
primary-action-fg on primary-action-bg
Default button label on its fill.
 Aa 16.83:1 Aa 19.29:1 4.5:1
secondary-action-fg on secondary-action-bg
Secondary button label on its fill.
 Aa 14.13:1 Aa 15.46:1 4.5:1
control-highlight-fg on control-highlight-bg
Ghost and outline button labels on their hover fill.
 Aa 14.13:1 Aa 15.46:1 4.5:1
overlay-fg on overlay-highlight-bg
The active combobox option or hovered dropdown item label on its highlight, inside an overlay.
 Aa 14.13:1 Aa 11.66:1 4.5:1
muted-fg on page-bg
Supporting copy on the page canvas.
 Aa 5.07:1 Aa 8.16:1 4.5:1
muted-fg on muted-bg
Supporting copy on muted fills (toggle hover, muted surfaces).
 Aa 4.66:1 Aa 7.03:1 4.5:1
placeholder-fg on placeholder-bg
Avatar initials on their fill.
 Aa 6.88:1 Aa 8.56:1 4.5:1
page-fg on page-bg
Body copy on the page canvas.
 Aa 16.83:1 Aa 19.29:1 4.5:1
surface-fg on surface-bg
Body copy on raised surfaces.
 Aa 15.46:1 Aa 16.61:1 4.5:1
field-border on page-bg
Field boundary — the only affordance marking an empty text input.
 3.62:1 4.14:1 3:1
focus-ring on page-bg
Focus indicator against the page canvas.
 16.83:1 14.16:1 3:1

Palette

The primitive ramps the semantic colours resolve to. Hue 286 at near-zero chroma reads as no colour at all, and the ends are true white and true black, so a page canvas is untinted in both themes. Components never read these directly.

zinc

  1. 0
  2. 50
  3. 100
  4. 200
  5. 300
  6. 400
  7. 450
  8. 500
  9. 550
  10. 600
  11. 700
  12. 800
  13. 850
  14. 900
  15. 950
  16. 1000

red

  1. 50
  2. 100
  3. 200
  4. 300
  5. 400
  6. 500
  7. 600
  8. 700
  9. 800
  10. 900
  11. 950

green

  1. 300
  2. 400
  3. 500
  4. 600
  5. 700

amber

  1. 300
  2. 400
  3. 500
  4. 600
  5. 700