Typography
Strong hierarchy comes from scale, weight, and spacing before decorative styling.
Design System DocsWeb foundation
Tokens first, components second, packages only when reuse is real.
This page documents the current baseline for product surfaces in the web app. The system intentionally starts inside the app layer until multiple consumers justify extraction into a shared package.
Token groups
Color
Typography
Spacing
Radius
Shadow
Surface treatment
Principles
Spacing
Panels, content blocks, and actions follow a restrained rhythm to keep pages readable.
Composition
Build from reusable surfaces and semantic tokens before extracting shared components.
Color language
Ink
Paper
Accent
Soft
- Use semantic tokens instead of raw hex values in UI code.
- Prefer shared panel and action treatments over ad hoc utility stacks.
- Reserve the accent color for actions, emphasis, and active states.
Extraction roadmap
These are the primitives already reflected in the seeded homepage and ready for broader reuse across future screens.
Page shell
Hero
Feature cards
Status strip
Primary and secondary actions