← Back to app

Design System

Vintage paper archive — warm, tactile, analog. Every surface is a slip of parchment, every label a pressed stamp. (New plotting components are added here as they are built.)

Colors

Cream--cream#F2EDE3
Page background
Parchment--parchment#F5F2EB
Default card background
Parchment deep--parchment-deep#E8E0CC
Accent card background
Red--red#8B3A2A
Primary accent, buttons, active states
Red light--red-light#C0503C
Hover / secondary red
Brown dark--brown-dark#2E1A14
Primary text, display type
Brown mid--brown-mid#6B4035
Body text, secondary labels
Linen--linen#D9CFC0
Borders, dividers, subtle fills
Kraft--kraft#B8A898
Muted text, placeholders, captions

Participant colors

Auto-assigned to each joiner (least-used first) so dots stay distinct.

#8b3a2a
#2f6f6a
#c08a2d
#3a4f7a
#6b7a35
#8a3a6b
#c0633c
#4a5a63
#3f6b45
#a0533f
#2b3a5e
#9a3554

Fraunces · Display

display/1Fraunces 300 italic
64px · weight 300 · italic · tracking -0.04em
Plot
display/2Fraunces 300
48px · weight 300 · tracking -0.03em
Tastiness
display/3Fraunces 300
32px · weight 300 · tracking -0.02em
Where do you stand?

Geist Mono · Body & UI

stamp headingFraunces · uppercase
uppercase · 16px · tracking 0.18em
NEW SESSION
input labelGeist Mono
uppercase · tracking 0.1em · 12px · kraft
SESSION CODE
bodyGeist Mono 400
14px · weight 400 · line-height 1.55
Default text — running copy, list items, and most interface surfaces.
body/smGeist Mono 400
12.5px · weight 400 · line-height 1.5
Secondary text, captions, and metadata.

Buttons

Primary .btn-primary
Ghost .btn-ghost

Surfaces

Card / paper slip .card

Cards are parchment rectangles with a thin linen border, a 3px radius, and a stacked shadow that reads as paper lifted off paper.

Session code .room-code
K7QPM

Forms

Plotting components

AxisGraph · 2-D <AxisGraph />
Superfood
Healthiness
Ada
Bo
Cy
GrossYum
Tastiness
Junk
AxisGraph · 1-D
Ada
Bo
ColdHot
Hot take ↔ Cold take
ParticipantChip
AdahostBoyouCy
CountdownPill
expires in 24:59

Principles

  1. Paper, not plastic. Surfaces should feel lifted, tactile, imperfect.
  2. Two fonts. Fraunces for display & stamps, Geist Mono for body and UI.
  3. One accent. Red is the only saturated UI color; participant dots get the wider palette.
  4. Tap targets ≥ 52px. This is a phone app. Be generous.
  5. Rounded at 3–4px. Barely rounded. Never pill-shaped.