Foundations
Foundations
Zetta is built from the bottom up: a single set of foundation tokens resolves into three themes (Light, Dark, Accessibility), which dress ~70 components, all held in line by 13 guardrails. Get the foundation right and the rest follows — every component is just tokens arranged.
The layers
- Foundation tokens — colour, type, spacing, radius, elevation, motion, icons. The single source of truth.
- Themes — Light, Dark and a high-contrast Accessibility theme that all share the foundation and only re-map colour and shadow.
- Components — generated per project from the spec; each one references tokens, never raw values.
- Guardrails — the 13 rules that keep every surface on-system across all three themes.
Explore
Brand & principles
The lime brand and the four ideas everything else follows from.
View →Color
One brand lime, a status-only semantic set, a disciplined neutral ramp.
View →Typography
Inter for structure, Geist for operation, Geist Mono for code. 12px floor.
View →Iconography
Material Symbols Outlined, weight 300, with a searchable browser.
View →Spacing
A tight 4 / 8 / 16 / 24 scale for rhythm, not uniform padding.
View →Radius
Two radii: 8px for containers, full for pills — one 4px exception.
View →Elevation & shadows
Border for structure; shadow only for overlays; none in Accessibility.
View →Motion
A small set of durations and easings, reduced-motion aware.
View →Theming
One foundation, three themes, switched by a data-theme scope.
View →Accessibility
The pure-black theme, 44px targets, meaning by label + icon + border.
View →