SearchSubmit
MUUDS

Curated catalog of analyzed web design.

National Geographic

Authoritative and cinematic storytelling grounded in discovery. Stark pitch-black backdrops frame vibrant documentary photography, punctuated by the iconic golden-yellow framing bars and clean, utilitarian editorial typography.

contemplativegroundedmysteriousreassuring
Visit site

Rated

7.3/ 10

From 11 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged
8.6
Systemmeasured
6.1
Distinctionmeasured
6.3
on the grid
17%
vertical rhythm
79%
type on a scale
45%
contrast passing AA
100%
unlike the library
0.88
model craft
7.5/10
model deviation
3.5/10

Colour

Background#000000
Text#ffffff
Accent#ffcc00
Surface#ffffff
Muted#999999

Typefaces

Display
GeoBrandBold
Body
GeoEditRegular
Mono
—
Source
self_hosted
Scale
12 · 14 · 16 · 18 · 22 · 24

Layout

Grid
3 columns
Container
1020px
Spacing base
10px
Radius
0px

Capture

Category
media
Sections
11
Captured
2026-09-16
Rhythm
white → dark x9 → white → dark

Type rules

  • body measure tops out at 87 characters for comfortable long-form editorial scanning
  • category tags and sub-headers strictly tracked uppercase sans
  • article titles set in sentence case with robust visual weight

Colour rules

  • signature yellow (#ffcc00) restricted strictly to primary brand indicators, section vertical bars, and primary CTAs
  • rich black background sets cinematic stage for high-resolution full-bleed photography

Voice rules

  • lead with vivid sensory or factual discovery phrasing
  • category eyebrows always precede headlines in uppercase

Holds it together

  • lead major section headers with a thick vertical yellow bar on the left edge
  • use full-bleed or large-aspect high-contrast documentary photography over plain graphic decoration
  • separate editorial tiers using uppercase category eyebrows and locked-access badge indicators
  • break predominantly dark layout with dedicated white editorial or mission panels

Contrast

text on background21.0:1 AAA
muted text on background7.4:1 AAA
accent on background13.9:1 AAA
background on accent13.9:1 AAA

Type, measured

Body
18px / 1.5
Measure
87 characters
Display
54px / 1.5
Tracking
0.056em display
Scale ratio
1.32

Voice

Tone
authoritative, inquisitive, evocative
Sentences
medium
Person
third
Vocabulary
elevated
Calls to action
subscribe, see, explore, watch

Built with

Builder
—
Framework
—
Motion
—
WebGL
—
Nav
sticky_top_bar, 81 items, sticky
Length
11.2 screens
Mode

Sections in page order

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

  1. 00

    hero

    Strong

    A rich editorial magazine grid set against stark black, letting documentary photography and story headlines command attention.

    Mood
    contemplative + mysterious
    Layout
    3 col · asymmetric · balanced
    Open section →
    A rich editorial magazine grid set against stark black, letting documentary photography and story headlines command attention.
  2. 01

    showcase

    Quiet dark editorial carousel featuring vivid photographic previews and concise article headlines.

    Mood
    contemplative + grounded
    Layout
    5 col · grid · balanced
    Open section →
    Quiet dark editorial carousel featuring vivid photographic previews and concise article headlines.
  3. 02

    feature

    Solemn documentary photograph serving as a full-bleed backdrop for a quiet editorial feature on cultural identity.

    Mood
    contemplative + grounded
    Layout
    1 col · full bleed · airy
    Open section →
    Solemn documentary photograph serving as a full-bleed backdrop for a quiet editorial feature on cultural identity.
  4. 03

    cta

    Lush, dark mossy forest backdrop framing a high-contrast email subscription form.

    Mood
    grounded + mysterious
    Layout
    1 col · centered · balanced
    Open section →
    Lush, dark mossy forest backdrop framing a high-contrast email subscription form.
  5. 04

    showcase

    High-contrast editorial story carousel showcasing wildlife photography against a stark black backdrop with signature yellow accents.

    Mood
    contemplative + grounded
    Layout
    4 col · grid · balanced
    Open section →
    High-contrast editorial story carousel showcasing wildlife photography against a stark black backdrop with signature yellow accents.
  6. 05

    showcase

    An immersive, cinematic nature documentary showcase with delicate centered typography layered over full-bleed footage and a poster card carousel below.

    Mood
    grounded + contemplative
    Layout
    5 col · stacked · balanced
    Open section →
    An immersive, cinematic nature documentary showcase with delicate centered typography layered over full-bleed footage and a poster card carousel below.
  7. 06

    showcase

    Strong

    Dramatic dark showcase presenting streaming titles in a layered 3D coverflow carousel with vibrant poster art and signature yellow accents.

    Mood
    mysterious
    Layout
    1 col · centered · airy
    Open section →
    Dramatic dark showcase presenting streaming titles in a layered 3D coverflow carousel with vibrant poster art and signature yellow accents.
  8. 07

    showcase

    Strong

    Immersive dark travel hub combining vivid wildlife and landscape photography over a dynamic topographic satellite background.

    Mood
    grounded
    Layout
    3 col · asymmetric · balanced
    Open section →
    Immersive dark travel hub combining vivid wildlife and landscape photography over a dynamic topographic satellite background.
  9. 08

    showcase

    An authoritative magazine curation band contrasting striking scientific photography and story previews against deep pitch black.

    Mood
    contemplative + mysterious
    Layout
    2 col · split · balanced
    Open section →
    An authoritative magazine curation band contrasting striking scientific photography and story previews against deep pitch black.
  10. 09

    feature

    Clean editorial layout with iconic yellow accents and vivid documentary photography framing a mission-driven nonprofit story.

    Mood
    grounded + reassuring
    Layout
    3 col · stacked · balanced
    Open section →
    Clean editorial layout with iconic yellow accents and vivid documentary photography framing a mission-driven nonprofit story.
  11. 10

    footer

    An austere, structured dark footer organizing extensive links and social channels in high-contrast columns.

    Mood
    reassuring
    Layout
    4 col · grid · balanced
    Open section →
    An austere, structured dark footer organizing extensive links and social channels in high-contrast columns.

More like this

by shared mood