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

Space and shape

Spacing is named for the rhythm it sets, not for a step on the scale: a stack's gap, a field's padding. Corners round less as controls get denser, and elevation is kept for things that float; a card reads as raised from its fill alone.

Spacing

What components read. aihio-stack, aihio-cluster, and aihio-grid take the same scale through their gap attribute.

  • --aihio-spacing-cluster-gap-tight 0.25rem Tight spacing inside grouped interactive controls and menu chrome.
  • --aihio-spacing-field-padding-block-sm 0.25rem Block padding for compact form fields.
  • --aihio-spacing-stack-tight 0.375rem Compact vertical rhythm for headings with short supporting copy.
  • --aihio-spacing-control-gap 0.5rem Default inline gap between icons, labels, and grouped actions.
  • --aihio-spacing-field-padding-block 0.5rem Block padding for default form fields.
  • --aihio-spacing-field-padding-inline-sm 0.5rem Inline padding for compact form fields.
  • --aihio-spacing-field-padding-block-lg 0.625rem Block padding for spacious form fields.
  • --aihio-spacing-field-padding-inline 0.75rem Inline padding for default form fields.
  • --aihio-spacing-form-field-gap 0.75rem Recommended gap between labels, help text, and form controls.
  • --aihio-spacing-stack-sm 0.75rem Short vertical separation between related blocks such as alert content and panels.
  • --aihio-spacing-field-padding-inline-lg 1rem Inline padding for spacious form fields.
  • --aihio-spacing-stack-md 1rem Standard section spacing within surfaced components.
  • --aihio-spacing-stack-lg 1.5rem Large separation for footer action areas and major section breaks.

Scale

Steps of 0.25rem. Half steps are written with a hyphen: --aihio-spacing-1-5 is 0.375rem.

  • --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

Every step is computed from --aihio-radius-base, so one override rounds the whole system.

  • --aihio-radius-interactive calc(0.5rem - 2px) Default corner radius for buttons, inputs, toggles, and menus.
  • --aihio-radius-interactive-compact calc(0.5rem - 4px) Tighter radius for dense interactive children such as tabs and menu items.
  • --aihio-radius-pill 9999px Fully rounded presentation for badges, avatars, and pill-shaped affordances.
  • --aihio-radius-surface 0.5rem Corner radius for cards, alerts, and other framed surfaces.

Scale

  • --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

Shadow

Elevation for what floats above the page. Surfaces mostly do without: their fill already sets them apart.

  • --aihio-shadow-modal Deeper elevation for blocking modal dialogs.
  • --aihio-shadow-overlay Elevation for popovers and transient overlays.
  • --aihio-shadow-surface Subtle elevation for surfaced content.