MUUDS

Love and Money

Brash, confrontational, and rigorously direct. A screaming scarlet opening gives way to a dense, utilitarian editorial layout set exclusively in punchy black grotesk lettering over light grey newsprint.

rebelliousmysteriouscontemplativegrittyclinicalserenegroundednostalgic
Visit site

Rated

7.7/ 10

From 14 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.4
Systemmeasured
5.3
Distinctionmeasured
8.9
on the grid
23%
vertical rhythm
64%
type on a scale
57%
contrast passing AA
67%
unlike the library
1.21
model craft
7.9/10
model deviation
6.1/10

Colour

Background#eaebe5
Text#000000
Accent#ecec3c
Surface#ffffff
Muted#444444

Typefaces

Display
ABCDiatype-Bold
Body
ABCDiatype-Bold
Mono
—
Source
self_hosted
Scale
13 · 14 · 16 · 18 · 28 · 56

Layout

Grid
24 columns
Container
1248px
Spacing base
4px
Radius
0px

Capture

Category
agency
Sections
14
Captured
2026-10-03
Rhythm
vibrant → light x4

Type rules

  • display type rendered in massive bold grotesk at tight line height
  • body text strictly uppercase with tight column measures around 35 characters

Colour rules

  • start with a blinding hyper-saturated hero block before shifting to neutral newsprint grey
  • high-contrast pure black text dominates across pale backgrounds

Voice rules

  • all headlines and statements in full uppercase
  • subheadings framed as actionable numbered instructions

Holds it together

  • render all typography in bold uppercase regardless of hierarchy
  • structure multi-step processes with centered numbered headers flanked by continuous imagery strips
  • avoid decorative borders or rounded corners entirely in favor of raw edge-to-edge content stacking

Contrast

text on background17.5:1 AAA
muted text on background8.1:1 AAA
text on surface21.0:1 AAA
muted text on surface9.7:1 AAA
accent on background1.1:1 fail
background on accent1.1:1 fail

Type, measured

Body
13px / 1.2
Measure
35 characters
Display
96px / 0.9
Tracking
-0.031em display
Scale ratio
1.65

Voice

Tone
declarative, provocative, confident
Sentences
medium
Person
first
Vocabulary
direct
Calls to action
view, contact

Built with

Builder
—
Framework
next
Motion
—
WebGL
—
Nav
sticky_top_bar, 3 items, sticky
Length
13.8 screens

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 punchy, unapologetically loud opening statement with monumental black typography set against a blazing field.

    Mood
    rebellious + energetic
    Layout
    1 col · stacked · airy
    Open section →
    A punchy, unapologetically loud opening statement with monumental black typography set against a blazing field.
  2. 01

    hero

    Strong

    Monochrome pixel art contrasts against a framed hardware card in a stark, experimental design portfolio hero.

    Mood
    mysterious + rebellious
    Layout
    2 col · split · airy
    Open section →
    Monochrome pixel art contrasts against a framed hardware card in a stark, experimental design portfolio hero.
  3. 02

    statement

    A stark, confident typographic manifesto suspended quietly in vast muted beige space.

    Mood
    contemplative + serene
    Layout
    1 col · centered · airy
    Open section →
    A stark, confident typographic manifesto suspended quietly in vast muted beige space.
  4. 03

    feature

    A raw documentary editorial layout pairing candid studio photography with bold, monumental Swiss-style typography on a warm neutral background.

    Mood
    gritty
    Layout
    3 col · asymmetric · balanced
    Open section →
    A raw documentary editorial layout pairing candid studio photography with bold, monumental Swiss-style typography on a warm neutral background.
  5. 04

    feature

    A crisp editorial playbook step framed between dense mood boards of physical design artifacts and studio process photography.

    Mood
    contemplative + nostalgic
    Layout
    3 col · split · balanced
    Open section →
    A crisp editorial playbook step framed between dense mood boards of physical design artifacts and studio process photography.
  6. 05

    feature

    A technical, Swiss-style playbook slide pairing stark uppercase grotesque typography with hardware CAD models and process photography.

    Mood
    clinical + grounded
    Layout
    3 col · split · balanced
    Open section →
    A technical, Swiss-style playbook slide pairing stark uppercase grotesque typography with hardware CAD models and process photography.
  7. 06

    feature

    A disciplined Swiss-style playbook step framed between dense visual mosaics and an editorial thumbnail rail on soft warm stone.

    Mood
    clinical + serene
    Layout
    3 col · asymmetric · balanced
    Open section →
    A disciplined Swiss-style playbook step framed between dense visual mosaics and an editorial thumbnail rail on soft warm stone.
  8. 07

    feature

    Bold, zine-inspired agency playbook card framed by lively candid photos and punchy typographic strips.

    Mood
    rebellious + energetic
    Layout
    3 col · asymmetric · dense
    Open section →
    Bold, zine-inspired agency playbook card framed by lively candid photos and punchy typographic strips.
  9. 08

    feature

    Editorial playbook feature pairing bold uppercase typography on warm grey with tactile UGC imagery and a vertical media column.

    Mood
    rebellious + grounded
    Layout
    3 col · split · balanced
    Open section →
    Editorial playbook feature pairing bold uppercase typography on warm grey with tactile UGC imagery and a vertical media column.
  10. 09

    statement

    Minimalist typographic statement centered against a warm neutral canvas.

    Mood
    serene + clinical
    Layout
    1 col · centered · airy
    Open section →
    Minimalist typographic statement centered against a warm neutral canvas.
  11. 10

    showcase

    Strong

    Crisp, minimalist design portfolio grid balancing detailed industrial hardware rendering with punchy editorial product photography under strict Swiss typographic discipline.

    Mood
    clinical + serene
    Layout
    2 col · asymmetric · airy
    Open section →
    Crisp, minimalist design portfolio grid balancing detailed industrial hardware rendering with punchy editorial product photography under strict Swiss typographic discipline.
  12. 11

    showcase

    Tactile and graphic, displaying bespoke beverage can packaging with bold typography against a pale neutral gallery frame.

    Mood
    grounded + playful
    Layout
    1 col · stacked · airy
    Open section →
    Tactile and graphic, displaying bespoke beverage can packaging with bold typography against a pale neutral gallery frame.
  13. 12

    showcase

    A crisp, high-contrast agency portfolio grid juxtaposing tactile retro photography with dark digital particle graphics on an off-white canvas.

    Mood
    nostalgic
    Layout
    2 col · grid · balanced
    Open section →
    A crisp, high-contrast agency portfolio grid juxtaposing tactile retro photography with dark digital particle graphics on an off-white canvas.
  14. 13

    footer

    A stark, hyper-minimalist black and white studio footer with heavy grotesque typography floating in expansive whitespace.

    Mood
    clinical + serene
    Layout
    3 col · grid · airy
    Open section →
    A stark, hyper-minimalist black and white studio footer with heavy grotesque typography floating in expansive whitespace.

More like this

By shared mood