Gavi Meet

Design tokens

Everything the Gavi Meet surfaces are built from. Values below are the hex equivalents of the oklch tokens in src/styles.css.

Palette — light

Oat--background#F5F1E8
Ink--foreground#2B2622
Bone--card#FCFAF5
Sand--secondary#E7E1D4
Stone--muted-foreground#6B6459
Moss--primary#43663A
Clay--clay#A2795A
Leave red--destructive#9A3B26
Stage--stage#211D19
Tile--tile#332E28

Palette — dark

Deep bark--background#1D1A16
Bone--foreground#F2EEE7
Bark--card#282420
Char--secondary#302B26
Ash--muted-foreground#B4ADA2
Bright moss--primary#8FBE72
Warm clay--clay#C79A73
Leave red--destructive#C6553A
Stage--stage#1A1713
Tile--tile#282420

Typography

Bricolage Grotesque

Display — headings, room names. Weights 500 / 600 / 700, tracking -0.02em.

Instrument Sans

UI and body. Weights 400 / 500 / 600.

  • 12pxMeta, chips, timers
  • 14pxSecondary text, labels
  • 16pxBody, buttons
  • 20pxCard titles, room names
  • 28pxSection headings
  • 40pxPage titles
  • 56pxHero (tablet+)
  • 72pxHero (wide)

Corners

8px

rounded-sm

16px

Cards

24px

Video tiles

999px

CTAs, toolbar

Shadow steps

Step 1

0 1px 2px / 6%

Step 2

0 4px 12px -2px / 10%

Step 3

0 12px 32px -8px / 16%

Step 4

0 28px 64px -16px / 28%

Motion

  • Button hover / press — 150ms ease-out
  • Speaker ring fade — 250ms ease-out
  • Recording dot pulse — 2s, infinite
  • Reactions float — 1200ms, up 140px, fade out
  • Lobby ambient gradient drift — 18s alternate
  • All muted under prefers-reduced-motion