The Sourdough Eatery
The visual language for everything we put in front of a customer — website pages, printed menus, window signage, and social tiles. Every rule below is shown working, not just described.
Industry calibration: a family-run sourdough sandwich eatery borrows F&B's warmth and appetite appeal — warm color temperature, a characterful serif for display type, imagery-forward layouts — tempered by artisanal restraint: motion stays gentle, layouts stay unhurried, and nothing shouts.
Type that feels hand-kneaded
A soft, characterful serif for headlines; a clean workhorse sans for everything customers actually read; a monospace for prices and specs.
Pairing options considered
Type scale
Ratio ≈ 1.25 (major third). H1–H4 in Fraunces 600; H5–H6 switch to Work Sans 600 where the serif would get lost at small sizes.
The sandwich San Jose trusts
Triple-deckers on sourdough and rye — lean meats, no MSG, and a formula the owners have refined for over twenty years.
The Eatery lives in the historic Lenhart building, across from Old City Hall. Out back is a European-style courtyard — brick patio, hanging flowers, waterfalls — with room for two hundred on a sunny afternoon. Inside, Barbara and Michael build every sandwich themselves, the way they have for twenty years: lean meats sliced thin, Swiss cheese, and the famous sourdough spread that made this a lunchtime landmark.
Barbara's original oil paintings hang in the dining room — the Eatery doubles as her gallery.Body text never runs wider than 65 characters. Wide paragraphs read as effort; we sell comfort.
Body sits at 1.7 for an easy, unhurried read. Display type tightens to 1.1–1.3 so headlines hold together as objects.
One spacing step between paragraphs, no first-line indents. Space between thoughts, like a good conversation.
Crust, butter & sage
Everything is warm — even the grays lean toward flour and espresso. One appetite-driven primary, a herbal secondary, and butter reserved for moments of delight.
Brand
#8A4B22Primary — CTAs, links, active states#6F3C1BPrimary hover / pressed#5F6F52Secondary — supporting accents, tags#F2C14EAccent — highlights, badges; always with Espresso text#F4E4D5Soft fills, hover washes#E9ECE3Soft fills behind sage contentNeutrals — flour to espresso
#FBF7F1Page background#F3EAE0Section tint, subtle fills#E5D8C8Borders, dividers#C9B9A5Disabled fills#A08D75Input borders, placeholders (3:1 on Flour)#7A6A57Captions, muted text (4.9:1)#5C4E3ESecondary text#40352ABody text#2A211AHigh-emphasis text#1C1610Headings, dark surfacesSemantic
#3E7A4EOrder confirmed, in stock#EEB652Low stock, closing soon — Espresso text only#B3402FFailed payment, sold out#3A6EA5Holiday hours, pickup notesContrast — WCAG AA
| Espresso / Flour | 16.8 ✓ |
| Body n-700 / Flour | 11.2 ✓ |
| Muted n-500 / Flour | 4.9 ✓ |
| White / Crust | 6.8 ✓ |
| White / Sage | 5.4 ✓ |
| Espresso / Butter | 10.7 ✓ |
| White / Error | 5.7 ✓ |
| White / Success | 5.1 ✓ |
Every text-on-background pair above passes WCAG AA (≥ 4.5:1 for body text). Butter and Warning are never used behind white text; n-400 is reserved for borders and placeholder text (3:1 UI minimum).
Room to breathe
A 4px base unit builds a nine-step scale. Generous whitespace is part of the brand — cramped layouts read as fast food.
Breakpoints: 640 (large phones) · 768 (tablet — grids drop to 1–2 columns) · 1024 (sidebar nav appears, 12-col grid active) · 1280 (full section padding). This page eats its own cooking: resize it and watch the sidebar collapse to the chip nav at 1024, and every grid stack at 768.
The counter service
Every interactive piece with all five states side by side. The first column in each row is live — hover, click and tab through it.
Buttons
Default column is live. Radius r-md (10px) · weight 600 · state change in 150ms ease-out.Form elements
Focus ring = 3px Crust Tint halo + Crust border. Error swaps both to the Error pair. n-400 borders clear the 3:1 UI-contrast minimum.As it should appear on the bag.
Crust border + tint halo.
Pickup time must be in the future.
Not available for this order.
Custom chevron, same states as input.
New Seasonal Vegan 3 left Sold out
Cards
Menu cards lift 4px on hover over 250ms — the one moment of play we allow per component. All three are live.Navigation pattern
Espresso bar, Butter underline for the active page, Butter CTA. Same bar works for the site header and the in-store ordering kiosk.Gentle, like proofing dough
Three duration tokens, two easings. Hover a token card to see its timing run. Everything below is real, not described.
Hover and focus feedback — buttons, links, icons. Felt, not seen.
Card lifts, dropdowns, small layout shifts. The default for anything that moves.
Modals, section reveals, page transitions. Big moves get a soft landing.
Button press
scale(0.95) + inset shadow on :active, fast token. Confirms the tap.Card hover lift
translateY(−6px) + shadow-lg, base token. Signals "pick me up."Hover me — best seller
Modal enter / exit
Backdrop fades while the panel scales from 0.94 and rises 12px, slow token.Scroll reveal
Sections fade + rise 24px when 15% visible, slow token, once only. Every block on this page uses it — you've been watching this demo the whole way down.click me
"Motion confirms an action or guides attention — it never delays the user."
Drawn with a warm hand
Line icons with rounded joints — closer to a chalkboard sketch than a tech pictogram. Photography does the appetite work; icons just point the way.
Image treatment
Natural light, warm white balance (+5 warmth max), no heavy filters. Radius r-lg (16px). Text over photos always sits on the Espresso 35% bottom gradient shown below.
How we talk
Like the owner chatting across the counter — never like a brand addressing a market. Four words to check every sentence against.