Design system

Colors — base palette

• teal-500
  #0fa396 · Brand teal (light)
• teal-400
  #2bc4b4 · Brand teal (dark)
• teal-700
  #0a6e65 · Teal text on tints
• teal-100
  #e7f5f2 · Teal tint surface
• teal-200
  #c9e8e2 · Teal tint border
• sun-400
  #ffc53d · Sunshine CTA
• sun-500
  #ebad1e · Pressed sunshine
• sun-100
  #fff4d6 · Sunshine tint
• ink-900
  #1d1d1b · Near-black ink
• cream-50
  #fffdf5 · Light background
• cream-100
  #f6f4ea · Raised surface
• cream-200
  #f0ede0 · Light hairline
• sea-900
  #12211e · Dark background
• sea-800
  #1b302c · Dark raised surface
• sea-700
  #27443e · Dark hairline
• gray-500
  #6b6a63 · Secondary text (light)
• gray-400
  #a5a399 · Tertiary text (light)
• seafoam-400
  #8fa8a2 · Secondary text (dark)
• seafoam-600
  #5e7570 · Tertiary text (dark)

Colors — semantic tokens

Theme-aware aliases that flip in dark mode. Use these in components, not the base palette.

• page
  Page background
• card
  Card surface
• raised
  Raised surface
• tint
  Selected / tint surface
• hairline
  Default border
• brand
  Brand accents
• cta
  The one amber CTA
• cta-pressed
  CTA hover / pressed
• positive
  Gains, success
• negative
  Losses — warm clay, not alarm red
• primary
  Primary text
• secondary
  Secondary text
• tertiary
  Tertiary text

Typography

• text-7xl · 64px · Landing hero h1
  Slow and steady wins
• text-6xl · 40px · Section h2, mobile hero h1
  Slow and steady wins
• text-5xl · 36px · CTA-band h2
  Slow and steady wins
• text-4xl · 28px · Mobile section h2, stat numbers
  Slow and steady wins
• text-3xl · 26px · Feature titles
  Slow and steady wins
• text-2xl · 22px · Wordmark, pull quotes
  Slow and steady wins
• text-xl · 19px · Lede, card titles
  Slow and steady wins
• text-lg · 17px · CTA labels
  Slow and steady wins
• text-base · 15px · Body
  Slow and steady wins
• text-sm · 13px · Small
  Slow and steady wins
• text-xs · 12px · Small print
  Slow and steady wins
• text-2xs · 11px · Chips, captions
  Slow and steady wins

Border radius

• rounded-sm
  8px
• rounded-md
  12px
• rounded-lg
  16px
• rounded-xl
  24px
• rounded-pill
  999px

Shadows

Warm-tinted and subtle — borders do most of the work.

• shadow-card
  Resting cards
• shadow-raised
  Overlays, popovers
• shadow-cta
  Amber CTA only

Spacing

4px base scale, matching Tailwind's numbering.

• 1
  4px
• 2
  8px
• 3
  12px
• 4
  16px
• 5
  20px
• 6
  24px
• 8
  32px
• 10
  40px
• 12
  48px
• 16
  64px

Components