Design System Documentation
Token and component documentation based on Eleventy collections.
Sections
Tokens
Colors, typography, and other foundations on dedicated documentation pages.
Components
Component API with standalone pages and examples.
Examples
Organisms composed from existing components.
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.