Semantic tokens
Components consume role-based tokens instead of raw source values.
v1.0.0-alpha.0006 · demo restore
A26 Web Design System
A visual test bench for an independent Apple HIG clone-target web/PWA design system.
Token-backed
HIG-guided
Static Cloudflare-ready
Foundation gallery
System preview
Theme-aware
Light, dark, and system modes remap the same semantic roles.
Pane-based
Primary, secondary, and tertiary panes carry app hierarchy.
Accessible baseline
Contrast, focus, hit-area, and scalable text rules are foundational.
Typography
Type scale
Large Title
Large Title
Title 1
Title 1
Title 2
Title 2
Title 3
Title 3
Headline
Headline
Body
Body text for rows and readable interface copy.
Footnote
Footnote metadata and secondary details.
Caption
Caption text for compact labels.
Color
Labels, surfaces, fills, and accents
Label hierarchy
Primary label
Secondary label
Tertiary label
Quaternary label
Pane
--a26-bg-paneSurface
--a26-bg-surfaceFill
--a26-fill-secondaryAccent
--a26-accentMaterials
Navigation/control layer materials
Regulartoolbar / sidebar
Thinsubtle overlay
Clearrich media only
Core primitives
Pane, toolbar, group, row, and button
Selected row
Persistent selection clarifies navigation path.
Grouped row
Short text stays readable and scannable.
Button row
Prominent actions remain limited.
Split view
Primary / secondary / tertiary hierarchy
Resize the window to test the regular-width adjacent pane layout and compact navigation stack behavior.
Typography
Readable hierarchy and scalable text roles.
Materials
Liquid Glass for navigation and controls.
Layout
Pane structure, safe areas, and adaptability.
Typography
Detail panes show selected item content while primary and secondary selections remain visible in regular-width layouts.
Deployment
Cloudflare Pages
Framework preset: None / Static
Build command: none
Output directory: /