The campfire,
codified.

Every token in index.html lives here too. Change once, change everywhere. The brand is sunset + campfire + chunky + playful. No iMessage blue. No Apple-restrained minimalism. Warm paper, ember pops, Fraunces italics, drop-shadows you can feel.

the mark

The flame.

An inline SVG — not an emoji, not an image. Multi-layer campfire mark: ember-deep outer flame · ember middle · sunbeam inner tongue · log wood crossed beneath · soft ground shadow. Renders crisp at every size from 16px favicon up.

Paired with the wordmark in Fraunces italic, SOFT 100, WONK 1. Minimum clear-space equals the flame's height. Use 🔥 emoji only in body copy, never as the mark.

the fire

Color.

Sunset-campfire. Cream paper as canvas, ember + ember-deep for heat, sunbeam yellow for warmth, lavender for life, warm black (night) for ink. No cool tones. No iMessage blue.

cream

#fef3e4

canvas — warmer than paper

cream-hot

#ffe8c9

"them" bubbles, soft cards

marshmallow

#fff5db

elevated surfaces, buttons

ember

#ff6b35

flame, "best" tier card

ember-deep

#e63946

primary CTA, italic emphasis

sunbeam

#ffb627

"me" bubbles, warm tier cards

lavender

#d9c6ee

network wedge accent, "still glowing"

night

#2b1810

ink, borders, drop-shadow, quote block

night-soft

#6b4a35

muted text, footer

log

#a67256

wood base of the flame mark

the voice (visual)

Typography.

Fraunces is the display face — a variable serif with opsz, SOFT, and WONK axes. Italics get SOFT 100, WONK 1 for extra personality. Body is Outfit — warm geometric sans with character. No cold Inter-style neutrality.

Hero h1
keep every thread warm.
Fraunces · 64–140px · SOFT 50 · WONK 1 · 700 · italic swash on em
Section h2
bigger fire, more threads.
Fraunces · 42–72px · SOFT 40 · WONK 1 · 700
Card h3
Per-thread voice
Fraunces · 22px · 700
Caption / cite
the reason this exists
Fraunces italic · 13–28px · SOFT 100 · WONK 1 · ember-deep
Body
Your dad texts all day about food and family. You can't always reply in the moment — but you don't want the conversation to go cold.
Outfit · 16px · 400 · 1.55
Small
14-day trial · no card · works on your Mac
Outfit · 14px · 400
Caption tag
Embers, in your voice (dad)
Fraunces italic · 13px · 600 · ember-deep · used around balloons
the pieces

Components.

Chunky neo-brutalist — thick borders, hard drop-shadows, buttons that press down on click. Not iMessage-polite. Not emoji-flat. Tactile and loud.

Buttons
light a fire — $9.99/mo see it work ↓

Hover: lifts 2px. Active: presses down 6px into shadow. Shadow is solid night — not blur.

Speech balloons (not iMessage)
made the brisket this weekend 🔥
Embers, in your voice (dad)
ha, that's a win. low and slow?
Ribbon + new-pill
MOST POPULAR

Ember tier card. Ribbon sits rotated -2° at top-center, night pill with sunbeam text.

NEW
Tilt cards — asymmetric gallery

Family

The ones you want warm forever.

Leads

Every prevented lead-death = real money.

Tier flame-ladder
🔥
Spark
$9.99
🔥🔥
Ember
$19.99
🔥🔥🔥
Hearth
$39.99
🔥🔥🔥🔥
Bonfire
$99
🏭
Forge
$59/seat
Floating sparks — ambient motion

6 keyframes, 8s cycle, staggered delays. Respect prefers-reduced-motion at implementation.

the voice (copy)

How it talks.

Warm. Direct. Specific over generic. Matches the founder's texting voice — which is the product. No AI-PR language. No consultant mush.

Do

  • Start headings with verbs or specific claims
  • Use second person: "your dad," "your top lead"
  • Lead with concrete emotional specifics — brisket, food, family, lead going cold
  • Acknowledge the weird thing head-on
  • Short paragraphs. One or two sentences. Then break.
  • Fraunces italic on the one word that carries the emotion

Don't

  • No "revolutionary," "seamless," "AI-powered," "next-generation"
  • No iMessage blue. Ever.
  • No stock photos of smiling families
  • No hedging — "sort of" and "kind of" die
  • No multi-paragraph explanations. Cut harder.
  • No 🔥 emoji in the logo slot — use the SVG
the legibility

Accessibility.

WCAG AA across the palette. Chunky borders help low-vision and motion-sensitive users alike. Native HTML, no ARIA gymnastics.

Contrast ratios

night on cream : 13.1:1 (AAA)

night-soft on cream : 5.4:1 (AA)

marshmallow on ember-deep : 4.9:1 (AA)

marshmallow on night : 16.8:1 (AAA)

Motion + focus

Sparks animation respects prefers-reduced-motion — disable when requested.

Focus: 3px dashed outline in ember-deep, 4px offset.

All interactives keyboard-reachable. No div-as-button. Native <details> for FAQ.