SearchSubmit
MUUDS

Curated catalog of analyzed web design.

realfood-gov

Confrontational and monumental. Massive high-contrast grotesk typography delivers urgent public health statements against an ominous pitch-black void before cascading into a warm, illustrated cream editorial landscape.

boldquieteditorialwarm
Visit site

Colour

Background#fdfbee
Text#110000
Accent#d50000
Surface#f3f0d6
Muted#fefbee

Typefaces

Display
Die Grotesk A
Body
Die Grotesk A
Mono
Geist Mono
Source
self_hosted
Scale
11 · 12 · 14 · 16 · 21 · 24

Layout

Grid
—
Container
—
Spacing base
4px
Radius
0px

Capture

Category
other
Sections
11
Captured
2026-08-30
Rhythm
dark x5 → mixed → light x5

Type rules

  • display headlines set in sentence case with tight negative line height
  • eyebrow government banners in Geist Mono uppercase with generous letter spacing
  • body text set at 16px with line height of 1.5

Colour rules

  • page divides into an ominous pitch-black prologue and a warm cream policy body
  • blood-red accent reserved strictly for alarming statistical callouts in the dark half

Voice rules

  • lead with brief, impactful assertions without institutional jargon
  • use high-contrast statistics as standalone argumentative anchors

Holds it together

  • transition from near-black backgrounds to warm cream at the midpoint to signify the shift from crisis to solution
  • use saturated red metric callouts on dark backgrounds to communicate health crisis statistics
  • anchor narrative scroll transitions with a continuous vertical stream of realistic food illustrations

Contrast

text on background19.7:1 AAA
muted text on background1.0:1 fail
text on surface17.8:1 AAA
accent on background5.3:1 AA
background on accent5.3:1 AA

Type, measured

Body
16px / 1.5
Measure
135 characters
Display
170px / 0.86
Tracking
0em display
Scale ratio
1.81

Voice

Tone
urgent, authoritative, direct
Sentences
short
Person
first
Vocabulary
plain
Calls to action
watch, download, explore

Built with

Builder
—
Framework
next
Motion
lenis
WebGL
—
Nav
sticky_top_bar, 0 items, sticky
Length
22.6 screens

Sections in page order

11

Rhythm — each block is a section, as wide as it is tall, in the colour it is on

  1. 00

    hero

    Stark and monumental dark statement hero driven entirely by massive grotesque typography and uncompromising contrast.

    Mood
    bold + raw
    Layout
    6 col · stacked · airy
    Open section →
    Stark and monumental dark statement hero driven entirely by massive grotesque typography and uncompromising contrast.
  2. 01

    video

    A stark, shadowy dark void punctuated only by the top edge of a monochromatic visual at the base.

    Mood
    quiet + raw
    Layout
    12 col · full bleed · airy
    Open section →
    A stark, shadowy dark void punctuated only by the top edge of a monochromatic visual at the base.
  3. 02

    stats

    Pitch-black, ominous, and starkly confrontational with massive high-contrast typography delivering an urgent statement.

    Mood
    bold + raw
    Layout
    1 col · stacked · airy
    Open section →
    Pitch-black, ominous, and starkly confrontational with massive high-contrast typography delivering an urgent statement.
  4. 03

    statement

    Deep black, high-contrast narrative statement section using massive grotesque typography and stark red warning stats to create dramatic urgency.

    Mood
    bold + editorial
    Layout
    1 col · stacked · airy
    Open section →
    Deep black, high-contrast narrative statement section using massive grotesque typography and stark red warning stats to create dramatic urgency.
  5. 04

    feature

    An expansive dark storytelling section with bold typography descending into a vertical stream of illustrated grocery items.

    Mood
    bold + playful
    Layout
    1 col · asymmetric · airy
    Open section →
    An expansive dark storytelling section with bold typography descending into a vertical stream of illustrated grocery items.
  6. 05

    showcase

    A vertical cascade of painted whole foods transitions dramatically from deep black into a quiet, warm-toned editorial resource section.

    Mood
    editorial + warm
    Layout
    1 col · stacked · airy
    Open section →
    A vertical cascade of painted whole foods transitions dramatically from deep black into a quiet, warm-toned editorial resource section.
  7. 06

    showcase

    An airy, warm editorial section blending realistic food illustrations with floating publication covers and clean download links.

    Mood
    warm + editorial
    Layout
    4 col · split · airy
    Open section →
    An airy, warm editorial section blending realistic food illustrations with floating publication covers and clean download links.
  8. 07

    showcase

    Warm, tactile vertical cascade of hand-painted whole foods floating down a soft cream canvas toward bold typography.

    Mood
    warm + playful
    Layout
    1 col · stacked · airy
    Open section →
    Warm, tactile vertical cascade of hand-painted whole foods floating down a soft cream canvas toward bold typography.
  9. 08

    feature

    Warm, organic list card featuring policy bullet points layered beneath realistic fruit photography.

    Mood
    warm + editorial
    Layout
    1 col · stacked · balanced
    Open section →
    Warm, organic list card featuring policy bullet points layered beneath realistic fruit photography.
  10. 09

    faq

    A clean, warm cream FAQ accordion with soft pill-shaped rows and tight grotesque typography.

    Mood
    warm + quiet
    Layout
    16 col · stacked · airy
    Open section →
    A clean, warm cream FAQ accordion with soft pill-shaped rows and tight grotesque typography.
  11. 10

    statement

    An expansive warm cream statement section dominated by tight, oversized grotesque typography with a scroll-driven text reveal.

    Mood
    editorial + bold
    Layout
    1 col · stacked · balanced
    Open section →
    An expansive warm cream statement section dominated by tight, oversized grotesque typography with a scroll-driven text reveal.

More like this

by shared mood