02 · Logo

The wordmark

A lowercase pantri in Fraunces, with a round clay seed for the dot of the i. It carries over the orange full stop from the old landing wordmark, and puts it where it belongs.

Primary logo

pantri, with the seed

Primary wordmark. Use this version wherever you can. SVG: pantri-wordmark.svg

Typeface: Fraunces 700, optical size 72, SOFT 100, WONK 0. Converted to outlines, so it never depends on a font being installed.
Tracking: −0.035em, tighter than the font’s default so the word reads as one shape.
The seed: A dotless i with a Clay (#C4501F) circle, 0.19em across, sitting 0.05em above the stem. Slightly larger than the font’s own dot, and perfectly round.
Never retype: Always place the SVG. Typing “pantri” in Fraunces gives the wrong dot, tracking and spacing.

Construction

How it is built

Construction. Lowercase letters sit on the baseline and share one x-height. The seed is the only colour.

Clear space

One x-height on every side

Clear space = x. Keep at least the height of the lowercase x clear on all four sides. Nothing else (text, edges, other logos) enters the shaded area.

Downloadable versions with the clear space built in: on Paper and on Cocoa.

Minimum sizes

Small, but never too small

72px · minimum

96px

140px

200px

280px

Smallest wordmark: 72px wide on screen, 20mm in print. Below that, use the app icon instead.

App header: 26px tall, which is 74px wide. Anything shorter drops below the 72px minimum.
Landing header: 30px tall on phones, 34px on desktop.
Email header: 120px wide.

Light and dark

On every Hearth surface

Paper. Primary. Ink letters, clay seed, on Paper.

Raised. On white rows and sheets.

Sunken. On section bands.

Cocoa. Reversed. Paper letters, clay seed. Footer, dark bands, dark mode.

Clay. Single colour white. Merchandise and the rare clay band only.

Single colour. All Ink, for one-colour print, faxes and engraving.

Use the primary version on Paper, Raised and Sunken, and the reversed version on Cocoa and in dark mode.

Don’t

Put the wordmark on photography, illustration, Saffron or Sage. Photos get the app icon or nothing.

App icon

A paper p on a clay square

App icon. Clay #C4501F square, corner radius 22.37%, Paper “p” in Fraunces 700. No seed, no gradient, no gloss.

On dark home screens the icon stays as it is. The reversed version (clay on Paper) is for social avatars on clay backgrounds only.

180px

120px

64px

48px

32px

16px

Size ladder. 32px and below use the favicon drawing, which has a larger p and smaller corner radius so it holds up at tiny sizes.

iOS: Supply the full-bleed square (pantri-app-icon-square, 1024px). iOS applies its own mask.
Android / PWA: 192px and 512px rounded icons, plus a 512px maskable icon whose p sits inside the 80% safe zone.
Social avatar: The 1024px square. Platforms crop to a circle; the p stays clear.

Favicon

The smallest Pantri

Pantri · Plan this week

Favicon set. favicon.svg for modern browsers, favicon.ico (16, 32, 48) as fallback, apple-touch-icon.png at 180px.

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Misuse

Please don’t

Pantri.

Don’t retype it, capitalise it or add a full stop.

Don’t stretch or squash it.

Don’t set the letters in Clay or Action.

Don’t recolour the seed. It is Clay, or the single logo colour.

Don’t add shadows, glows, outlines or gradients.

Don’t place it on a retailer colour or anything that suggests a partnership.

Don’t rotate it or set it on a path.

Smart AI planner

Don’t lock it up with badges, taglines or banned words.