Foundations
Foundations
Zetta is built from the bottom up: a single set of foundation tokens resolves into three themes (Light, Dark, Accessibility), which dress 77 components, all held in line by 17 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 17 rules that keep every surface on-system across all three themes.
Explore
Brand & principles
The three-role palette and the four ideas everything else follows from.
View →Color
Three roles (brand identity, indigo primary, purple AI), status-only semantics, a 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 →Logo
The Zetta lockup — sizes, clear space, and the approved colour set.
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 →Grid
The responsive 12 / 8 / 4-column layout grid, 1440px max width.
View →Elevation & shadows
Border for structure; raised + overlay shadows; none in Accessibility.
View →Motion
A small set of durations and easings, reduced-motion aware.
View →Scrollbar
Themed track and thumb so scrollbars follow the theme, not the OS.
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 →