Brand book
09 · Landing page

One page, one action

pantri.app has a single job: get someone from a Facebook link to “Plan this week, free” with enough proof to trust it. These are the patterns, in order down the page.

Principles

What the landing page must do

  1. Show the product, not motion. The proof is the priced list, built from the app’s own rows.
  2. One call to action: “Plan this week, free”, the same words in every place.
  3. Nothing covers content. No dark sticky slab, no full-screen cookie wall.
  4. Paper all the way down. No dark scroll scenes, gradients or glows. Cocoa is for the footer and the cookie banner.
  5. Sentence case and the copy rulebook, exactly as in the app.

Open the full landing page template

Hero

Headline, one line of proof, one button

9:41
Example
Sign in
Free · for Australian households

Use what you’ve got. Spend less, waste less.

Pantri plans the week’s dinners around what’s already in your kitchen, then writes the list for what’s missing, priced at Coles, Woolworths and ALDI.

Plan this week, freeSee how it works
Essential cookies, plus analytics if you say OK.
Header
Wordmark (30px tall) and “Sign in”. No menu of buttons.
Eyebrow
12px caps, Ink 2. Say “Free” once above the fold, here.
Headline
Fraunces 600, 40–56px, with one italic Clay phrase.
Subhead
Inter 16–18, Ink 2, under 30 words. Names all three shops.
Button
Full width on phones, “Plan this week, free”. One text link under it: “See how it works”.
Art
Two or three kit illustrations on a shared baseline, or the list phone. Never a sticker wall.
Motion
A single 400ms fade on load. Nothing else.
Call to action

“Plan this week, free”

Before: six names for one action

  • Plan My First Week
  • Sort My Kitchen
  • Plan My First Week Free
  • Create My Free Account
  • Sort Dinner Tonight
  • Send Me the Guide

Now

Plan this week, free

On the landing page, in emails and in ads. In the app the same button reads Plan this week. “Login” becomes Sign in.

Sticky bar

Sticky barExample
Plan this week, free
  • Appears only once the hero button has scrolled out of view.
  • Hides while any other call to action is on screen.
  • 64px, light: Raised with a Hairline on top. Never a dark slab, never over the footer or a form’s submit button.
Product proof

Rows, not scroll scenes

Proof section, built from rowsExample data
This week, priced
Seven dinners for four, from one pantry
Dinners · about $3.85 a serve
Mon · Chickpea and pumpkin curryUses the chickpeas and half pumpkin you have$2.90a serve
Tue · Lemon chicken traybake35 min · 4 serves$4.60a serve
Wed · Spaghetti bolognese40 min · 4 serves$3.40a serve
The list · 41 items
Colesfor 38 of your 41 items$151.40
Woolworthsfor 37 of your 41 items$154.75
ALDIfor 31 of your 41 items$119.85

Each total covers different items. Prices checked Wed 30 Sep.

Replace the old “pain points” scene with one static section built from real components: dinners with their price per serve, then the list with its three totals and coverage.

Art-direct the mock data and label it. Before publishing, check every capture for: AI, est., cheapest, $0.00 and 9+.

A single big number

$2,100

Sits on Paper, Fraunces in Clay, with its source underneath in Ink 3.

Needs a sourceThe $2,100 a year food-waste figure is on today’s landing page. It needs a cited source (and year) before it goes on the new one.
How it works

Three steps on hairlines

  1. Tell us who you cook for
    People, allergies and the shops you use.
  2. Plan this week’s dinners
    Seven dinners, built around what you’ve got.
  3. Take the list to the shop
    Priced at Coles, Woolworths and ALDI.

Numbers in Fraunces Clay. No glows behind them, no cards around them.