01 — Typography
Type System
Space Grotesk for headings and display. DM Sans for body, UI text, and documentation.
Display
Space Grotesk 700 · 64px
Neighborhood
H1
Space Grotesk 700 · 48px
Wonder and class
H2
Space Grotesk 600 · 30px
Component architecture
H3
Space Grotesk 600 · 24px
Token definitions
H4
Space Grotesk 500 · 20px
Setting row anatomy
Body
DM Sans 400 · 16px
Components are designed to work together, not just exist in isolation. Every decision — from spacing to motion — serves the goal of making interfaces feel considered and cohesive.
Body Small
DM Sans 400 · 14px
Muted description text used for helper text, metadata, timestamps, and secondary information throughout the system.
Caption
DM Sans 500 · 12px
Section label · Status text
Overline
Space Grotesk 600 · 12px
Token Category
02 — Color
Color Palette
Vivid natural palette with warm neutrals to keep it grounded. Eight color families plus four semantic values for status and feedback.
Neutral — Warm Stone
Primary — Grass Green
Berry — Strawberry Red
Terracotta — Campfire Orange
Amber — Gold Ingot
Sky — Clear Day Blue
Plum — Nether Portal
Sage — Prismarine Teal
Semantic
Success
Warning
Error
Info
04 — Radius
Border Radius
Three role-based tokens. The name tells you which to use — control for interactive elements, surface for containers, pill for badges and circles.
control · 8px
Buttons, inputs, selects, checkboxes, menu items, tooltips
surface · 12px
Cards, panels, modals, popovers, content sections
pill
Badges, avatars, toggle tracks, tab pills
05 — Elevation
Shadow / Elevation
Borders and surface color are the primary elevation tools. Shadows are reserved for floating layers only — most UI depth comes from neutral border shades and background contrast.
subtle
Resting cards, input fields, subtle depth cue
raised
Hovered cards, dropdown triggers, active surfaces
overlay
Dropdowns, modals, popovers, floating layers