## Overview
Heritage Americana for a kids' food brand. A sequence of full-bleed posters — red, cream, and maroon — with oversized uppercase headlines, full-bleed photography, and zero glass or neon. Confident, nostalgic, and proudly typographic.
## Colors
- **Primary red** (`#D6001C`): Hero, product carousels, slogan, social, and wordmark canvases.
- **Cream** (`#FEF1DD`): Recipe and footer canvases. Heading color on red/maroon for warmer contrast.
- **Maroon** (`#540B26`): Brand pillar canvases, all CTAs, accent text on cream.
- **White** (`#FFFFFF`): Body and label text on red and maroon.
## Typography
- **Headline Font**: Inter
- **Body Font**: Inter
- **Label Font**: Inter
Inter is the only family. Variation comes from weight extremes (400 / 600 / 700 / 900) and size, never family. Section headings are always UPPER, regular weight (400), and oversized (44–68px) — they read as poster titles. Wordmarks use black weight (900) with `tracking-[-0.02em]`. Body sits at semibold (600) — never light.
## Elevation
No shadows. Depth comes from (1) full-bleed photography filling rounded cards, (2) dark `from-black/95` gradients anchored to the bottom of every photo card, and (3) the contrast between flat cream backgrounds and saturated red/maroon poster moments. The result is a printed catalog, not a screen.
## Components
- **Buttons**: Maroon `#540B26` pills with white bold copy. Hover darkens to `#3d0719`. Circular outline buttons (52px, 2px white border) for "see more" affordances on cards.
- **Photo cards**: `rounded-[24px]`, full-bleed image, dark bottom gradient (40–60% height), bottom row with title + circular button.
- **Inputs**: White background, `rounded-[8px]`, `1px #e5e7eb` border, 13–14px Inter.
- **Navbar**: Absolute, transparent over hero. Inter black uppercase logo + `EST. 2019` pill badge. Bold uppercase 13px nav links with `tracking-[0.14em]`.
- **Section heading**: Inter regular uppercase, 44px → 68px. No subtitle decorations.
## Do's and Don'ts
- Do use red, cream, and maroon as the only background colors — no neutrals, no gradients.
- Do set every photo card to `rounded-[24px]` with a dark bottom gradient.
- Do set body text to `font-semibold` (600).
- Do use circular outline buttons (52px, 2px border) consistently for "see more" affordances.
- Don't introduce a second font family — Inter only.
- Don't use shadows for elevation.
- Don't use mid-grays or pastel tints.
- Don't sentence-case section headings — always UPPER and oversized.
- Don't use partial-radius rounding (`rounded-md`, `rounded-lg`) on cards — minimum is `rounded-[24px]`.