HEARTH Design
Flow · I

The first recipe.

Sign in, paste a recipe into Hearth, read it, scale it for tonight's table, edit a step, save. From the sage cover to a library of one — end to end.

Hearth Press
HEARTH

A beautiful home
for your recipes.

By continuing, you agree to our Terms  ·  Privacy

I · Welcome

The only sage moment in the flow. Foil-stamped wordmark, Apple + Google, nothing else.

Continue with Apple

Inspect at 1×
HEARTH
I · Beginning

The beginning
of a library.

import a recipe

II · Library · empty

Designed empty state, not a to-do — typography-only chapter opener with an italic-Ochre invitation at the foot. Tap is internal now: the invitation opens the Import surface inside the app. Rhymes with Flow III's 'When you're ready —' but stays one line so the chapter-opener above carries the editorial weight.

Tap — import a recipe →

Inspect at 1×
Bring in a recipe
From anywhere

Bring a recipe
home.

III · Import · surface

The entry point. A textarea — not a single-line field — accepts whatever the cook hands it: a link, a recipe texted from a friend, a chunk pasted from Notes. The AI auto-detects what it got on submit. Below, a co-equal 'Scan a photo' doorway with an em-dash 'or' divider between — both options visible at once, the cook picks by acting. The halo lands on the textarea as the main-line continuation. Two sub-flows descend: the photo arc (source sheet → transcription gate → Import preview) and the share-sheet path off Safari (an alternate doorway from outside the app, also landing at the Import preview).

Paste a recipe

Inspect at 1×
Photo · sub-flow
Source sheet

Native iOS action sheet for the new-recipe path — Take Photo · Choose from Library · Cancel. Same OS sheet Flow IV uses for the photo-add arc; here it opens after the cook taps 'Scan a photo' on the import surface. Hearth doesn't reskin platform pickers; voice lives in what comes next.

Choose from Library

Bring in a recipe

— reading the page —

Photo · processing

The wait. After the cook picks a photo, AI vision does the slow work — reading cursive on grandma's pink paper, transcribing the recipe verbatim. Centered on cream: a small typographic 'page' — five Ochre hairlines at varying widths that draw left-to-right and fade in sequence (each animation-delay offset so the wave never empties), suggesting the AI reading line by line down the page. Italic Lora '— reading the page —' beneath, in the system's own voice. No spinner, no progress bar, no percentage — those are SaaS chrome. No fake-photo graphic either — a paper-warmth placeholder where the cook's actual photo isn't would read as cosplay. Honors prefers-reduced-motion (lines settle into their drawn state, no animation). No tap target — the screen auto-advances to the transcription gate when vision completes. Cancel is the only out.

(auto)

Inspect at 1×
Bring in a recipe

From your photograph.

Grandma's Corn Ragu

serves 4

4 ears corn, kernals cut off the cob

1 large shollot, finely diced

2 tbsp olive oil

1 cup dry white wine

3 tbsp unsalted butter

small handful basil, torn

sauté shollot in olive oil, 2 minutes

add corn and wine, simmer until reduced

swirl in butter at the end

top with basil and a little salt

— Edit anything we got wrong. —

Photo · transcription gate

The new screen between photo capture and the structured preview. Hearth's vision pipeline transcribes the source verbatim — no restructuring, no reordering — and the cook reviews the transcription against the original photo before the AI structures it. Two failure modes are separated: transcription errors (handled in this gate), structure errors (handled at the Import preview). Heirloom photos carry a structurally worse OCR baseline; this is where Hearth earns its trust on hard inputs. Dotted-Ochre underlines mark low-confidence words. Continue commits the transcription and lands the cook on the photo-variant Import preview.

Continue

Inspect at 1×
Editing

Grandma's Corn Ragu

Serves

Notes

From Grandma Ruth's recipe box.

Ingredients serves
  • corn, kernels cut off the cob
  • large shallot, finely diced
  • olive oil
  • dry white wine
  • unsalted butter
  • basil, torn

    grandma was heavier-handed

Method
  1. i. sauté shallot in olive oil, 2 minutes
  2. ii. add corn and wine, simmer until reduced

    or until barely glossy

  3. iii. swirl in butter at the end
  4. iv. top with basil and a little salt
Structured edit · from photograph

Same structured-edit layout as the main-line V — same top bar ('Cancel · EDITING · Save'), same affordances, same inline-edit grammar. The deltas: the From-URL chip falls away (no URL), and the hero slot renders an empty placeholder (dashed-border cream box with italic-Ochre '— add a photo —' invitation) since the cook hasn't taken a dish photo yet — they only photographed the source card, which Hearth keeps in data but doesn't re-render here. Recipe content matches the transcription gate — Grandma's Corn Ragu, serves 4, no minutes (handwritten cards rarely carry one). Notes block arrives populated with what the AI extracted from the card ('From Grandma Ruth's recipe box.'); the cook adds her voice underneath as she returns over time. The basil line uses the combobox's free-text mode ('small handful'), and an AI-extracted margin note rides under it ('grandma was heavier-handed'). Save commits the recipe to the library; the source photograph stays attached in data forever.

Save

Inspect at 1×
Share sheet · sub-flow
table.kitchen Dinner

Late summer · July 12

Summer Corn & Basil Ragù

by Mia Aquilina

A brothy, buttery late-summer ragù that happens when you overshop at the farmers' market. Almost all pantry — corn, basil, a little wine, a spoon of white miso to finish.

Serves 4 · 50 minutes · One pan

Ingredients

  • 6 ears sweet corn, kernels scraped (cobs reserved)
  • 1 shallot, minced
  • 3 garlic cloves, thinly sliced
  • 1 cup dry white wine
  • 1 tbsp white miso
  • 1 cup basil leaves, torn
  • 3 tbsp unsalted butter
  • olive oil, salt, black pepper

Method

  1. Scrape kernels into a bowl. Simmer the stripped cobs in 3 cups water for 20 minutes for a quick corn stock. Strain.
  2. Heat a wide pan over medium. Coat with olive oil, sweat shallot until translucent, 4 minutes. Add garlic, 30 seconds.
  3. Add kernels and a pinch of salt. Cook 3 minutes, until they pop and turn glossy.
  4. Deglaze with wine; reduce by half. Add 2 cups stock and the miso. Simmer gently 8 minutes — it should thicken to a loose ragù.

Continue reading →

Mobile Safari · article

Alternate entrance — the cook is reading a recipe on the web. The ochre halo marks where the share tap happens; the iOS share sheet (next) leads back to the Import preview on the main line.

Safari share button

Inspect at 1×
Share sheet

iOS share sheet over the dimmed article. Hearth halo'd as the destination. The handoff lands the cook back at the Import preview on the main line — same screen, different doorway.

Hearth app

Inspect at 1×
Bring in a recipe
From anywhere

Bring a recipe
home.

IV · Import · surface, pasted

Same composition as III with a chunk of pasted recipe text filling the textarea — the kind a friend might text. The 'Scan a photo' doorway falls away once the cook has committed to the paste path. A full-width Foil-Light Primary pill — same grammar as Flow III's 'Send to Hearth Press' — appears below the textarea, halo'd as the next tap. The next tap lands in the Import preview where Hearth has already extracted the recipe in its own voice.

Tap Import

Inspect at 1×
Editing
From table.kitchen

Summer Corn & Basil Ragù

Serves min

Notes

— add a note —

Ingredients serves
  • sweet corn, kernels scraped (cobs reserved)
  • shallot, minced
  • garlic, thinly sliced
  • dry white wine
  • white miso
  • basil leaves, torn
  • unsalted butter

    Cultured if I have it.

  • Olive oil, salt, black pepper
Method
  1. 6 ears sweet corn · 3 cups water
    i. Scrape kernels into a bowl. Simmer the stripped cobs in 3 cups water for 20 minutes for a quick corn stock. Strain.
  2. olive oil · 1 shallot · 3 garlic cloves
    ii. Heat a wide pan over medium. Coat with olive oil, sweat shallot until translucent, 4 minutes. Add garlic, 30 seconds.
  3. the scraped kernels · salt
    iii. Add kernels and a pinch of salt. Cook 3 minutes, until they pop and turn glossy.
  4. 1 cup white wine · 2 cups corn stock · 1 tbsp white miso
    iv. Deglaze with wine; reduce by half. Add 2 cups stock and the miso. Simmer gently 8 minutes — it should thicken to a loose ragù.

    10–12 minutes — thickens better.

  5. 3 tbsp butter · 1 cup basil · black pepper
    v. Off heat, stir in butter and torn basil. Taste; pepper heavily.
  6. toasted bread or polenta
    vi. Spoon onto toasted bread or polenta.
V · Import · structured edit

The shared destination for all three import doorways. An unsaved import is, by definition, an editing surface — top bar reads 'Cancel · EDITING · Save' so the cook never doubts what kind of screen they're on. Every field is inline-editable, every affordance visible at all times: title in Lora display (no form-field box); serves N and minutes carry dotted-Ochre underlines; ingredients render as a type-aware trio per line (qty · unit ▾ · name) where the unit combobox accepts standard units AND 'pinch', 'small handful', 'to taste'; method steps in the italic-Roman grammar with mise lines; notes block sits between meta and ingredients (empty invitation here, populated on the photo path). AI-extracted inline comments arrive pre-populated where the source carried marginalia (here: 'Cultured if I have it.' on the miso line). Save commits the recipe to the library. The Editing sub-flow below shows the unit-combobox in its open state — the most distinctive of the inline-edit affordances.

Save

Inspect at 1×
Editing · sub-flow
Editing
From table.kitchen

Summer Corn & Basil Ragù

Serves min

Notes

— add a note —

Ingredients serves
  • sweet corn, kernels scraped (cobs reserved)
  • shallot, minced
  • garlic, thinly sliced
  • 1 dry white wine
  • white miso
  • basil leaves, torn
  • unsalted butter

    Cultured if I have it.

  • Olive oil, salt, black pepper
Method
  1. 6 ears sweet corn · 3 cups water
    i. Scrape kernels into a bowl. Simmer the stripped cobs in 3 cups water for 20 minutes for a quick corn stock. Strain.
  2. olive oil · 1 shallot · 3 garlic cloves
    ii. Heat a wide pan over medium. Coat with olive oil, sweat shallot until translucent, 4 minutes. Add garlic, 30 seconds.
  3. the scraped kernels · salt
    iii. Add kernels and a pinch of salt. Cook 3 minutes, until they pop and turn glossy.
  4. 1 cup white wine · 2 cups corn stock · 1 tbsp white miso
    iv. Deglaze with wine; reduce by half. Add 2 cups stock and the miso. Simmer gently 8 minutes — it should thicken to a loose ragù.

    10–12 minutes — thickens better.

  5. 3 tbsp butter · 1 cup basil · black pepper
    v. Off heat, stir in butter and torn basil. Taste; pepper heavily.
  6. toasted bread or polenta
    vi. Spoon onto toasted bread or polenta.
Unit picker · open

The cook taps the unit on the white-wine line; the closed '[cup ▾]' token is replaced in place by a typographic radio strip — '— tsp · Tbsp · cup · g · other —'. Same vocabulary as Flow VI's measure picker (cups/grams/oz on the eyebrow row): em-dash bookends, middot separators, italic Lora Ochre, current selection (cup) larger and Ink with the chapter-rule hairline beneath. The line wraps so 'dry white wine' flows beneath the strip — the picker gets the full row, the name still reads. The halo lands on 'g' as the cook's next tap (the volume→weight switch is the most common reason a cook reaches for this picker). 'Other' is the escape hatch for free-text long-tail measures (knob, small handful, to taste). The other inline affordances — qty number, name text, title display, notes block, method-step text — work the same way: tap the field, it opens in place. This screen demonstrates the pattern; the others follow.

cup

Inspect at 1×
HEARTH
1 recipe

Summer Corn & Basil Ragù

table.kitchen
VI · Library · one recipe

The emotional payoff. A library of one. Same header, same folio.

Inspect at 1×