Style guide for every page we build next.
Tokens, primitives, components, layout shells, and states are gathered here so future pages are tuned from one source instead of scattered hardcode.
Color Tokens
Semantic roles first. Raw values stay behind variables.
--ds-bg-page--ds-surface-base--ds-tone-neutral-bg-soft--ds-tone-accent-bg-soft--ds-tone-info-bg-soft--ds-tone-warning-bg-soft--ds-tone-danger-bg-soft--ds-text-primary--ds-text-muted--ds-accent--ds-success--ds-info--ds-danger--ds-border-subtleTypography
Display, section headings, body, captions and monospaced labels.
Typography scale
World-Class Design System
Dense enough for product, expressive enough for agency pages.
We keep letter spacing neutral, rhythm predictable, and headings tied to roles rather than one-off local sizes.
Radii & Elevation
Reusable surface depth for cards, rails, panels, and navigation.
--ds-radius-sm--ds-radius-md--ds-radius-lg--card-radius-lg--ds-shadow-sm--ds-shadow-md--ds-shadow-lgButtons & Badges
Icons are optional and used only in high-emphasis primary actions.
Icon & Avatar Primitives
Small interface details are components with variants and states.
+2K+2KCards & Surfaces
Cards expose variant, tone, size, and elevation instead of local CSS.
Neutral
Surface cardDefault raised surface for content blocks and repeated items.
Soft
Muted cardUseful for stats and secondary panels.
Inverse
High-contrast surfaceInverse components remain available for CTAs and editorial contrast.
Sidebar Shell
The app shell is now part of the system, not legacy styling.
The real sidebar is rendered by layout. It now uses DS tokens, active route detection, DS motion, and the same component primitives that future pages will use.