Tartine Bakery

Overview

Tartine Bakery is a San Francisco artisan bakery whose digital presence extends its physical craft: naturally leavened bread, morning buns and seasonal pastry, presented with the patience of a slow-proofed loaf. The aesthetic movement is Editorial Monospace Minimalism: a near-white canvas, generous whitespace and a single warm accent let full-bleed bread photography carry the emotion, while a monospaced wordmark gives the site a precise, hand-set quality. The response it evokes is calm anticipation rather than urgency.

The voice is plain, confident and warm, favouring short declarative phrases and uppercase action words such as 'ORDER', 'VIEW ALL' and 'JOIN TARTINE'. Headlines are set in tracked uppercase to read like printed signage, and copy avoids hype. Example sentence: "Every loaf is shaped by hand and baked before the city wakes."

Colors

Primary (#c87e1e) is the toasted-amber of the crust, used for the ORDER button, the primary 'Join Tartine' call to action and active navigation chevrons; it should appear sparingly, at most once per viewport. Text is pure black (#000000) on a white (#ffffff) canvas, with secondary copy in #5a5a5a and headings in #231f20. Surface containers step from #ffffff to #fdfbf8 for the warm promotional banner strip at the top of the page, then to #f5f3f0 for quiet panels.

Secondary (#1a4d8f) is a deep institutional blue reserved for focus and informational links and should not compete with the amber. Tertiary (#cc3366) is a raspberry accent for badges and seasonal highlights such as pie and pastry callouts. Gradients are not used; the hero is a photographic overlay darkened to roughly rgba(0, 0, 0,

Typography

The entire system is set in PitchSans, a grotesque-leaning monospaced-feel sans that makes every word look typed on a press. Display and H1 use 40px at weight 500 with 48px line height and no tracking, keeping large headings calm. Section labels such as 'OUR STORY' use 18px weight 600 with letterSpacing 0.14em in uppercase, which gives editorial spacing. Body copy is 16px weight 400 at 24px line height. Calls to action use 16px weight 600 with letterSpacing 0.03em. Apply text-shadow 0 2px 4px rgba(0,0,0,0.15) only to white hero captions laid over the bread photography.

Layout

The layout is a fixed-width centred container with a maximum width of 1140px on a 12-column grid and a 20px gutter. Content sections stack vertically with generous separation: lg (16px) between tight text elements and xl (20px) to 2xl (24px) between blocks, scaling up for hero breathing room. Whitespace is treated as a material; text columns rarely exceed 60 characters so that the monospaced measure stays readable. The top bar is a full-width 40px strip above a 92px header.

Elevation & Depth

Depth is minimal and comes from light rather than darkness. Cards and product panels use a soft diffuse shadow of 0px 0.3125rem 1.25rem 0px rgba(147, 147, 147, 0.12) at rest, and a larger 0.1875rem 1.125rem 1.5625rem 0px rgba(147, 147, 147, 0.12) for raised modals or the mobile menu. A hairline 0 0 2px #000000 is used only for focus rings and outlined form controls. There is no glassmorphism or blur.

Shapes

The shape language is Soft-Technical: corners are almost square, reflecting the precise crumb of a well-scored loaf. Buttons use a 4px radius (rounded.lg) for a tactile but crisp feel, cards and content panels use 3px (rounded.md), and inputs use 3px (rounded.DEFAULT). Only avatars, status dots and badges use fully rounded 9999px pills. Radii above 6px are avoided because they would soften the editorial character.

Components

Action Elements The primary ORDER and 'Join Tartine' buttons are solid amber (#c87e1e) with #231f20 text, 40px tall, padding 8px 20px, radius 4px and weight 600 type. On hover the fill shifts to #e8b26a over a 200ms ease transition. Secondary buttons such as 'VIEW ALL' are transparent with a 1px solid #000000 border and invert to #f5f3f0 fill on hover.

Containers & Surfaces Cards sit on #ffffff with the soft 0.12-alpha grey shadow and 3px corners. On hover a card lifts to #fdfbf8 and increases shadow spread by 4px over 250ms. Keep internal padding at 20px (xl) so the copy breathes against the photography.

Inputs & Interaction Input fields use a 1px solid rgba(0, 0, 0, 0.15) border, 10px padding, 3px radius and 16px body type. On focus the border switches to the secondary blue

Do's and Don'ts

**Do**

• Do reserve #c87e1e for ORDER and the primary 'Join Tartine' action so the amber reads as the path to purchase.
• Do keep section labels in uppercase with letterSpacing 0.14em to match the printed-signage voice.
• Do let full-bleed bread photography carry the hero, with white captions at 40px weight 500.
• Do keep container width at 1140px and gutters at 20px for consistent editorial columns.

**Don't**

• Don't use gradients or glassmorphism; the brand relies on flat white surfaces and photography.
• Don't apply the blue secondary to primary actions, as it dilutes the amber CTA hierarchy.
• Don't round corners above 6px, which would soften the crisp, bakery-like geometry.
• Don't set body copy below 16px or above 60 characters per line in the monospaced face.