MUUDS

Curated catalog of analyzed web design.

tenyears-source-paris

A rigorous, pitch-black agency retrospective that reads like an intellectual design monograph. Austere Swiss typography and stark negative space are punctuated at regular intervals by vibrant, saturated chapter-divider banners and minimalist hand-drawn annotations.

Visit site

Rated

8.3/ 10

From 20 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
9.6
Systemmeasured
6.9
Distinctionmeasured
8.5
on the grid
50%
vertical rhythm
63%
type on a scale
64%
contrast passing AA
100%
unlike the library
0.28
model craft
8.0/10
model deviation
5.5/10

Colour

Background#000000
Text#ffffff
Accent#ed472d
Surface#210b08
Muted#bababa

Typefaces

Display
TWK Everett
Body
TWK Everett
Mono
Source
self_hosted
Scale
14 · 16 · 20 · 22 · 24 · 32

Layout

Grid
12 columns
Container
1312px
Spacing base
4px
Radius
0px

Capture

Category
agency
Sections
20
Captured
2026-08-30
Rhythm
dark → accent → dark x3 → accent → dark x3 → accent → dark x2 → accent → dark x2

Type rules

  • display headlines use sentence-case TWK Everett with tight leading
  • body text stays constrained to a 40-character column measure for editorial readability
  • timeline brackets and structural labels appear in spaced uppercase

Colour rules

  • deep black serves as the primary canvas for over 90 percent of the experience
  • solid saturated color-blocked cards mark chapter beginnings and never overlap

Voice rules

  • treat copy as a serialized agency manifesto rather than marketing bullet points
  • structure narrative into clear chronological and thematic chapters

Holds it together

  • each chapter opens with a vibrant saturated banner paired with stark vector illustration
  • body narrative flows in two-column text blocks aligned on a modular editorial grid
  • editorial pull quotes and key phrases use subtle hand-drawn vector highlights

Contrast

text on background21.0:1 AAA
muted text on background10.8:1 AAA
text on surface18.8:1 AAA
accent on background5.5:1 AA
background on accent5.5:1 AA

Type, measured

Body
22px / 1.4
Measure
40 characters
Display
140px / 1.5
Tracking
0em display
Scale ratio
1.59

Voice

Tone
declarative, confident
Sentences
medium
Person
first
Vocabulary
specialised
Calls to action
lire

Built with

Builder
Framework
Motion
lenis
WebGL
Nav
top_bar, 2 items
Length
35.9 screens

Sections in page order

3 marked strong · 20

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

  1. 00

    hero

    Austere and confident dark retrospective hero dominated by massive lowercase type and structured timeline brackets.

    Mood
    bold + editorial
    Layout
    1 col · stacked · airy
    Open section →
    Austere and confident dark retrospective hero dominated by massive lowercase type and structured timeline brackets.
  2. 01

    statement

    Strong

    High-impact editorial chapter break contrasting vibrant red-orange with stark black, featuring bold grotesque typography and precise graphic hand illustrations.

    Mood
    editorial + bold
    Layout
    2 col · split · balanced
    Open section →
    High-impact editorial chapter break contrasting vibrant red-orange with stark black, featuring bold grotesque typography and precise graphic hand illustrations.
  3. 02

    statement

    Deep black editorial narrative with crisp typography, multi-column storytelling, and UI showcase cards anchored at the bottom.

    Mood
    editorial + quiet
    Layout
    12 col · asymmetric · balanced
    Open section →
    Deep black editorial narrative with crisp typography, multi-column storytelling, and UI showcase cards anchored at the bottom.
  4. 03

    statement

    Stark pitch-black statement section using bold white grotesque typography surrounded by generous negative space.

    Mood
    bold + quiet
    Layout
    1 col · stacked · airy
    Open section →
    Stark pitch-black statement section using bold white grotesque typography surrounded by generous negative space.
  5. 04

    statement

    Austere dark editorial statement combining crisp sans-serif copy, two-column supporting text, and an authoritative pull-quote.

    Mood
    editorial + quiet
    Layout
    12 col · stacked · airy
    Open section →
    Austere dark editorial statement combining crisp sans-serif copy, two-column supporting text, and an authoritative pull-quote.
  6. 05

    showcase

    Deep black, ultra-minimal transitional space punctured only by a tiny project caption and an electric blue chapter card at the edge.

    Mood
    quiet + bold
    Layout
    2 col · asymmetric · airy
    Open section →
    Deep black, ultra-minimal transitional space punctured only by a tiny project caption and an electric blue chapter card at the edge.
  7. 06

    statement

    Electric blue and pitch black color-blocking anchors a precise, architectonic editorial chapter intro with crisp blueprint-style line illustration.

    Mood
    clinical + bold
    Layout
    1 col · split · balanced
    Open section →
    Electric blue and pitch black color-blocking anchors a precise, architectonic editorial chapter intro with crisp blueprint-style line illustration.
  8. 07

    statement

    A stark editorial layout pairing bold typographic manifestos on black with two-column narrative copy and a candid cinematic photograph below.

    Mood
    editorial + quiet
    Layout
    12 col · stacked · balanced
    Open section →
    A stark editorial layout pairing bold typographic manifestos on black with two-column narrative copy and a candid cinematic photograph below.
  9. 08

    statement

    Minimalist dark statement layout with bold typography, asymmetric paragraph placement, and a subtle hand-drawn blue annotation.

    Mood
    editorial + bold
    Layout
    12 col · asymmetric · airy
    Open section →
    Minimalist dark statement layout with bold typography, asymmetric paragraph placement, and a subtle hand-drawn blue annotation.
  10. 09

    team

    Quiet editorial culture section pairing two columns of subtle narrative text with documentary-style workspace photography on pure black.

    Mood
    editorial + quiet
    Layout
    12 col · asymmetric · airy
    Open section →
    Quiet editorial culture section pairing two columns of subtle narrative text with documentary-style workspace photography on pure black.
  11. 10

    statement

    Strong

    A vivid cyan chapter divider contrasts sharp editorial typography against minimalist line illustrations on deep black.

    Mood
    editorial + bold
    Layout
    2 col · split · airy
    Open section →
    A vivid cyan chapter divider contrasts sharp editorial typography against minimalist line illustrations on deep black.
  12. 11

    statement

    Minimalist dark editorial statement with stark typographic hierarchy and a subtle teal hand-drawn accent circling body text.

    Mood
    editorial + quiet
    Layout
    12 col · asymmetric · airy
    Open section →
    Minimalist dark editorial statement with stark typographic hierarchy and a subtle teal hand-drawn accent circling body text.
  13. 12

    statement

    Minimalist pitch-black editorial section pairing high-contrast typography, stats callouts, and an asymmetric layout with a subtle hand-drawn accent.

    Mood
    editorial + quiet
    Layout
    2 col · asymmetric · airy
    Open section →
    Minimalist pitch-black editorial section pairing high-contrast typography, stats callouts, and an asymmetric layout with a subtle hand-drawn accent.
  14. 13

    feature grid

    Three rounded sage cards showcase digital design tools and resources in a restrained, pitch-black gallery layout.

    Mood
    clinical + bold
    Layout
    12 col · grid · balanced
    Open section →
    Three rounded sage cards showcase digital design tools and resources in a restrained, pitch-black gallery layout.
  15. 14

    showcase

    Minimal dark studio section pairing an accented editorial headline with side-by-side photography of public speaking and conferences.

    Mood
    editorial + quiet
    Layout
    12 col · stacked · airy
    Open section →
    Minimal dark studio section pairing an accented editorial headline with side-by-side photography of public speaking and conferences.
  16. 15

    statement

    A calm, split-tone editorial chapter opener pairing muted sage green and black with a stark vector illustration of a high jumper.

    Mood
    editorial + quiet
    Layout
    1 col · split · airy
    Open section →
    A calm, split-tone editorial chapter opener pairing muted sage green and black with a stark vector illustration of a high jumper.
  17. 16

    statement

    Austere, pitch-black editorial statement giving expansive breathing room to crisp Swiss typography and paired reading columns.

    Mood
    quiet + editorial
    Layout
    12 col · asymmetric · airy
    Open section →
    Austere, pitch-black editorial statement giving expansive breathing room to crisp Swiss typography and paired reading columns.
  18. 17

    statement

    Stark, high-contrast dark editorial statement layout featuring crisp grotesque typography with an asymmetric text flow and subtle annotation.

    Mood
    editorial + quiet
    Layout
    6 col · asymmetric · airy
    Open section →
    Stark, high-contrast dark editorial statement layout featuring crisp grotesque typography with an asymmetric text flow and subtle annotation.
  19. 18

    stats

    Structured editorial narrative paired with a high-contrast vivid green case study metrics card.

    Mood
    clinical + editorial
    Layout
    12 col · stacked · balanced
    Open section →
    Structured editorial narrative paired with a high-contrast vivid green case study metrics card.
  20. 19

    testimonial

    Strong

    An editorial pull-quote transitioning sharply into a bright cyan chapter division with minimalist line illustration.

    Mood
    editorial + clinical
    Layout
    1 col · stacked · airy
    Open section →
    An editorial pull-quote transitioning sharply into a bright cyan chapter division with minimalist line illustration.

More like this

by shared mood