SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Code and Theory

Pitch-black, hyper-confident executive editorial. Severe monochromatic contrast and oversized serif display headlines establish executive presence, while rich full-bleed client case study imagery supplies vivid color against pure darkness.

quieteditorialboldwarmplayfulclinical
Visit site

Colour

Background#000000
Text#ffffff
Surface#161616
Muted#a9a9a9

Typefaces

Display
koor
Body
akademie
Mono
Fragment Mono
Source
self_hosted
Scale
12 · 16 · 18 · 20 · 24 · 28

Layout

Grid
6 columns
Container
1320px
Spacing base
4px
Radius
0px

Capture

Category
agency
Sections
17
Captured
2026-08-30
Rhythm
dark x15

Type rules

  • display typography set in sentence case with tight tracking
  • body text rendered in clean grotesque at 12px with 68-character line measures
  • all navigation, metadata tags, and section eyebrows set in uppercase monospaced type

Colour rules

  • background remains absolute pitch black across the entire experience
  • monochromatic white and grey text hierarchy with zero brand accent color, relying on project media for color

Voice rules

  • lead with authoritative scale and positioning statements
  • pair client partner names directly with singular outcome headlines

Holds it together

  • keep the canvas strictly pitch black with thin subtle horizontal dividing borders
  • place project titles and one-line summaries on a single horizontal row above full-width imagery
  • use uppercase monospace tags exclusively for metadata, section categories, and press sources

Contrast

text on background21.0:1 AAA
muted text on background8.9:1 AAA
text on surface18.1:1 AAA

Type, measured

Body
12px / 1.45
Measure
68 characters
Display
60px / 1.15
Tracking
-0.01em display
Scale ratio
1.50

Voice

Tone
authoritative, direct, visionary
Sentences
medium
Person
first
Vocabulary
technical
Calls to action
view, start

Built with

Builder
—
Framework
next
Motion
lenis
WebGL
—
Nav
top_bar, 6 items
Length
13.6 screens

Sections in page order

3 marked strong · 17

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

  1. 00

    nav

    A stark, ultra-minimalist dark navigation bar floating quietly over deep black space.

    Mood
    quiet + clinical
    Layout
    6 col · split · airy
    Open section →
    A stark, ultra-minimalist dark navigation bar floating quietly over deep black space.
  2. 01

    hero

    Stark, pitch-black editorial header pairing large serif typography with understated news ticker metadata below.

    Mood
    editorial + quiet
    Layout
    3 col · stacked · airy
    Open section →
    Stark, pitch-black editorial header pairing large serif typography with understated news ticker metadata below.
  3. 02

    hero

    Rugged industrial hero featuring jobsite video framed by dynamic geometric yellow accents and bold, utilitarian typography.

    Mood
    bold + raw
    Layout
    1 col · full bleed · balanced
    Open section →
    Rugged industrial hero featuring jobsite video framed by dynamic geometric yellow accents and bold, utilitarian typography.
  4. 03

    statement

    Stark pitch-black typography-driven manifesto that establishes authoritative confidence through massive grotesque text and severe minimal framing.

    Mood
    bold + clinical
    Layout
    1 col · stacked · airy
    Open section →
    Stark pitch-black typography-driven manifesto that establishes authoritative confidence through massive grotesque text and severe minimal framing.
  5. 04

    showcase

    Strong

    Dramatic high-contrast case study showcase embedding an interactive search input across an oversized serif typography mask.

    Mood
    bold + editorial
    Layout
    6 col · stacked · airy
    Open section →
    Dramatic high-contrast case study showcase embedding an interactive search input across an oversized serif typography mask.
  6. 05

    showcase

    A warm, cinematic bird's-eye view of people quietly working across wooden tiered seating under soft interior lighting.

    Mood
    warm + quiet
    Layout
    2 col · full bleed · airy
    Open section →
    A warm, cinematic bird's-eye view of people quietly working across wooden tiered seating under soft interior lighting.
  7. 06

    showcase

    Stark, minimal black-and-white case study row structured across a strict horizontal grid with pure typographic clarity.

    Mood
    quiet + clinical
    Layout
    24 col · grid · airy
    Open section →
    Stark, minimal black-and-white case study row structured across a strict horizontal grid with pure typographic clarity.
  8. 07

    showcase

    A cinematic case study feature pairing dramatic industrial portrait photography with a sparse, high-contrast dark metadata footer.

    Mood
    bold + raw
    Layout
    6 col · stacked · balanced
    Open section →
    A cinematic case study feature pairing dramatic industrial portrait photography with a sparse, high-contrast dark metadata footer.
  9. 08

    showcase

    Vibrant saturated orange illustration banner anchored by a minimal dark project summary row below.

    Mood
    playful + bold
    Layout
    6 col · stacked · balanced
    Open section →
    Vibrant saturated orange illustration banner anchored by a minimal dark project summary row below.
  10. 09

    showcase

    Cinematic agency case study card pairing full-bleed workshop photography with ultra-minimal black bar typography and navigation.

    Mood
    editorial + quiet
    Layout
    6 col · stacked · airy
    Open section →
    Cinematic agency case study card pairing full-bleed workshop photography with ultra-minimal black bar typography and navigation.
  11. 10

    showcase

    Strong

    High-impact portfolio showcase featuring a football player dynamically leaping out of a mobile viewport against a dark stadium backdrop.

    Mood
    bold + editorial
    Layout
    6 col · stacked · airy
    Open section →
    High-impact portfolio showcase featuring a football player dynamically leaping out of a mobile viewport against a dark stadium backdrop.
  12. 11

    showcase

    A dark, sleek portfolio showcase featuring a horizontal row of media cards above clean, restrained typography.

    Mood
    quiet + editorial
    Layout
    6 col · stacked · balanced
    Open section →
    A dark, sleek portfolio showcase featuring a horizontal row of media cards above clean, restrained typography.
  13. 12

    showcase

    High-impact dark sports showcase featuring dynamic composite imagery with floating 3D elements and a prominent pill CTA.

    Mood
    bold
    Layout
    8 col · centered · airy
    Open section →
    High-impact dark sports showcase featuring dynamic composite imagery with floating 3D elements and a prominent pill CTA.
  14. 13

    logo bar

    Minimalist dark partner logo strip anchored by a restrained monospace header over pure black.

    Mood
    clinical + quiet
    Layout
    12 col · stacked · balanced
    Open section →
    Minimalist dark partner logo strip anchored by a restrained monospace header over pure black.
  15. 14

    feature

    A stark, clinical numbered methodology breakdown structured with disciplined row dividers and precise typographic contrast against pure black.

    Mood
    clinical + quiet
    Layout
    12 col · grid · airy
    Open section →
    A stark, clinical numbered methodology breakdown structured with disciplined row dividers and precise typographic contrast against pure black.
  16. 15

    showcase

    A sharp, pitch-black press archive presenting agency news and industry recognition across a structured three-column editorial grid.

    Mood
    editorial + clinical
    Layout
    3 col · grid · balanced
    Open section →
    A sharp, pitch-black press archive presenting agency news and industry recognition across a structured three-column editorial grid.
  17. 16

    footer

    Strong

    Monochromatic agency closing section contrasting mixed serif display typography with structured monospaced footer columns.

    Mood
    editorial + quiet
    Layout
    1 col · stacked · balanced
    Open section →
    Monochromatic agency closing section contrasting mixed serif display typography with structured monospaced footer columns.

More like this

by shared mood