Foundations
Core Sub-pages
Colors
The 12-step scale and role-based semantic variables.
Spacings
Spacing scale tokens for paddings, margins, and layouts.
Radius
Component-specific and panel-specific rounded corner rules.
Shadows
Subtle elevation shadows for overlays, popups, and dialogs.
Aa
Typography
Font scale, display serif pairing, and body font styling.
Icons
Standardized Lucide icon integration and sizing conventions.
Layout
Structural Box, Flex, Grid, Container, Section, and Row primitives.
16:9
Aspect Ratio
Constrained media aspect ratios for images, video embeds, and thumbnails.
Motion
Easing curves and panel entrance animation classes.
What's here
- • Colors — the 12-step scale and the semantic roles mapped onto it.
- • Spacings & Radius — the spacing scale and the role-based radius tokens.
- • Shadows — the two elevation tokens (panel, modal).
- • Layout, Aspect Ratio, Icons — structural helpers and the icon set.
When to use
Reach here to theme, not to build. Every component already consumes these tokens; you tune the tokens (via the Configurator or your app's CSS) and the whole system follows.
Why it matters
Foundations are the single source of truth. One token change re-skins every component at once — and the lint guards make it impossible to bypass them with a raw hex, so consistency is enforced, not hoped for.