Foundations · Atmosphere
Editorial, not farmhouse.
Closer to a Chez Panisse monograph than a SaaS dashboard. Every surface should feel like a page from a thoughtfully art-directed cookbook.
Moods
- Literary
- Calm
- Hand-made
- Foil-stamped
- Candlelit
- Confident
- Considered
Anti-moods
- Tech-y
- Neon
- Glossy
- Bouncy
- Exclamatory
- Emoji-forward
Foundations · Palette
Ink, paper, gold leaf — nothing else.
Zero saturated accent colors. The only chromatic range is sage ↔ cream ↔ gold/ochre ↔ charcoal. Every swatch must feel mixable from those four.
Deep Conifer
#2F4A3C
--c-conifer
Sage hardcover · dark surface · brand deep
Antique Foil
#B8934A
--c-foil
Display foil on sage (wordmark, covers)
Foil Light
#D4B062
--c-foil-light
Small-caps on sage · Primary CTA background
White Dove
#F4EFE6
--c-cream
Cream page interior · light surface
Chrome
#F6F2EA
--c-chrome
Workspace canvas behind cream artifacts
Deep Ochre
#7A5A26
--c-ochre
Cookbook ink on cream · chapter marks
Warm Charcoal
#1F1B17
--c-ink
Primary body ink on cream · 14.94:1 AAA
Ash
#6C6457
--c-ash
Secondary ink on cream · 5.10:1 AA
Oat
#7C7465
--c-oat
Tertiary ink · AA-large only
Linen
#DAD5CD
--c-linen
Secondary on sage · 6.64:1 AA
Stone
#B9B4AC
--c-stone
Tertiary on sage · 4.70:1 AA
Alert Rust
#A55C2B
--c-rust
Destructive only · reserved
Foundations · Typography
Three faces, six tiers.
Marcellus for the wordmark. Lora for anything literary. DM Sans for everything that isn't. Hierarchy is scale and color — never bold.
- 1 Display · Wordmark
HEARTH
Reserved exclusively for the wordmark. Never used elsewhere.
- 2 H1 · Recipe & Chapter
Slow-braised shoulder with preserved lemon
Hierarchy is size + color, never bold — Lora never goes bold.
- 3 H2 · Section title
For the glaze
Same grammar as H1, one step smaller. Sections within a page.
- 4 Italic · Subhead
A winter bowl that keeps giving long after the oven cools.
Italic deck under a title. Also carries meta, folios, Roman numerals.
- 5 Eyebrow · Small-cap
INGREDIENTS
Wide tracking is non-negotiable — it's what signals "chapter mark."
- 6 Body · UI
Remove the lid, baste, and return to the oven uncovered for a final thirty minutes. The sauce should coat the back of a spoon.
Neutral, quiet, lets the serifs do the emotional work.
Foundations · Spacing
A 4pt scale, named for the job.
Section rhythm: 96px between major sections, 40–56px between subsections, 24–28px heading-to-body. Line measure holds at 52–58ch.
-
--space-2xs4px -
--space-xs8px -
--space-sm12px -
--space-md16px -
--space-lg24px -
--space-xl32px -
--space-2xl48px -
--space-3xl64px -
--space-4xl96px
Foundations · Radius
2px for paper, pills for taps.
The whole system lives at 2px — the radius of a well-cut book page. Pills are the one intentional exception, and they mean tappable.
--r-page · 2pxcards, inputs, thumbnails
--r-pill · 9999pxbuttons only
Foundations · Shadows
Warm, brown-biased, whisper-soft.
Shadows are always warm and brown-biased — never blue. Treat them as paper lift, not UI chrome.
--shadow-paperlifted-paper default
--shadow-liftdeep lift, hero cards
--shadow-buttonpill button only
Foundations · Motion
280ms ease. That's it.
Every state change is a 280ms ease fade — background, color, shadow. No springs, no bounces. The 3px chevron nudge on T2 links is the entire scope of delight.
Foundations · Focus
Keyboard-only, surface-aware.
Tab through the demos. Rings use Deep Ochre on cream, Foil Light on sage. Mouse clicks never show a ring.
Identity · Surfaces
One wordmark, three physical reductions.
Marcellus stamped in Antique Foil on sage cloth. The cover introduces the object; the spine identifies it on a shelf; the app icon miniaturizes it on a phone. Every decision must look right on a hardcover spine — if it would embarrass the object in a bookshop, it fails.
Cover
4:5 aspect · cloth-weave sage · Antique Foil wordmark with pressmark and dedication. Covers stay typographic — never photography.
Spine
1:10 aspect · wordmark runs top-to-bottom (US/UK convention) and sits at the foot — publisher's-stamp placement, nothing else competing on the spine.
App icon
Marcellus wordmark HEARTH in Antique Foil on sage cloth, nearly filling the icon horizontally · iOS squircle radius (~22%). A miniature cover stamp.
Favicon
Lora upright H monogram in Antique Foil on sage cloth · 2px paper-square radius (no squircle). The one surface where a non-Marcellus mark ships.
Identity · Object
The book in the round.
A cover ultimately lives on a shelf, not on a screen. This specimen renders the artifact as the physical object — six faces, a ground shadow, draggable in three dimensions. Composition borrows the Joie voice (italic title, centered photo plate, tracked subtitle, italic author) and dresses the cloth in a Parisian sky to show the system can wear palettes outside the sage default. The HEARTH publisher mark sits at the foot of the spine — the same spot it would land on a hardcover at a bookshop.
Joie
A Parisian's guide to celebrating the good life
HEARTHComponents · Cards
Subtly squared, barely bordered.
2px radius, 1px whisper border, brown-biased shadow. Book-layout, not card-UI.
Saved · 2 days ago
Preserved-lemon shoulder
Slow oven, shallow bath of stock and citrus, lid on for the first hour. The sauce reduces to glaze.
Chapter 3
Braises & slow things
The chapter for winter afternoons. Patience does most of the work.
Open chapterCover treatment
On the sage side
Same card grammar, dark interior. Text shifts to White Dove and Linen; the eyebrow lifts to Foil Light.
Components · Inputs
Printed-form discipline.
2px corners, off-cream fill, barely-there border until focus deepens it to charcoal. Inputs and pills sit side-by-side and should feel different.
Components · Alerts
Quiet margins, Rust for destruction only.
Alerts sit in the margin of the page — a vertical Deep-Ochre rule, a small-cap label, Lora italic copy. Alert Rust is reserved for destructive.
Components · Photography
Two places, imperfect & true-to-phone.
Photography lives in the recipe-detail hero and in square library thumbs. No filters, no AI enhancement. Covers and chapter openers remain typographic.
Chapter 3 · Braises
Preserved-lemon shoulder
Patterns · Chapter rhythm
Mark · rule · title · subhead · labels · folio.
The canonical rhythm of any long-form page. Keep the beats; let the content change.
Chapter III
Braises & slow things
A chapter for winter afternoons — the oven doing most of the work, the kitchen warm for hours.
Ingredients
- i. Shoulder, 1.5kg, trimmed
- ii. Preserved lemon, two, rind only
- iii. Bay, three leaves
- iv. Stock, warm, a generous bath
— 47 —
Patterns · Recipe hero
Sage cover, cream interior.
Upper ~48% sage hero with Foil accent rule; lower portion drops onto cream with Deep Ochre small-cap labels. Two sides of the same object.
Main · Sunday
Preserved-lemon shoulder
Ingredients
Shoulder, preserved lemon, stock, bay. A short list — the oven is the ingredient you can't see.
Patterns · Folio
Em-dash page marker.
Centered, Lora italic, 12–13px, Deep Ochre on cream.
— 47 —
— 48 —
Patterns · Library thumbs
Small squares, 2px corners.
32–40px, square, 2px radius, 1px whisper border. The only other place photography is allowed besides the recipe hero.
Voice & tone
Warmth from phrasing, never from exclamation.
Factual when factual serves. Conversational where it helps — empty states, toasts, the occasional turn-of-phrase in conversion copy.
Do
- "Your library is empty. Save a recipe to begin."
- "Saved — it's in your library."
- "Turn your library into a cookbook."
- 50 min · Serves 4 — em-middot separator, no "mins"
Don't
- "Woohoo! Saved! 🎉"
- "Nothing here yet :("
- "Transform your digital recipes!"
- "50 mins, 4 servings"