Design System Documentation

Token and component documentation based on Eleventy collections.

Sections

Token Pages

• Tokens

  Foundations organized as documented token categories.

• All Tokens

  Tabular overview of all tokens from the central YAML export.

• Color Tokens

  Brand, neutral, and overlay tokens including mode and brand switching.

• Typography Tokens

  Display of heading and text scales including token values.

Component Pages

• Components

  Component documentation with dedicated pages and API examples.

• Button

  Variants, grouped usage, states, and token-driven rendering.

• Icon

  Primitive for SVG icons from src/assets/icons.

• Label

  Text and icon label primitives for components and form fields.

• Input

  Text input pattern with token-driven interaction states.

• Checkbox

  Selection control for binary form choices with token-based states.

• Switch

  Binary setting control with toggle-switch visuals for immediate on/off changes.

• Radio

  Selection control for mutually exclusive choices within a group.

• Link

  Inline and standalone link component with token-driven states.

Example Pages

• Examples

  Composed patterns (organisms) built from existing UI components.

• Vanilla Starter

  Get started with ui-foundations in a Vite vanilla app (no React).

• Login Form

  Simple login form as an organism composed of Label, Input, and Button.