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

# Eat Real Food · Design System

> A bold public-health case for real food

**Theme:** dark · **Industry:** health · **Source:** https://realfood.gov/ · **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._

Eat Real Food presents national nutrition guidance as a bold editorial campaign, pairing a near-black red canvas with oversized cream headlines and vivid red data accents. Long, spacious sections build toward a large food-guide illustration before transitioning to a light resources area.

## North star

Use oversized, tightly composed editorial headlines and generous dark negative space to make the campaign message unmistakable.

## Overview

The page builds its identity around a deep oxblood-black canvas (#110000) and warm cream (#fdfbee), using the contrast to make large, centered headlines feel declarative and urgent. Gray-mauve text softens supporting copy without losing its subdued tone; bright red appears sparingly in statistical blocks and selected emphasis, rather than as a general interface color. The display face Die Grotesk D creates compact, heavy headlines, while Die Grotesk A carries body copy and Geist Mono gives government labels and small metadata a technical, uppercase character. The opening is a centered campaign statement above a wide, rounded video frame; subsequent dark sections alternate between centered messaging, measured statistics, and substantial negative space. A striking cream-colored food-guide panel interrupts the dark run with oversized editorial typography and vivid food artwork. The resources area continues that light surface treatment. Borders stay restrained, and the page relies on scale, contrast, media, and spacing rather than shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Oxblood Night | `#110000` | `--color-oxblood-night` | brand | Dominant page canvas and dark section background; also the primary dark text color on cream surfaces. |
| Warm Parchment | `#fdfbee` | `--color-warm-parchment` | surface | Light section and food-guide panel background; also the main headline and navigation text on dark sections. |
| Muted Mauve | `#8d7d7d` | `--color-muted-mauve` | neutral | Subdued supporting copy against the dark campaign canvas. |
| Oxblood Hairline | `#403232` | `--color-oxblood-hairline` | semantic | Fine button border detail, separating controls from the dark background. |
| Stone Copy | `#c3bcb2` | `--color-stone-copy` | neutral | Secondary text tone; keep its use quiet and subordinate to cream headlines. |
| Signal Red | `#ff0101` | `--color-signal-red` | accent | Rare red inline text emphasis, not a general background or button color. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Occasional small text or media detail; the warmer cream is the defining light surface. |
| Campaign Red | `#d50000` | `--color-campaign-red` | accent | Small red card accent; use red selectively for statistics and campaign emphasis. |

### Semantic aliases

`--color-canvas` → `#110000` (Oxblood Night) · `--color-surface` → `#fdfbee` (Warm Parchment) · `--color-text` → `#fdfbee` (Warm Parchment) · `--color-text-muted` → `#110000` (Oxblood Night) · `--color-text-subtle` → `#8d7d7d` (Muted Mauve) · `--color-border` → `#403232` (Oxblood Hairline) · `--color-accent` → `#ff0101` (Signal Red) · `--color-accent-2` → `#d50000` (Campaign Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fdfbee` | `#110000` | 19.74:1 | AAA |
| `#110000` | `#fdfbee` | 19.74:1 | AAA |
| `#8d7d7d` | `#110000` | 5.24:1 | AA |
| `#8d7d7d` | `#fdfbee` | 3.77:1 | AA-large |
| `#ff0101` | `#110000` | 5.13:1 | AA |
| `#ff0101` | `#fdfbee` | 3.84:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Die Grotesk B | `--font-die-grotesk-b` | webfont | 700, 500 | Bold brand and headline text where the measured styles use this face. | Inter |
| Die Grotesk A | `--font-body` | webfont | 500, 700, 400 | Body copy and campaign button labels. | Inter |
| Die Grotesk D | `--font-display` | webfont | 700 | Display headlines, including the hero and section headings. | Inter |
| Geist Mono | `--font-mono` | webfont | 400 | Government banner, eyebrow labels, navigation, and compact metadata. | IBM Plex Mono |

- **Die Grotesk B:** Measured bold webfont; the page favors heavy, clean sans-serif headline forms.
- **Die Grotesk A:** Medium is prominent, with regular and bold also measured; keep body copy compact and direct.
- **Die Grotesk D:** Bold display face; very large measured headings use tight line heights and no added tracking.
- **Geist Mono:** Regular uppercase labels use visibly spaced mono lettering.

### Type scale — Golden Ratio (ratio ≈ 1.604, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 170px | 700 | 0.86 | 0 | — | Die Grotesk D | Oversized campaign display headline, especially the opening message. |
| h1 | 155px | 700 | 0.84 | 0 | — | Die Grotesk D | Primary hero headline and major page-level statement. |
| h2 | 96px | 700 | 0.96 | 0 | — | Die Grotesk D | Large section headline, including the health data section. |
| h3 | 48px | 700 | 0.92 | 0 | — | Die Grotesk D | Subsection or prominent feature heading. |
| h4 | 44px | 700 | 1.02 | 0 | — | Die Grotesk D | Smaller section or food-category heading. |
| body | 16px | 500 | 1.18 | 0 | — | Die Grotesk A | Campaign explanation, supporting descriptions, and button text. |
| caption | 12px | 400 | 1.4 | 0.06em | uppercase | Geist Mono | Small uppercase labels and compact media or data notes. |
| nav | 12px | 400 | 1.4 | 0.06em | uppercase | Geist Mono | Government banner and other navigation-style labels. |
| eyebrow | 12px | 400 | 1.4 | 0.06em | uppercase | Geist Mono | Section preheadings such as the health-data label. |
| code | 12px | 400 | 1.4 | 0.06em | uppercase | Geist Mono | Compact mono metadata where this role is applied. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 28, 32, 40, 52, 80, 128, 144 px.
- Section rhythm 128px · element gap 16px · card padding — · max content width 922px.

The measured page max width is 922px, with a spacious overall density and single-column campaign sections alongside a three-column statistics area. The hero and health headline are centered; the large infographic and resources content shift to left-aligned editorial layouts. Keep sections visually expansive, with the measured 128px section gap and 16px element gap guiding the rhythm. Full-bleed media is used within the opening section, while light content sits in a clearly bounded, broad panel.

## Shape & elevation

- Radius: button `24px` · media `24px` · xs `12px` · sm `24px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat: there are no measured shadows or gradients defining the design. Separation comes from strong dark-to-cream section changes, open space, and restrained hairlines. Media and the food-guide panel provide visual depth through their content rather than stacked UI effects. Buttons use a dark fill and a fine measured border.

## Imagery

The opening uses a wide video frame with a rounded edge and a darkened, cinematic presentation; its blurred preview colors belong to the media, not the core brand palette. The central food-guide graphic is a large, cream-backed editorial composition with colorful food illustrations that extend beyond the focal text areas. Keep food artwork vivid and tactile, but preserve clear hierarchy between illustration and explanatory copy.

## Components

### Government banner

A narrow centered official-government label at the top, set in uppercase Geist Mono with cream text and a fine horizontal divider.

### Campaign hero

Centered, oversized bold display headline and compact centered body copy on the dark canvas, followed by a wide media frame.

### Video control

A dark, pill-shaped outlined control overlays the hero video; the measured button uses a 48px radius and a fine #403232 border.

### Health statistics

Three-column data presentation with large red percentage blocks, dark text on the blocks, and compact supporting descriptions.

### Food-guide panel

A large cream editorial surface pairing a bold title and food-category copy with vivid, oversized food illustrations.

### Resources section

A light-background closing area with a left-aligned heading and introduction, plus a two-column resource layout with linked items.

### Measured component styles

- **Primary button** (“Watch Super Bowl LX Spot”): background #0d0000 · text #110000 · border 1px solid #403232 · radius 48px · padding 8px 8px 8px 24px · 400 16px Die Grotesk A
- **Card** (“50%”): background #920000 · text #fdfbee · radius 0px · padding 0px · 400 16px Die Grotesk A
- **Navigation item** (“AN OFFICIAL WEBSITE OF THE UNITED STATES”): transparent background · text #fdfbee · radius 0px · padding 0px · 400 12px Geist Mono · uppercase

## Do

- Keep the main campaign canvas near-black and red-toned.
- Use cream for high-contrast display headlines and light panels.
- Reserve vivid red for data and selective emphasis.
- Set major headings in bold Die Grotesk-style display sans.
- Use mono uppercase styling for official labels and eyebrows.
- Preserve generous vertical space between campaign sections.

## Don't

- Do not turn the page into a conventional light dashboard.
- Do not use bright red as a general-purpose interface background.
- Do not add shadows or decorative gradients that are not measured.
- Do not crowd the oversized headlines with nearby content.
- Do not treat illustration colors as brand palette colors.
- Do not replace the editorial campaign rhythm with uniform cards.

## Agent prompt

Build a new public-health campaign page in the Eat Real Food visual style. Use Oxblood Night (#110000) as the dominant canvas, with Warm Parchment (#fdfbee) for high-contrast headlines and occasional broad light panels. Keep Signal Red (#ff0101) and Campaign Red (#d50000) selective, especially for data emphasis rather than general UI. Set display headlines in a bold Die Grotesk D-like sans, supporting copy in a Die Grotesk A-like sans, and small uppercase labels in spaced Geist Mono. Favor centered hero messaging, expansive vertical breathing room, and a mix of full-width media, clear statistics, and editorial food imagery. Keep borders fine and shadows absent. Build a memorable long-form narrative, then use a light resources section as a deliberate visual transition.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above a wide, full-bleed media frame. | Campaign statement, Video play control | Dark canvas, Oversized display type, Rounded media |
| 2 | stats | Centered section heading above three side-by-side red percentage blocks and supporting copy. | Quick statistic scanning, Evidence-led persuasion | Three-column layout, Red data blocks, Dark background |
| 3 | other | Long, spacious dark section with a centered headline and a large centered statement. | Narrative transition, Emphasis through whitespace | Dark canvas, Large centered typography, Sparse composition |
| 4 | product-showcase | Large cream panel containing an editorial title, food-category sections, and oversized food artwork. | Category-based guidance, Illustrated learning | Light panel, Editorial type, Vivid food illustration |
| 5 | content-feed | Light-background section with left-aligned introduction and a two-column set of linked resources. | Explore supporting material, Follow resource links | Cream surface, Editorial heading, Two-column content |

## Source CSS custom properties (selected)

```css
--font-geist-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
--font-grotesk-medium: "Die Grotesk A", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--font-grotesk-bold: "Die Grotesk B", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--font-grotesk-display: "Die Grotesk D", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--xs-text-size: calc(12/16 * 1rem);
--xs-letter-spacing: calc(calc(12/16 * 1rem) * -.02);
--s-text-size: calc(14/16 * 1rem);
--s-letter-spacing: calc(calc(14/16 * 1rem) * .02);
--m-text-size: calc(16/16 * 1rem);
--m-letter-spacing: calc(calc(16/16 * 1rem) * .02);
--lg-text-size: calc(20/16 * 1rem);
--h4-text-size: calc(24/16 * 1rem);
--h3-text-size: calc(44/16 * 1rem);
--h2-text-size: calc(80/16 * 1rem);
--h1-text-size: calc(112/16 * 1rem);
--h-text-size: calc(96/16 * 1rem);
--gap-v: 100px;
--gap-h: 32px;
--radius: .625rem;
--background: lab(100% 0 0);
--foreground: lab(2.75381% 0 0);
--card-foreground: lab(2.75381% 0 0);
--popover-foreground: lab(2.75381% 0 0);
--primary: lab(7.78201% -.0000149012 0);
--primary-foreground: lab(98.26% 0 0);
--secondary: lab(96.52% -.0000298023 .0000119209);
--secondary-foreground: lab(7.78201% -.0000149012 0);
--muted-foreground: lab(48.496% 0 0);
--accent: lab(96.52% -.0000298023 .0000119209);
--accent-foreground: lab(7.78201% -.0000149012 0);
--border: lab(90.952% 0 -.0000119209);
--sidebar-foreground: lab(2.75381% 0 0);
--sidebar-primary: lab(7.78201% -.0000149012 0);
--sidebar-primary-foreground: lab(98.26% 0 0);
--sidebar-accent: lab(96.52% -.0000298023 .0000119209);
--sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
--sidebar-border: lab(90.952% 0 -.0000119209);
```

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