Inyan design system
Stationery, not software.
Every color, size and motion on this page is a token from packages/tokens. The components are in packages/ui. Principles live in docs/DESIGN.md.
Color
Paper
paper
oklch(98.2% 0.006 85) · #fbf9f5
paperRaised
oklch(100.0% 0 0) · #ffffff
paperSunken
oklch(95.5% 0.009 85) · #f3f0e9
line
oklch(89.0% 0.01 85) · #dedad3
lineStrong
oklch(62.0% 0.014 85) · #8a867d
Ink
ink
oklch(23.0% 0.012 60) · #211c17
inkMuted
oklch(48.0% 0.014 60) · #645c56
inkFaint
oklch(54.0% 0.012 60) · #746d68
Accent
accent
oklch(52.0% 0.12 42) · #a14e2b
accentHover
oklch(46.0% 0.12 42) · #8d3c18
accentSoft
oklch(94.0% 0.03 42) · #fee5dc
onAccent
oklch(98.5% 0.005 85) · #fcfaf6
focus
oklch(52.0% 0.12 42) · #a14e2b
Status
success
oklch(50.0% 0.11 150) · #2b7440
successSoft
oklch(95.0% 0.03 150) · #e1f5e4
warning
oklch(50.0% 0.13 75) · #8d5500
warningSoft
oklch(96.0% 0.04 85) · #fef0d4
danger
oklch(52.0% 0.17 25) · #b63132
dangerSoft
oklch(95.0% 0.03 25) · #ffe7e4
Contrast for every pair the components use is asserted in tokens.test.ts (AA minimum, AAA for body text).
Type
Emily & Connor
Welcome drinks at El Alquimista
Itinerary
Ceremony
Who's going
Friday, October 22
Large body: the welcome note. Fraunces for names and headings, Inter for everything else.
Body: notes, descriptions, the feed.
Small muted: times, places, metadata.
xs
0.75rem
sm
0.875rem
md
1rem
lg
1.125rem
xl
1.25rem
2xl
1.5625rem
3xl
1.953rem
4xl
2.441rem
5xl
3.052rem
6xl
3.815rem
Space and shape
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
24
96px
radius.sm 6px
radius.md 12px
radius.lg 20px
shadow.sm
shadow.md
shadow.lg
Buttons
One accent per screen. Medium buttons grow to 44px on small screens so they are easy to hit.
Tags and avatars
Cards
Friday, October 22
Welcome drinks
El Alquimista · 7:00 PM CST
Side plan
Nails at Salon Azul
Thursday 2:00 PM · about $60 each
3 in
Forms and dialogs
Hosts see this on the guest list.