Eat Real Food

Design Specification — Eat Real Food

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FDFBEE), ink text (#110000), a vivid accent (#F4FFAE). All type is set in var(--font-grotesk-medium). Detected font weights: 400, 500, 600, 700, 900. Detected style signatures: rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://realfood.gov/favicon.ico

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(#0c0f12d9,#0c0f12f5)
• linear-gradient(#faf7eefa,#fffffff0)
• linear-gradient(#f4f8e4fa,#fffffff0)
• linear-gradient(#f7f4e8fa,#fffffff0)
• linear-gradient(#ff7077 0%,#d81f2c 100%)
• linear-gradient(#ad1f29 0%,#7b1218 100%)

Typography

Primary typeface: var(--font-grotesk-medium) — stack: var(--font-grotesk-medium)

Font stacks (most used first)

• var(--font-grotesk-medium)
• var(--font-grotesk-bold)
• var(--font-grotesk-display)
• Geist Mono
• Die Grotesk B
• Geist Mono Fallback
• var(--font-grotesk-medium)!important
• var(--font-a)
• Die Grotesk D
• var(--font-sans)

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 12px 24px #0000001a
• 0 18px 40px #0a30020d
• 0 0 4px #f0ff91
• 0 0 6px 8px #f0ff9100
• 0 0 8px #f0ff9100
• 0 10px 40px #0000001a,0 20px 60px -10px #0000001a
• 0 7.66px 7.66px #0000000d,-5px -7px 7.66px -4px #00000040
• 0 4px 18.6px #0000002b
• 0 4px 12px #0000004d

Layout

Container max-width: 800px

Grid columns (largest detected grid): 3

Breakpoints

• 580px
• 640px
• 768px
• 800px
• 801px
• 900px
• 1100px
• 1120px

Animation & Motion

Transitions

• opacity .3s
• opacity .5s cubic-bezier(.4,1,.4,1)
• background-color .2s cubic-bezier(.23,1,.32,1)
• color .2s cubic-bezier(.23,1,.32,1)
• grid-template-rows .12s cubic-bezier(.2,.8,.4,1)
• top .2s cubic-bezier(.68,.05,.265,1.55)
• transform .16s cubic-bezier(.65,.1,.6,1)
• transform .2s cubic-bezier(.85,.05,.1,1)
• opacity .2s cubic-bezier(.23,1,.32,1)
• background-color .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1)
• background-color .15s
• color .15s

Easing curves

• cubic-bezier(.4,1,.4,1)
• cubic-bezier(.23,1,.32,1)
• cubic-bezier(.2,.8,.4,1)
• cubic-bezier(.68,.05,.265,1.55)
• cubic-bezier(.65,.1,.6,1)
• cubic-bezier(.85,.05,.1,1)
• cubic-bezier(.22,1,.36,1)
• cubic-bezier(.36,0,.66,-.2)

Keyframes

@keyframes dga-module__LrmiHG__pulse { 0%{box-shadow:0 0 4px #f0ff91}75%{box-shadow:0 0 6px 8px #f0ff9100}to{box-shadow:0 0 8px #f0ff9100} }
@keyframes dga-module__LrmiHG__nearbyFoodSkeletonShimmer { 0%{background-position:200% 0}to{background-position:-200% 0} }
@keyframes dga-module__LrmiHG__heroLeadTextFade { 0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
@keyframes dga-module__LrmiHG__heroTipFadeIn { 0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)} }
@keyframes dga-module__LrmiHG__heroTipBounce { 0%,to{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes dga-module__LrmiHG__askPlaceholderFade { 0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)} }
@keyframes dga-module__LrmiHG__askBarFoodShuffle { 0%,4%{opacity:0;animation-timing-function:cubic-bezier(.22,1,.36,1);transform:translateY(110%)scale(.9)}12%{opacity:1;transform:translateY(0)scale(1)}16%,22%{opacity:1;animation-timing-function:cubic-bezier(.36,0,.66,-.2);transform:translateY(0)scale(1)}25%,to{opacity:0;transform:translateY(-18%)scale(.94)} }
@keyframes ai-chat-module__lXq9jq__chatSurfaceEnter { 0%{opacity:0;transform:translateY(22px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)} }
@keyframes ai-chat-module__lXq9jq__saveConfirmPop { 0%{opacity:.5;transform:scale(.92)}60%{transform:scale(1.04)}to{opacity:1;transform:scale(1)} }
@keyframes ai-chat-module__lXq9jq__broccoliPulse { 0%{opacity:.55;filter:drop-shadow(0 0 #47914f00);transform:scale(.92)}50%{opacity:1;filter:drop-shadow(0 10px 20px #47914f2e);transform:scale(1)}to{opacity:.55;filter:drop-shadow(0 0 #47914f00);transform:scale(.92)} }
@keyframes location-selector-module__I5PimW__updatePromptIn { 0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)} }
@keyframes video-player-modal-module__s_S0BG__spin { to{transform:rotate(360deg)} }
@keyframes usg-banner-module__ymIgGW__springUp { 0%{opacity:0;transform:translateY(100%)}50%{opacity:1}to{opacity:1;transform:translateY(25%)} }
@keyframes usg-banner-module__ymIgGW__springDown { 0%{opacity:1;transform:translateY(25%)}to{opacity:0;transform:translateY(100%)} }

Animations

• .42s cubic-bezier(.16,1,.3,1) both ai-chat-module__lXq9jq__chatSurfaceEnter
• .3s cubic-bezier(.25,1,.5,1) ai-chat-module__lXq9jq__saveConfirmPop
• 1.45s ease-in-out infinite ai-chat-module__lXq9jq__broccoliPulse
• .35s cubic-bezier(.25,1,.5,1) location-selector-module__I5PimW__updatePromptIn
• none

CTA labels found on page

• Real Food
• State Of Our Health
• The Solution
• New Pyramid
• Resources
• Winning
• FAQs

Effects

• backdrop-filter: blur(24px)
• backdrop-filter: blur(28px)
• backdrop-filter: blur(18px)
• backdrop-filter: blur(4px)
• backdrop-filter: blur(12px)
• backdrop-filter: blur(10px)
• backdrop-filter: blur(20px)
• backdrop-filter: blur(8px)
• backdrop-filter: blur(16px)
• backdrop-filter: blur(17.5px)

Source Design Tokens (CSS custom properties)

:root {
  --geist-mono: "Geist Mono", "Geist Mono Fallback";
  --size: 32px;
  --card-size: clamp(120px, 46vw, 240px);
  --top: 14.75%;
  --margin: 0;
  --font-geist-mono: var(--geist-mono), 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-line-height: 1.1;
  --xs-letter-spacing: calc(var(--xs-text-size) * -.02);
  --s-text-size: calc(14/16 * 1rem);
  --s-line-height: 1.4;
  --s-letter-spacing: calc(var(--s-text-size) * .02);
  --m-text-size: calc(16/16 * 1rem);
  --m-line-height: 1.18;
  --m-letter-spacing: calc(var(--m-text-size) * .02);
  --lg-text-size: calc(20/16 * 1rem);
  --lg-line-height: 1.1;
  --h4-text-size: calc(24/16 * 1rem);
  --h4-line-height: .92;
  --h3-text-size: calc(44/16 * 1rem);
  --h3-line-height: 1.04;
  --h2-text-size: calc(80/16 * 1rem);
  --h2-line-height: .92;
  --h1-text-size: calc(112/16 * 1rem);
  --h1-line-height: .84;
  --h-text-size: calc(96/16 * 1rem);
  --h-line-height: .956;
  --r-line-height: 1.5;
  --weight-bold: 700;
  --weight-medium: 500;
  --weight-regular: 400;
  --nav-height: 44px;
  --container: 1076px;
  --container-lg: 528px;
  --container-md: 460px;
  --container-sm: 340px;
  --container-xs: 266px;
  --tablet: 1120px;
  --landscape: 800px;
  --mobile: 580px;
  --mobile-xs: 340px;
  --padding-h: clamp(24px, 10vw, 180px);
  --padding-v: 128px;
  --padding-n: 210px;
  --gap-v: 100px;
  --margin-v: 40px;
  --gap-h: 32px;
  --off-white: #fdfbee;
  --off-black: #100;
  --sand: #f3f0d6;
  --dark-green: #153f15;
  --green: #066742;
  --ui: #0000001a;
  --ui-hovered: #00000014;
  --highlight: #f4ffae;
  --highlight-0: #f0ff91;
  --highlight-1: #b7d96e;
}

Do's and Don'ts

Do

• Do reserve the accent #F4FFAE for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FDFBEE; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 400, 500, 600, 700, 900.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FDFBEE;
  --color-text-primary: #110000;
  --color-accent: #F4FFAE;
  --color-primary: #64C878;
  --color-surface: #FFFFFF;
  --color-secondary: #101114;
  --color-text-secondary: #47914F;
  --color-border: #E5E5E5;
  --color-on-primary: #110000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #110000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F5F5F5;
  --color-surface-container-high: #E5E5E5;
  --font-sans: var(--font-grotesk-medium);
  --font-size-display: 170px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 31px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 40px;
  --radius-pill: 9999px;
  --shadow-sm: 0 12px 24px #0000001a;
  --shadow-md: 0 0 8px #f0ff9100;
  --shadow-lg: 0 7.66px 7.66px #0000000d,-5px -7px 7.66px -4px #00000040;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 80px;
  --tracking-display: -.5px;
  --tracking-label: .08em;
  --container-max: 800px;
}