Work in progress
Design System
Just the basics for now — shared colors, spacing, and a few components I can reuse. I'll add Storybook later when there's more to show.
Tokens
The shared colors, spacing, and type I want the rest of the site to pull from.
Color
accent
#6ea8dd
mocha
#a88b74
ink
#faf3ea
inkSoft
#efe2d4
muted
#e8bf96
bg
#120b08
bgDeep
#0b0705
bone
#211712
success
#7fc98c
danger
#f08a7c
Space
- 20.5rem
- 30.75rem
- 41rem
- 51.25rem
- 61.5rem
- 82rem
Type
Syne for headings
Figtree for everything else. That's the pairing for now.
Corner radius: 0.375rem / 0.5rem / 0.75rem
Button
Primary for the main thing, secondary when it's not, ghost when it should stay out of the way.
Text field
Label, hint, and error states — the usual stuff, hopefully a little nicer.
Badge
Tiny status labels. Easy to overuse, so I'm keeping these simple.
NeutralIn progressShipped