---
version: alpha
name: Impossible Foods
description: A wine-dark room where the word MEAT is shouted in red at billboard scale.
colors:
  on-surface: "#FFFFFF"
  surface: "#4F0423"
  outline: "#FFC7C6"
  primary: "#E10600"
  plum-black: "#260212"
  mauve: "#8F6174"
  ink-black: "#000000"
  card-bone: "#F5F0F0"
  image-ground: "#F5F5F5"
  locator-line: "#DBDBDB"
  locator-panel-line: "#E9E9EE"
  modal-line: "#B4B4B4"
  hairline-grey: "#808080"
  widget-blue: "#2CBAE6"
  modal-navy: "#252D6C"
  scrim: "rgba(0, 0, 0, 0.35)"
  warm-bone: "#E5E3DF"
typography:
  caption-badge-number:
    fontFamily: sans-meat
    fontSize: 12.4444px
    fontWeight: 400
    lineHeight: 11.2px
    letterSpacing: 0.746667px
  small-meta:
    fontFamily: sans-meat
    fontSize: 14.8889px
    fontWeight: 400
    lineHeight: 20.8444px
    letterSpacing: 0em
  body:
    fontFamily: sans-meat
    fontSize: 18.8889px
    fontWeight: 400
    lineHeight: 26.4444px
    letterSpacing: 0em
  ribbon-eyebrow:
    fontFamily: sans-meat
    fontSize: 22.6667px
    fontWeight: 400
    lineHeight: 38.5333px
    letterSpacing: 0em
  body-large:
    fontFamily: sans-meat
    fontSize: 22.8889px
    fontWeight: 400
    lineHeight: 32.0444px
    letterSpacing: 0em
  nav-label:
    fontFamily: sans-meat
    fontSize: 20.8889px
    fontWeight: 400
    lineHeight: 18.8px
    letterSpacing: 0.417778px
  button:
    fontFamily: sans-meat
    fontSize: 24.8889px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0.746667px
  tagline:
    fontFamily: sans-meat
    fontSize: 28.8889px
    fontWeight: 400
    lineHeight: 31.7778px
    letterSpacing: 0em
  card-heading:
    fontFamily: sans-meat
    fontSize: 36.4444px
    fontWeight: 400
    lineHeight: 51.0222px
    letterSpacing: 0em
  heading:
    fontFamily: sans-meat
    fontSize: 43.5556px
    fontWeight: 400
    lineHeight: 39.2px
    letterSpacing: 0em
  section-heading:
    fontFamily: sans-meat
    fontSize: 51.5556px
    fontWeight: 400
    lineHeight: 46.4px
    letterSpacing: 0em
  display:
    fontFamily: sans-meat
    fontSize: 217px
    fontWeight: 400
    lineHeight: 158.41px
    letterSpacing: 0em
rounded:
  control-pill-button-nav-category-link: 15px
  tag-pill: 5px
  carousel-pagination-dot: 12px
  newsletter-submit: 16.8889px
  card-email-field: 41.5556px
  card-visual-holder: 41.5556px
  locator-field-wrapper: 5px
  locator-search-button-expand-chip: 25px
  locator-modal: 8px
  map-control: 2px
  product-card-footer-masked-panel-image: 0px
spacing:
  pill-row: 4px
  control-inner: 6px
  cluster: 8px
  badge-cluster: 10.8889px
  nav-list: 15px
  card-actions-socials: 16px
  spec-tags: 20px
  hero-stack: 32px
  section-block: 80px
  banner-block: 88px
  stacked-text-hero: 110px
  footer-block: 133.333px
  extra-large-block: 160px
  parallax-block: 288px
---
# Impossible Foods — Style Reference

> A wine-dark room where the word MEAT is shouted in red at billboard scale.

**Theme:** dark

Two systems share this domain. The brand pages — home, the recipes index, the steak-bites product page — sit on one deep wine ground and hand almost everything to a single condensed grotesque; the store locator is a bought-in widget on near-white, set in Poppins with grey hairlines, drop shadows and Google's own map chrome, and the split arrives the moment you ask where to buy. On the brand side the palette is a wine canvas, an Impossible Red that takes the display type and the submit button, and a blush pink that carries every quiet label — no fourth voice. Type is the layout rather than a layer on top of it: display words run past 300px at line-heights near three-quarters of their size, so letters crop against the viewport and photography is punched through them. Everything below display is small, bold, uppercase and tracked open, which makes the giant words feel bigger by contrast. Corners are deliberately unequal — tight on controls, tiny on tags, generous on cards — and depth is a step in luminance, never a shadow.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Wine Canvas | `#4F0423` | `--color-canvas` | The ground the brand pages sit on, and the ink that flips onto light panels — recipe card headings and the "Locator" display word both take it. Never a button fill. |
| Impossible Red | `#E10600` | `--color-red` | Display headlines, the ribbon eyebrow, the newsletter submit fill. The loudest thing in any composition; if two things are red, one of them is wrong. |
| Blush | `#FFC7C6` | `--color-blush` | The quiet voice: taglines, section labels, social headings, pill borders, the divider rule, the active carousel dot, and the fill of the masked Locator panel. |
| Paper White | `#FFFFFF` | `--color-paper` | Primary ink on wine, the fill of the email field and the recipes panel, and the footer's fill on the locator page. Also the pagination-dot border on the recipes page. |
| Plum Black | `#260212` | `--color-plum` | One luminance step below the canvas: product-card grounds, the footer on the brand pages, and the responsive background shape. The system's only "darker" surface move. |
| Mauve | `#8F6174` | `--color-mauve` | Form labels, required marks, the recipes pill border and label, and the footer's utility links on the locator page. The de-emphasis ink. |
| Ink Black | `#000000` | `--color-ink` | Inherited default on structural wrappers, and the real ink of the newsletter input and the locator's Poppins labels and selects. Never used as a large fill. |
| Card Bone | `#F5F0F0` | `--color-bone` | Recipe card fill and the filter bar's viewport — the warm off-white that keeps the light panel from reading as pure paper. |
| Image Ground | `#F5F5F5` | `--color-image-ground` | The fill behind every transitioning image element while it loads. Structural, never a design surface. |
| Locator Line | `#DBDBDB` | `--color-locator-line` | 1px border on the widget's zip, category and product fields. Belongs to the locator system only. |
| Locator Panel Line | `#E9E9EE` | `--color-locator-panel-line` | Border and fill of the widget's UI container and form header. Locator system only. |
| Modal Line | `#B4B4B4` | `--color-modal-line` | 1px border on the store-search modal and its change-location block. Locator system only. |
| Hairline Grey | `#808080` | `--color-hairline` | The colour on the featured-recipes rule element. Marks a seam, never a box. |
| Widget Blue | `#2CBAE6` | `--color-widget-blue` | The bought-in "Change Location" link and its map-marker glyph. Not a brand ink — treat as foreign. |
| Modal Navy | `#252D6C` | `--color-modal-navy` | The store-search modal's header text. Locator system only. |
| Scrim | `rgba(0, 0, 0, 0.35)` | `--color-scrim` | The overlay behind the store-search modal. The only translucent paint the census measures. |
| Warm Bone | `#E5E3DF` | `--color-warm-bone` | A single filled block on the locator page. Included for completeness, not for reuse. |

## Tokens — Typography

### sans-meat — the whole brand voice: a heavy display cut whose width flexes from wide to extremely narrow, plus a normal-width regular for everything you actually read · `--font-sans-meat`
- **Substitute:** Anton or Oswald for the narrow display setting, Archivo Black for the wide one; Archivo or Inter for the text cut
- **Weights:** 400, 500, 700, 800
- **Sizes:** 12.4444px, 14.8889px, 18.8889px, 20.8889px, 22.6667px, 22.8889px, 24.8889px, 28.8889px, 36.4444px, 43.5556px, 51.5556px, 217px, 229px, 247px, 273px, 277px, 281px, 295px, 323px
- **Line height:** 158.41–242.25px on display (roughly 0.73–0.75×), 39.2px at 43.5556px and 46.4px at 51.5556px (0.90×), 31.7778px at 28.8889px (1.10×), 26.4444px at 18.8889px and 20.8444px at 14.8889px (1.40×), 38.5333px at 22.6667px (1.70×)
- **Letter spacing:** normal everywhere except the bold UI sizes — 0.417778px at 20.8889px/700, 0.746667px at 24.8889px/700 and 12.4444px/700
- **Role:** One family doing two jobs. The 700 weight lands on uppercase almost everywhere it appears — display spans and small tracked labels alike — while 400 and 500 carry headings, card titles, taglines and body. Width is the family's third axis: the same 700 sets "STEAK (FROM PLANTS)" wide and the footer wordmark razor-narrow.

### SC-Poppins — the store locator's own face, on its own pages · `--font-sc-poppins`
- **Substitute:** Poppins, Nunito Sans, Montserrat
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 15px
- **Line height:** 13.8px at 12px, 17.25px at 15px (1.15×)
- **Letter spacing:** normal
- **Role:** Field labels ("Channel") at 700 and select values ("AnyGroceryRestaurant") at 400 inside the locator widget. It never touches a brand page.

### Roboto — present in the map embed's chrome · `--font-roboto`
- **Substitute:** Inter, Helvetica Neue, system-ui
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** The census names the family but measures no text row for it; the only non-brand lettering visible in the tiles is the Google map's place labels.

### FontAwesome — icon glyphs inside the bought-in widgets · `--font-fontawesome`
- **Substitute:** Material Symbols, Lucide, Phosphor
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** Paints the map-marker glyph on the "Change Location" control in `#2CBAE6`. Icon duty only.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / badge number | 12.4444px | 11.2px | 0.746667px | `--text-caption` |
| Small / meta | 14.8889px | 20.8444px | normal | `--text-sm` |
| Body | 18.8889px | 26.4444px | normal | `--text-body` |
| Ribbon eyebrow | 22.6667px | 38.5333px | normal | `--text-eyebrow` |
| Body large | 22.8889px | 32.0444px | normal | `--text-body-lg` |
| Nav / label | 20.8889px | 18.8px | 0.417778px | `--text-label` |
| Button | 24.8889px | 22.4px | 0.746667px | `--text-button` |
| Tagline | 28.8889px | 31.7778px | normal | `--text-tagline` |
| Card heading | 36.4444px | 51.0222px | normal | `--text-card` |
| Heading | 43.5556px | 39.2px | normal | `--text-heading` |
| Section heading | 51.5556px | 46.4px | normal | `--text-subhead` |
| Display | 217px–323px | 158.41px–242.25px | normal | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Pill row | 4px | `--spacing-1` |
| Control inner | 6px | `--spacing-2` |
| Cluster | 8px | `--spacing-3` |
| Badge cluster | 10.8889px | `--spacing-badge` |
| Nav list | 15px | `--spacing-4` |
| Card actions / socials | 16px | `--spacing-5` |
| Spec tags | 20px | `--spacing-6` |
| Hero stack | 32px | `--spacing-7` |
| Section block | 80px | `--spacing-section` |
| Banner block | 88px | `--spacing-banner` |
| Stacked-text hero | 110px | `--spacing-hero` |
| Footer block | 133.333px | `--spacing-footer` |
| Extra-large block | 160px | `--spacing-xl` |
| Parallax block | 288px | `--spacing-parallax` |

### Border Radius

| Element | Value |
|---------|-------|
| Control — pill button, nav category link | 15px |
| Tag / pill | 5px |
| Carousel pagination dot | 12px |
| Newsletter submit | 16.8889px |
| Card, email field | 41.5556px |
| Card visual holder | 41.5556px 41.5556px 0px 0px |
| Locator field wrapper | 5px |
| Locator search button, expand chip | 25px |
| Locator modal | 8px |
| Map control | 2px, 50% |
| Product card, footer, masked panel, image | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Recipe list glow | `rgb(0, 0, 0) 0px 0px 20px 1px, rgb(0, 0, 0) 0px 0px 7px 0px inset` | `--shadow-list` |
| Map control | `rgba(0, 0, 0, 0.3) 0px 1px 4px -1px` | `--shadow-map-control` |
| Store modal | `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px` | `--shadow-modal` |

### Layout
- **Page max-width:** `not measured`
- **Section gap:** 80px is the default vertical block padding across the site, with 88px on featured banners, 110px on stacked-text heroes, 160px on facts-and-figures and rich-text blocks, and 288px on the parallax text-and-media block. The footer runs 133.333px.
- **Card padding:** 40px on the slide card, 16px on the filter bar, 5px on locator field wrappers, 0px on the product card
- **Element gap:** 6px inside controls, 8px in clusters, 16px in card action rows

## Components

### Header Bar
**Role:** The fixed red rail that follows you down every page, carrying products, mission, nutrition, recipes and the two right-hand actions.

Built from `.C100Header_wrapper__ENV9s`, whose gap reads `normal 0px` — the bar's own fill is `not measured`, and by eye it is the Impossible Red the submit button paints. The category list `.C100Header_categoriesContainer__YOYtG` spaces items 15px apart; the right-hand actions in `.C100Header_buttonsContainer__2kTex` cluster at 8px. Nav links use `.ClickableElement_clickableElement__pphqH.C100Header_categoryButt` — no fill, no border, 10px 20px padding, 15px radius — so the pill shape surfaces only on the outlined actions. Labels sit at 20.8889px/700 with 0.417778px tracking in `#FFFFFF`.

### Pill Button
**Role:** The universal call to action — learn more, find near me, view recipe, get directions.

Two measured variants of `.ClickableElement_clickableElement__pphqH.ClickableElement_hasEnd`, both radius 15px, both `border none`, both `shadow none`: the wide one at 10px 20px padding, the narrow one at 10px 14px. Its link twin `.ClickableElement_clickableElement__pphqH.ClickableElement_isRect` also takes 10px 14px. The class itself paints `fill none` — the red field visible in the tiles comes from a layer below the census's reach, so treat the fill as `not measured` and inherit it from the surface you place it on. A 6px gap holds the label to its end glyph.

### Newsletter Subscribe
**Role:** The one form the brand pages ask you to fill in, sitting at the base of every page above the footer.

The field wrapper `.hs_email.hs-email.hs-fieldtype-text.field` is a white capsule: fill `#FFFFFF`, padding 0px 24px, radius 41.5556px, `border none`, `shadow none`. Inside it `.hs-input` paints fill `#FFFFFF`, ink `#000000`, 18.8889px/400/21.7222px, radius 0px — the capsule carries the shape, the input carries none. Submit is `.hs-button.primary.large`: fill `#E10600`, ink `#FFFFFF`, 20.8889px/700/18.8px with 0.417778px tracking, padding 1px 14px, radius 16.8889px. Consent copy runs 14.8889px/400/20.8444px.

### Product Card
**Role:** One pack shot on the product carousel — beef, sausage, chicken — with its name and a pair of actions.

`.ProductCard_productBackground__lZjFb` is a `#260212` field with radius 0px, padding 0px, `border none`, `shadow none`. The tiles show that field masked into a soft pillow silhouette, so the zero radius is not the shape you see — the mask is. The title `.Typography_typography__OE81f.ProductCard_productTitle__iAB_w` sets at 43.5556px/400/39.2px in `#FFFFFF`, tight enough that three-line names stack as a block. Actions sit in `.ProductCard_ctaWrapper__M_cRU` at a 16px gap, pairing a filled pill with a plain link.

### Recipe Card
**Role:** A recipe in the results grid — image, diet tag, title, and a way in.

`.SimpleCard_o2SimpleCard__GVmKt.Results_result__g1LHC` fills `#F5F0F0` at radius 41.5556px, padding 0px, `border none`, `shadow none`. Its image well `.SimpleCard_visualHolder__8WzAS` takes `41.5556px 41.5556px 0px 0px`, so the photograph is round-shouldered at the top and square where it meets the copy. The heading `.Typography_typography__OE81f.SimpleCard_heading__jpgrl` runs 36.4444px/400/51.0222px in `#4F0423` — the canvas colour used as ink, which is what ties the light panel back to the dark pages.

### Tag Pill
**Role:** The one-word classifier above a recipe title — heart-healthy, grilling, comfort food.

`.M21Pill_m21Pill__ZJOeL.SimpleCard_pill__F_L5V` is an outline chip: `fill none`, padding 1px 7.44444px, radius 5px, `1px #8F6174` border, `shadow none`. On the product page the same base class `.M21Pill_m21Pill__ZJOeL` swaps to a `1px #FFC7C6` border for the dark ground, at identical padding and radius. Its label `.Typography_typography__OE81f.M21Pill_label__y5Y_h` is 12.4444px/700/11.2px with 0.746667px tracking in `#8F6174`. The 5px radius is the tightest corner in the system — a tag should read as a stamp, not a button.

### Number Badge Tab
**Role:** The category switcher above the product carousel, each label wearing a count.

`.A101NumberBadge_a101NumberBadge__EfyIi` holds label and badge at a 10.8889px gap, with an active variant `.A101NumberBadge_isActive_` at the same spacing. The label `.Typography_typography__OE81f.A101NumberBadge_label__a0ek8` sets 51.5556px/500/46.4px — `#FFFFFF` when active, `#FFC7C6` when not, which is the whole selected state: no underline token, no fill, just ink. The number `.Typography_typography__OE81f.A101NumberBadge_number__URt9X` is 12.4444px/700/11.2px at 0.746667px tracking in `#FFC7C6`, seated on `.A101NumberBadge_numberShape__d5OJ0` in `#4F0423`.

### Carousel Pagination
**Role:** The dot rail under a carousel, and the arrows that move it.

`.O5Carousel_paginationButton__I35GO` is a 12px-radius button with `fill none` and a 1px border — `#FFFFFF` on the recipes page, `#FFC7C6` on the home page, matched to whichever ink that section is already using. The active state `.O5Carousel_paginationButton__I35GO.O5Carousel_isActive__WP2VN` simply fills with its own border colour: `#FFC7C6` on `#FFC7C6`, or `#FFFFFF` on `#FFFFFF`. Zero padding, `shadow none`. The state change is fill-in, never grow — the dot's footprint never moves.

### Ribbon Eyebrow
**Role:** The tiny red kicker that sets up a display word — "It's Giving", "Flex On Everyone At", "Our".

`.A106Ribbon_a106Ribbon__b8xBS.M101DynamicTextStack_ribbon__6_q0_` lays its parts out at an 8px gap, flanked by the small icon marks visible in the tiles. Its heading `.A106Ribbon_heading__rNmjv` is 22.6667px/700/38.5333px in `#E10600` — a 1.70× line height, the loosest in the system, which floats the kicker well clear of the giant word below it. It is the smallest red text the census measures, and it works because the display word beneath it is fifteen times its size.

### Masked Shape Panel
**Role:** The torn-edge slab that introduces a section — the blush Locator card, the white recipes panel, the plum bands.

`.A100MaskedElement_maskWrapper__ZIFpK` paints `#FFC7C6` on the home and product pages and `#260212` on the recipes page; the wider `.A100MaskedElement_a100MaskedElement__DbJH6.C113HighlightedCarous` paints `#FFC7C6`. Every variant reads radius 0px, `border none`, `shadow none` — the ragged wave you see across the top of these panels is a mask, not a corner value. `.A107ResponsiveBackgroundShape_wrapper__QsQpF` does the same trick in `#260212` and `#FFFFFF`. Use masks, not radii, for section transitions.

### Footer
**Role:** The link floor — four columns, social row, locale, legal, and the wordmark that fills the last screen.

`.C111Footer_c111Footer__iaaHr` runs 133.333px of vertical padding, radius 0px, `border none`, `shadow none`, filling `#260212` on the home, recipes and product pages and `#FFFFFF` on the locator page — the same component, re-grounded for whichever system it lands in. Socials sit in `.O115Socials_socialsList__BpTLV` at a 16px gap under `.O115Socials_socialTitle__X0eOT` at 14.8889px/400/20.8444px in `#FFC7C6`. Column links use the 20.8889px/700 label size, `#FFC7C6` on plum and `#8F6174` on white.

### Store Locator Panel
**Role:** The bought-in find-a-store experience — filters on the left, live map on the right, modal when a search comes back empty.

Field wrappers `.sc-pl-product-selector-form__zip-input-wrapper` and `.sc-pl-product-selector-form__selector-wrapper` are white boxes at 5px 5px padding, 5px radius, `1px #DBDBDB` border, `shadow none`; the select inside, `.sc-pl-product-selector-form__selector-field`, is 15px/400/17.25px ink `#000000` with radius 0px. Search runs on a `#E10600` fill with a `1px #E10600` border, 10px 24px padding, 25px radius. The empty-state modal `.sc-pl-search-store-modal__content` is the only brand surface with a lift: 8px radius, `1px #B4B4B4`, `rgba(0, 0, 0, 0.25) 0px 4px 4px 0px`, over an `rgba(0, 0, 0, 0.35)` scrim.

## Do's and Don'ts

### Do
- Set display words at 217px–323px with line heights of 158.41px–242.25px. Every span the heading census measures above 200px sits in that band, which is why the words crop and collide instead of sitting politely in a column.
- Keep small type bold, uppercase and tracked: 20.8889px/700 at 0.417778px for labels and 24.8889px/700 at 0.746667px for buttons are the two most-counted text rows on the site.
- Use `#FFC7C6` when a line is supporting — taglines, social headings, counts, pill borders — and `#E10600` when it is the point.
- Reach for 41.5556px when a box holds content (`.SimpleCard_o2SimpleCard__GVmKt.Results_result__g1LHC`, `.hs_email.hs-email.hs-fieldtype-text.field`) and 15px when it is a control (`.ClickableElement_clickableElement__pphqH.ClickableElement_hasEnd`).
- Let food photography sit as an edge-cropped cut-out: `.A3Image_a3Image__lRSr_.A3Image_enableTransitionIn__W9HWh.A3Image` reads radius 0px, `border none`, `shadow none`.

### Don't
- Don't add a shadow to a brand-page surface. `.ProductCard_productBackground__lZjFb`, `.C111Footer_c111Footer__iaaHr`, `.SimpleCard_o2SimpleCard__GVmKt.Results_result__g1LHC`, `.SlideCard_slideCard__xSx8N`, `.hs_email.hs-email.hs-fieldtype-text.field` and `.A100MaskedElement_maskWrapper__ZIFpK` all read `shadow none`; the one shadow those pages paint sits on five list items in the recipes carousel.
- Don't set body copy in `#E10600`. The smallest red text the census measures is 22.6667px/700 on `.A106Ribbon_heading__rNmjv` — below that size the red stops being a shout and starts being an error state.
- Don't let the locator's grey kit leak onto a brand page. `#DBDBDB` is carried by `.sc-pl-product-selector-form__zip-input-wrapper` and `.sc-pl-product-filter-selector__wrapper`, `#E9E9EE` by `.sc-pl-product-selector-form__header`, `#B4B4B4` by `.sc-pl-search-store-modal__content` — all locator classes — and SC-Poppins's measured rows are its own "Channel" label and "AnyGroceryRestaurant" select.
- Don't put a second accent hue next to the red. The saturated inks outside it are `#2CBAE6` on the widget's "Change Location" link and `#252D6C` on its modal header — both third-party, neither brand.
- Don't soften the display cut by dropping to 400. The heading census measures every span above 200px at weight 700; 400 belongs to headings at 43.5556px and below.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#4F0423` | The wine ground the brand pages sit on |
| 1 | Plum | `#260212` | Product-card fields, footer, background shapes — one step down, not up |
| 2 | Blush Panel | `#FFC7C6` | Masked slabs that invert the page: dark ink on light |
| 3 | Paper | `#FFFFFF` | The recipes panel, the email capsule, the locator page's footer |
| 4 | Card Bone | `#F5F0F0` | Recipe cards and the filter bar, warmer than paper so cards read on white |

## Elevation

There is no elevation model on the brand pages — depth is a luminance step and a mask edge. `.ProductCard_productBackground__lZjFb`, `.C111Footer_c111Footer__iaaHr`, `.A100MaskedElement_maskWrapper__ZIFpK` and `.SimpleCard_o2SimpleCard__GVmKt.Results_result__g1LHC` all read `shadow none`, and the plum `#260212` sits below the wine canvas in lightness, so a raised card gets darker, not brighter. The masked wave along each panel does the separating a shadow would normally do. Box-shadows appear where the site borrows someone else's UI: the map controls and the store-search modal on the locator page, plus a black glow-and-inset on five list items in the recipes carousel.

## Imagery

Food photography is the second typeface. Every shot is a cut-out with a hand-torn or scalloped edge — plates, skillets, hands holding a burger — floating on the wine ground at radius 0px with no shadow, so nothing looks framed. Images sit behind and in front of the display word in the same composition: the steak-bites plate crops the "STEAK (FROM PLANTS)" headline, the burger hands rise through the footer wordmark. Product packs get the plum pillow field instead of a rectangle. Two other modes appear: flat vector doodles of burgers, cutlery and animal-free seals, tone-on-tone in `#260212` on the recipes hero, and a chunky illustration on the mission block. `.A3Image_a3Image__lRSr_.A3Image_enableTransitionIn__W9HWh.A3Image` fills `#F5F5F5` while it loads.

## Layout

Full-bleed by default. The red header rail spans the viewport with rounded ends and stays fixed; below it content centres in a single column while images escape into both margins. Section rhythm is 80px of block padding as the base, stretching to 110px for a stacked-text hero, 160px for facts-and-figures and rich-text, and 288px for the parallax text-and-media block; the footer takes 133.333px. A masked wave cuts most section transitions rather than a rule or a gap. The recipes page inverts mid-scroll into a white panel holding a filter bar (`.FilterPanel_groupBarViewport__y_622`, `#F5F0F0`, 16px padding, radius 0px) and a three-up card grid. The featured-recipes rule `.A6Divider_a6Divider__nILKx.C103FeaturedRecipes_divider__dvPYT` carries `#FFC7C6` and splits around a centred pill.

## Typography Voice

The system runs two typographic modes from one family, and the line-height ladder is where you can see the seam. Display sits at 0.73–0.75× — 323px over 242.25px, 295px over 215.35px, 217px over 158.41px — which is below the cap height, so uppercase words in adjacent lines interlock. Headings and labels sit at exactly 0.90× (43.5556px/39.2px, 51.5556px/46.4px, 20.8889px/18.8px), tight enough to feel engineered. Body opens to 1.40× (18.8889px/26.4444px, 14.8889px/20.8444px), and the ribbon eyebrow goes all the way to 1.70×. Tracking follows weight, not size: it appears only on the 700 UI rows, at 0.417778px and 0.746667px. So the brand's hierarchy is built from three levers — width, weight and leading — with size doing the shouting and colour doing almost nothing.

## Agent Prompt Guide

## Quick Color Reference
- background: `#4F0423`
- text: `#FFFFFF`
- surface: `#260212`
- border: `#FFC7C6`
- accent: `#E10600`
- primary action: `#E10600`

## Example Component Prompts
1. **Display Hero**: On a `#4F0423` canvas, stack a `#E10600` eyebrow at 22.6667px/700 with 38.5333px line height above a display word at 295px/700 with 215.35px line height in `#E10600`, centred, uppercase, condensed. Overlap a cut-out food photograph across the word's midline with radius 0px and no shadow. Below, a 32px-gap row of two pill buttons at 10px 20px padding, radius 15px, 24.8889px/700 labels at 0.746667px tracking in `#FFFFFF`.
2. **Recipe Card**: A `#F5F0F0` card at radius 41.5556px, zero padding, no border, no shadow. Image well on top at radius `41.5556px 41.5556px 0px 0px`. Under it an outline tag at padding 1px 7.44444px, radius 5px, `1px #8F6174` border, label 12.4444px/700/11.2px at 0.746667px tracking in `#8F6174`. Title 36.4444px/400/51.0222px in `#4F0423`. A `#E10600` pill CTA at radius 15px.
3. **Product Carousel Item**: A `#260212` field at radius 0px masked into a soft pillow silhouette, pack shot centred. Title below at 43.5556px/400/39.2px in `#FFFFFF`. An action row at a 16px gap: filled pill plus plain link, both 24.8889px/700 at 0.746667px tracking.
4. **Newsletter Block**: On `#F5F0F0`, a heading at 51.5556px/500/46.4px in `#000000`, then a `#FFFFFF` capsule at radius 41.5556px with 0px 24px padding, containing an 18.8889px/400/21.7222px `#000000` input and an `#E10600` submit at radius 16.8889px, padding 1px 14px, label 20.8889px/700/18.8px at 0.417778px tracking in `#FFFFFF`. Consent copy at 14.8889px/400/20.8444px.
5. **Category Tab Row**: A centred row at a 32px gap. Each tab pairs a label at 51.5556px/500/46.4px — `#FFFFFF` when active, `#FFC7C6` when not — with a superscript count at 12.4444px/700/11.2px, 0.746667px tracking, `#FFC7C6` on a `#4F0423` shape, held at a 10.8889px gap. No fills, no underlines: ink alone carries the state.

## Similar Brands
- **Liquid Death** — the same conviction that a wordmark at maximum scale on one saturated ground is the entire identity, with product photography cut out and dropped in.
- **Omsom** — a single loud hue plus a supporting pastel, condensed uppercase display, and packaging shot as graphic object rather than still life.
- **Magic Spoon** — candy-bright grounds, oversized rounded display type, and cards with generous single-radius corners in a warm off-white.
- **Fishwife** — food photography treated as illustration, tone-on-tone doodle motifs, and a palette that commits to two saturated notes and refuses a third.
- **Oatly** — copy that talks at you in the same sizes it shouts at you, with the typography carrying the humour instead of the imagery.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #4F0423;
  --color-red: #E10600;
  --color-blush: #FFC7C6;
  --color-paper: #FFFFFF;
  --color-plum: #260212;
  --color-mauve: #8F6174;
  --color-ink: #000000;
  --color-bone: #F5F0F0;
  --color-image-ground: #F5F5F5;
  --color-locator-line: #DBDBDB;
  --color-locator-panel-line: #E9E9EE;
  --color-modal-line: #B4B4B4;
  --color-hairline: #808080;
  --color-widget-blue: #2CBAE6;
  --color-modal-navy: #252D6C;
  --color-utility-ink: #393E41;
  --color-warm-bone: #E5E3DF;
  --color-scrim: rgba(0, 0, 0, 0.35);

  /* Typography — Families */
  --font-sans-meat: 'sans-meat', 'Anton', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-sc-poppins: 'SC-Poppins', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-fontawesome: 'FontAwesome', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 12.4444px;   --leading-caption: 11.2px;
  --text-sm: 14.8889px;        --leading-sm: 20.8444px;
  --text-body: 18.8889px;      --leading-body: 26.4444px;
  --text-label: 20.8889px;     --leading-label: 18.8px;
  --text-eyebrow: 22.6667px;   --leading-eyebrow: 38.5333px;
  --text-body-lg: 22.8889px;   --leading-body-lg: 32.0444px;
  --text-button: 24.8889px;    --leading-button: 22.4px;
  --text-tagline: 28.8889px;   --leading-tagline: 31.7778px;
  --text-card: 36.4444px;      --leading-card: 51.0222px;
  --text-heading: 43.5556px;   --leading-heading: 39.2px;
  --text-subhead: 51.5556px;   --leading-subhead: 46.4px;
  --text-display: 323px;       --leading-display: 242.25px;
  --tracking-label: 0.417778px;
  --tracking-button: 0.746667px;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 6px;
  --spacing-3: 8px;
  --spacing-badge: 10.8889px;
  --spacing-4: 15px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 32px;
  --spacing-section: 80px;
  --spacing-banner: 88px;
  --spacing-hero: 110px;
  --spacing-footer: 133.333px;
  --spacing-xl: 160px;
  --spacing-parallax: 288px;

  /* Border Radius */
  --radius-tag: 5px;
  --radius-dot: 12px;
  --radius-control: 15px;
  --radius-submit: 16.8889px;
  --radius-locator-btn: 25px;
  --radius-card: 41.5556px;
  --radius-card-top: 41.5556px 41.5556px 0px 0px;
  --radius-modal: 8px;
  --radius-map-control: 2px;
  --radius-none: 0px;

  /* Shadows */
  --shadow-list: rgb(0, 0, 0) 0px 0px 20px 1px, rgb(0, 0, 0) 0px 0px 7px 0px inset;
  --shadow-map-control: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #4F0423;
  --color-red: #E10600;
  --color-blush: #FFC7C6;
  --color-paper: #FFFFFF;
  --color-plum: #260212;
  --color-mauve: #8F6174;
  --color-ink: #000000;
  --color-bone: #F5F0F0;
  --color-image-ground: #F5F5F5;
  --color-locator-line: #DBDBDB;
  --color-locator-panel-line: #E9E9EE;
  --color-modal-line: #B4B4B4;
  --color-hairline: #808080;
  --color-widget-blue: #2CBAE6;
  --color-modal-navy: #252D6C;
  --color-utility-ink: #393E41;
  --color-warm-bone: #E5E3DF;
  --color-scrim: rgba(0, 0, 0, 0.35);

  --font-sans-meat: 'sans-meat', 'Anton', 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-sc-poppins: 'SC-Poppins', 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --font-fontawesome: 'FontAwesome', ui-sans-serif, system-ui, sans-serif;

  --text-caption: 12.4444px;
  --text-caption--line-height: 11.2px;
  --text-caption--letter-spacing: 0.746667px;
  --text-sm: 14.8889px;
  --text-sm--line-height: 20.8444px;
  --text-body: 18.8889px;
  --text-body--line-height: 26.4444px;
  --text-label: 20.8889px;
  --text-label--line-height: 18.8px;
  --text-label--letter-spacing: 0.417778px;
  --text-eyebrow: 22.6667px;
  --text-eyebrow--line-height: 38.5333px;
  --text-body-lg: 22.8889px;
  --text-body-lg--line-height: 32.0444px;
  --text-button: 24.8889px;
  --text-button--line-height: 22.4px;
  --text-button--letter-spacing: 0.746667px;
  --text-tagline: 28.8889px;
  --text-tagline--line-height: 31.7778px;
  --text-card: 36.4444px;
  --text-card--line-height: 51.0222px;
  --text-heading: 43.5556px;
  --text-heading--line-height: 39.2px;
  --text-subhead: 51.5556px;
  --text-subhead--line-height: 46.4px;
  --text-display: 323px;
  --text-display--line-height: 242.25px;

  --spacing-1: 4px;
  --spacing-2: 6px;
  --spacing-3: 8px;
  --spacing-badge: 10.8889px;
  --spacing-4: 15px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 32px;
  --spacing-section: 80px;
  --spacing-banner: 88px;
  --spacing-hero: 110px;
  --spacing-footer: 133.333px;
  --spacing-xl: 160px;
  --spacing-parallax: 288px;

  --radius-tag: 5px;
  --radius-dot: 12px;
  --radius-control: 15px;
  --radius-submit: 16.8889px;
  --radius-locator-btn: 25px;
  --radius-card: 41.5556px;
  --radius-modal: 8px;
  --radius-map-control: 2px;
  --radius-none: 0px;

  --shadow-list: rgb(0, 0, 0) 0px 0px 20px 1px, rgb(0, 0, 0) 0px 0px 7px 0px inset;
  --shadow-map-control: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  --shadow-modal: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
}
```