Design system
The kit.
Tokens, type, components, and motion — rendered live from the same CSS this site uses.
01 — Color
Six surfaces. Three borders. Five text levels. One accent.
Surface
--surface-canvas #FFFFFF
--surface-raised #FAFAFA
--surface-sunken #F5F5F5
--surface-muted #EFEFEF
--surface-subtle #E8E8E8
--surface-strong #DEDEDE
Border
--border-subtle #E8E8E8
--border-default #D6D6D6
--border-strong #A3A3A3
Text
--text-primary #171717
--text-secondary #353535
--text-tertiary #525252
--text-muted #666666
--text-faint #707070
Accent
--accent --text-primary
--accent-hover --text-tertiary
--accent-surface --surface-sunken
--accent-border --border-default
02 — Type
One type family. Clear hierarchy.
The quick brown fox
Jumps over the lazy dog
Pack my box with five
The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs.
0123 4567 — &@#%
03 — Components
Live atoms.
Buttons
.btn-primary · .btn-ghost
Chips
.project-tag · .tool-chip
LegalTech / AI SaaS Design System Next.js TypeScript Figma
Nav item
.nav-item · .active
Contact row
.contact-link-item
04 — Motion
Interaction only. No scroll effects.
Spring --ease-spring
cubic-bezier(0.16, 1, 0.3, 1) Out --ease-out
cubic-bezier(0.0, 0.0, 0.2, 1) Icons
SVG · currentColor · 1.5px