Display
Gift ideas worth sharing
Warm, editorial, never shouty — the voice of the landing page.
font-family: "Fraunces", serif;
font-variation-settings: "WONK" 1, "opsz" 36 (UI / marketing)
The marketing site uses warm paper neutrals, a coral primary accent, and a flexible secondary spectrum for moments that need calm, clarity, or a little color. Product principles stay the same: invite-only relationships, clear visibility, and surprise-safe coordination.
Marketing headlines use Fraunces at a calm weight with occasional italic hinges; body copy uses Manrope for clarity and density on long reads.
Display
Gift ideas worth sharing
Warm, editorial, never shouty — the voice of the landing page.
font-family: "Fraunces", serif;
font-variation-settings: "WONK" 1, "opsz" 36 (UI / marketing)
Body
Manrope
Used for navigation, FAQs, and supporting paragraphs — readable at small sizes and comfortable in long blocks.
font-family: "Manrope", sans-serif;
Warm paper surfaces, ink type, coral as the primary accent, and a secondary spectrum for illustration and UI states.
Brand glance
Light
Grounded
Airy
Accented
Defined in apps/web/src/styles.css — use alongside theme tokens below.
Ink
--ink
var(--ink)
Ink Soft
--ink-soft
var(--ink-soft)
Ink Mute
--ink-mute
var(--ink-mute)
Paper
--paper
var(--paper)
Paper Deep
--paper-deep
var(--paper-deep)
Success
--success-warm
var(--success-warm)
Coral is the hero accent; sage, amber, sky, plum, and rose support moments that need variety without a second primary.
Coral
--accent-warm
var(--accent-warm)
Coral Soft
--accent-soft-warm
var(--accent-soft-warm)
Coral Mid
--accent-mid-warm
var(--accent-mid-warm)
Coral Ink
--accent-ink-warm
var(--accent-ink-warm)
Amber
--amber
var(--amber)
Amber Soft
--amber-soft
var(--amber-soft)
Sage
--sage
var(--sage)
Sage Soft
--sage-soft
var(--sage-soft)
Sky
--sky
var(--sky)
Sky Soft
--sky-soft
var(--sky-soft)
Plum
--plum
var(--plum)
Plum Soft
--plum-soft
var(--plum-soft)
Rose
--rose
var(--rose)
Rose Soft
--rose-soft
var(--rose-soft)
Mapped in the layout from shared theme variables — use for elevated cards, borders, and semantic text roles.
Canvas
--surface
var(--surface)
Subtle Wash
--surface-subtle
var(--surface-subtle)
Raised Paper
--surface-elevated
var(--surface-elevated)
Warm Stone
--surface-strong
var(--surface-strong)
Brand Umber
--surface-brand
var(--surface-brand)
Ink Night
--surface-inverse
var(--surface-inverse)
Body Ink
--foreground
var(--foreground)
Muted Copy
--foreground-muted
var(--foreground-muted)
Subtle Meta
--foreground-subtle
var(--foreground-subtle)
Inverse Light
--foreground-inverse
var(--foreground-inverse)
Success
--success
var(--success)
Main
Success Mist
--success-bg
var(--success-bg)
Soft background
Success Ink
--success-foreground
var(--success-foreground)
Readable on soft bg
Warning
--warning
var(--warning)
Main
Warning Mist
--warning-bg
var(--warning-bg)
Soft background
Warning Ink
--warning-foreground
var(--warning-foreground)
Readable on soft bg
Danger
--danger
var(--danger)
Main
Danger Mist
--danger-bg
var(--danger-bg)
Soft background
Danger Ink
--danger-foreground
var(--danger-foreground)
Readable on soft bg
Info
--info
var(--info)
Main
Info Mist
--info-bg
var(--info-bg)
Soft background
Info Ink
--info-foreground
var(--info-foreground)
Readable on soft bg