---
title: "Impossible Foods design system"
variant: extended
source: https://impossiblefoods.com/
captured_at: 2026-10-12
theme: dark
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/impossiblefoods-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Impossible Foods · Design System

> Big, bold type meets a deep-burgundy food world.

**Theme:** dark · **Industry:** food-beverage · **Source:** https://impossiblefoods.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Impossible Foods uses a saturated burgundy canvas, vivid red typography, and playful food photography to make its plant-based products feel unmistakable. Oversized condensed headlines and compact navigation give the long homepage a punchy, campaign-like rhythm.

## North star

Build every section around the burgundy canvas, using oversized condensed red display type and appetizing imagery as the primary contrast.

## Overview

The page is anchored by a deep burgundy canvas (#4f0423), carrying almost every content section from the hero through the newsletter. A darker plum surface (#260212) separates the footer and supports selected cards, while white and pale pink (#ffc7c6) keep text, outlines and occasional panels readable. Saturated red (#e10600) provides the sharpest emphasis, especially in the navigation, headline artwork and compact calls to action. Typography is the main visual engine: a custom condensed sans-serif uses uppercase, tightly stacked display headlines, with restrained, readable sentence-case body copy. The hero balances a centered typographic campaign with scattered, irregularly cropped food images. Product packs and recipe photography then anchor browsing sections, while content, FAQ and mission blocks alternate between centered displays and practical text-led layouts. Spacing is compact within controls and cards but generous between major content moments, allowing the single-color canvas to unify a long page without making it feel static.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | High-contrast navigation, headings, links, and body text on burgundy; also used in the footer. |
| Rose Frost | `#ffc7c6` | `--color-rose-frost` | accent | Pale accent for selected text, thin outlines, and the prominent meat-locator panel. |
| Burgundy Stage | `#4f0423` | `--color-burgundy-stage` | brand | Dominant page canvas behind the hero, product and recipe browsing, mission, FAQ, locator, and newsletter. |
| Plum Shadow | `#260212` | `--color-plum-shadow` | surface | Darker footer band and occasional inset card surface, creating depth against the main burgundy canvas. |
| Soft Media | `#f5f5f5` | `--color-soft-media` | neutral | Pale media-area surface; secondary to the brand palette and not a defining page background. |
| Signal Red | `#e10600` | `--color-signal-red` | accent | High-impact campaign headlines, navigation strip, and compact CTA buttons. |

### Semantic aliases

`--color-canvas` → `#4f0423` (Burgundy Stage) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#260212` (Plum Shadow) · `--color-surface-3` → `#f5f5f5` (Soft Media) · `--color-surface-4` → `#ffc7c6` (Rose Frost) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#ffc7c6` (Rose Frost) · `--color-border` → `#ffc7c6` (Rose Frost) · `--color-accent` → `#ffc7c6` (Rose Frost) · `--color-accent-2` → `#e10600` (Signal Red) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#4f0423` | 15.28:1 | AAA |
| `#ffffff` | `#260212` | 19.09:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffc7c6` | `#4f0423` | 10.36:1 | AAA |
| `#ffc7c6` | `#ffffff` | 1.48:1 | fail |
| `#ffc7c6` | `#260212` | 12.94:1 | AAA |
| `#ffc7c6` | `#f5f5f5` | 1.35:1 | fail |
| `#ffc7c6` | `#4f0423` | 10.36:1 | AAA |
| `#ffc7c6` | `#ffffff` | 1.48:1 | fail |
| `#ffc7c6` | `#260212` | 12.94:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| sans-meat | `--font-body` | webfont | 400, 700, 500 | Site-wide display, navigation, body, link, and caption typography. | Oswald |

- **sans-meat:** Condensed, heavy uppercase display headlines; navigation is bold uppercase with subtle tracking, while body copy stays regular and sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.55, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 161px | 700 | 0.73 | 0 | uppercase | sans-meat | Oversized campaign headlines and prominent visual statements. |
| h1 | 154px | 700 | 0.73 | 0 | uppercase | sans-meat | Primary page or campaign title, set in uppercase display type. |
| h2 | 150px | 700 | 0.73 | 0 | uppercase | sans-meat | Major section titles such as product, recipe, and FAQ headings. |
| h3 | 127px | 700 | 0.73 | 0 | uppercase | sans-meat | Secondary display headings and prominent content labels. |
| h4 | 48px | 500 | 0.9 | 0 | uppercase | sans-meat | Smaller uppercase feature and card headings. |
| body | 18px | 400 | 1.4 | 0 | — | sans-meat | Paragraphs, product descriptions, and explanatory copy. |
| caption | 14px | 400 | 1.4 | 0 | — | sans-meat | Recipe metadata, image notes, and small supporting labels. |
| nav | 20px | 700 | 0.9 | 0.02em | uppercase | sans-meat | Main uppercase navigation labels and menu controls. |
| link | 18px | 400 | 1.4 | 0 | — | sans-meat | Inline links and text-led secondary actions. |
| eyebrow | 24px | 700 | 0.9 | 0.03em | uppercase | sans-meat | Short uppercase labels above display headings. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 8, 10, 14, 16, 18, 20, 24, 26, 32, 40 px.
- Section rhythm 40px · element gap 6px · card padding — · max content width 1240px.

The measured page max width is 1240px, with a compact underlying spacing scale and a 40px section gap. The opening viewport is a full-bleed hero with centered campaign typography and food imagery positioned around it. Later sections shift between centered product and recipe browsing, text-led mission and FAQ blocks, and split newsletter content. A consistent burgundy field ties the distinct layouts together; the footer is a separate darker band. Keep alignment intentional and content groups closely composed, while allowing major headline sections and photographic moments to breathe.

## Shape & elevation

- Radius: button `50%` · card `38px` · nav `15px` · xs `5px` · sm `15px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.445, 0.05, 0.55, 0.95)` on interactive elements.

The measured data reports no shadows or gradients, so keep the page mostly flat. Separate zones through the darker plum footer, contrasting pale panels, and solid CTA fills rather than ambient shadows. Cards and navigation can use the measured rounded treatments; pink hairlines are a small, visible outline detail rather than a general border system.

## Imagery

Use appetizing, brightly lit food photography and clear product-pack shots as the counterpoint to the dark burgundy field. The hero treats food photos as small, irregularly cropped floating frames around the central campaign headline. Recipe sections use larger rectangular meal photography; product browsing emphasizes package imagery. Graphic illustrations and iconography can support ingredient or locator content, but should not replace the food photography as the page's visual draw.

## Components

### Top navigation

Compact bright-red rounded horizontal bar with a white wordmark, bold uppercase menu labels, and darker rounded action controls.

### Campaign hero

Centered oversized uppercase campaign headline with compact red CTA pills and scattered, irregularly cropped food photography.

### Product carousel

Centered category selector above a horizontal package-image row, with uppercase product names and compact learn-more and find-it actions.

### Recipe feature

Large food photography paired with uppercase condensed recipe titles, small metadata, and bright-red recipe buttons.

### FAQ accordion

Stacked dark plum rounded question rows with white uppercase condensed copy and a right-aligned downward indicator.

### Meat locator panel

Pale pink, softly rounded feature panel with dark headline text and a map image anchored across its lower area.

### Newsletter form

Two-column signup area with compact uppercase copy, a white pill-shaped email field, and red submit button.

### Footer

Deep plum footer band with a large red wordmark, grouped small white links, locale controls, and legal copy.

### Measured component styles

- **Primary button** (“Submit”): background #e10600 · text #ffffff · radius 16px · padding 1px 14px · 700 20px sans-meat · uppercase
- **Secondary button**: background #ffc7c6 · text #000000 · border 1px solid #ffc7c6 · radius 12px · padding 0px · 400 0px sans-meat
- **Link** (“LEARN MORE”): transparent background · text #ffffff · radius 0px · padding 0px 14px · 400 0px sans-meat
- **Input**: transparent background · text #000000 · radius 0px · padding 0px · 400 18px sans-meat
- **Card** (“MEAT LOCATOR Where's the meat? This map ”): background #ffc7c6 · text #000000 · radius 0px · padding 0px · 400 10px sans-meat
- **Navigation item** (“SKIP TO CONTENT”): transparent background · text #ffffff · radius 0px · padding 0px · 400 10px sans-meat

## Do

- Use #4f0423 as the dominant page canvas.
- Reserve #e10600 for high-impact headlines and clear actions.
- Set display headlines in bold, condensed uppercase type.
- Use white for readable navigation and body text.
- Let food and product photography add warm, varied color.
- Use #260212 to distinguish the footer and selected inset surfaces.

## Don't

- Don't introduce unmeasured brand colors.
- Don't replace the burgundy canvas with a neutral page background.
- Don't set every text block in oversized display type.
- Don't add gradients or decorative shadows.
- Don't crowd campaign headlines with too many interface elements.
- Don't use product illustrations in place of the prominent real food photography.

## Agent prompt

Create a new Impossible Foods-style page with a continuous #4f0423 Burgundy Stage canvas and a compact, rounded navigation bar. Use #e10600 Signal Red for campaign emphasis and CTAs, #ffffff Gallery White for navigation and readable copy, and #ffc7c6 Rose Frost for occasional highlights or a contrasting feature panel. Use a condensed sans-serif similar to Oswald: bold uppercase display headlines, restrained uppercase navigation, and clear regular-weight body text. Let oversized typography lead, then balance it with vivid, appetizing food photography and product imagery. Compose content in compact cards or grouped controls, with generous transitions between major sections. Use #260212 Plum Shadow for a distinct footer or inset surface. Keep the design mostly flat; avoid gradients and unmeasured decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim rounded red navigation bar spanning the viewport, with wordmark and grouped links. | Primary site navigation, Menu dropdowns, Find-us action | Red pill bar, White condensed uppercase labels, Dark rounded action buttons |
| 2 | product-grid | Centered product browsing with category tabs and a horizontally arranged pack carousel. | Category selection, Horizontal product browsing, Product detail and store-finder links | Package photography, Condensed uppercase labels, Small red action pills |
| 3 | gallery | Centered heading and filters lead into two prominent recipe-photo columns. | Recipe category filters, Recipe detail links, Browse-all action | Large food photography, Uppercase condensed titles, Compact recipe metadata |
| 4 | content-feed | Single text-led section with a left-aligned heading and supporting paragraph. | Mission statement, Supporting brand narrative | Large uppercase headline, White body copy, Burgundy background |
| 5 | feature-split | Multi-column feature area pairing benefit selectors, explanatory copy, and an illustration. | Selectable benefit topics, Progressive product explanation | Inset dark panel, Pale selection state, Bright illustrated food graphic |
| 6 | faq | Centered two-line display title above a short introductory paragraph. | FAQ introduction, Sets context before questions | Large condensed uppercase title, Centered white body copy |
| 7 | faq | Single-column stack of compact, rounded question rows. | Expandable questions, Down-arrow disclosure affordance | Dark plum rounded rows, White uppercase condensed text |
| 8 | contact | Single centered contact prompt with a large display headline and compact action. | Contact invitation, Help link | Pale pink display type, Centered composition, Small red CTA |
| 9 | other | Centered pale feature card with a wide map image along its lower portion. | Store locator, Directions action | Rose Frost panel, Dark uppercase heading, Map imagery |
| 10 | newsletter | Two-column signup area with explanatory copy on one side and form on the other. | Email signup, Consent disclosure | Uppercase condensed heading, White pill-shaped email field, Red submit button |
| 11 | footer | Deep plum footer with a large wordmark and three grouped information columns. | Social links, Locale selection, Legal and support navigation | #260212 footer band, Large red wordmark, Small white uppercase links |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(0,0,0,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #ffffff;
--osano-button-foreground-color: #3141eb;
--osano-dialog-background-color: #dddddd;
--osano-dialog-foreground-color: #444444;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #444444;
--osano-toggle-off-track-color: #7A3FF1;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-button-close-color: #444444;
--osano-button-accept-background-color: #ffffff;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #3141eb;
--osano-button-deny-background-color: #3141eb;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #3141eb;
--osano-button-reject-all-background-color: #ffffff;
--osano-button-reject-all-background-color-hover: #ebebeb;
--osano-button-reject-all-border-color: #fff;
--osano-button-reject-all-foreground-color: #3141eb;
--osano-button-manage-background-color: #ffffff;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #3141eb;
--osano-info-dialog-link-color: #444444;
--osano-info-dialog-button-close-color: #444444;
--osano-info-dialog-toggle-off-track-color: #7A3FF1;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #ffffff;
--osano-info-dialog-button-border-color: #3141eb;
--osano-info-dialog-button-foreground-color: #3141eb;
--osano-dialog-gpc-background-color: #dddddd;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/impossiblefoods-com