MUUDS

Curated catalog of analyzed web design.

Harry Moses

Raw graphic brutality meets offbeat editorial zine culture. The site relies entirely on stark monochrome contrast, vertically stretched display type, and halftone portraiture to create personality without relying on accent colors.

Visit site

Colour

Background#f7f7f7
Text#0c0a0c
Surface#f7f7f7
Muted#0c0a0c

Typefaces

Display
Arial Narrow Bold
Body
Apple Garamond Light Regular
Mono
Source
self_hosted
Scale
18 · 20 · 50 · 51 · 72

Layout

Grid
12 columns
Container
1368px
Spacing base
8px
Radius
0px

Capture

Category
portfolio
Sections
5
Captured
2026-08-30
Rhythm
light x5

Type rules

  • display type in the hero is vertically distorted to span the full viewport width
  • body copy is set in classic bookish Apple Garamond at 18px
  • project list entries pair heavy grotesque titles with right-aligned metadata separated by hairlines

Colour rules

  • strictly monochrome palette consisting entirely of #f7f7f7 and #0c0a0c
  • no accent colors used across any section or UI element

Voice rules

  • written in the first person with dry, understated humour
  • project entries stripped purely to client name, service discipline, and completion year

Holds it together

  • maintain a uniform off-white background across the entire page with no panel alternation
  • separate all archive and index rows with full-width hairline border dividers
  • juxtapose aggressive condensed grotesque headlines with delicate literary serif body copy

Contrast

text on background18.4:1 AAA
muted text on background18.4:1 AAA
text on surface18.4:1 AAA

Type, measured

Body
18px / 1.4
Measure
99 characters
Display
72px / 1.1
Tracking
-0.04em display
Scale ratio
1.41

Voice

Tone
irreverent, unpretentious, direct
Sentences
medium
Person
first
Vocabulary
plain
Calls to action

Built with

Builder
framer
Framework
Motion
WebGL
Nav
sticky_top_bar, 4 items, sticky
Length
5 screens

Sections in page order

3 marked strong · 5

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

  1. 00

    hero

    Strong

    Radical, graphic-led hero dominated by vertically stretched display type that pushes minimalism into aggressive brutalist territory.

    Mood
    raw + bold
    Layout
    1 col · full bleed · dense
    Open section →
    Radical, graphic-led hero dominated by vertically stretched display type that pushes minimalism into aggressive brutalist territory.
  2. 01

    showcase

    Strong

    A stark, typographically punchy portfolio index pairing heavy grotesque titles with delicate metadata along clean horizontal rules.

    Mood
    bold + editorial
    Layout
    6 col · stacked · balanced
    Open section →
    A stark, typographically punchy portfolio index pairing heavy grotesque titles with delicate metadata along clean horizontal rules.
  3. 02

    statement

    A raw, zine-inspired personal introduction pairing classic serif text with a gritty halftone cutout portrait.

    Mood
    raw + editorial
    Layout
    2 col · asymmetric · airy
    Open section →
    A raw, zine-inspired personal introduction pairing classic serif text with a gritty halftone cutout portrait.
  4. 03

    other

    Strong

    A quiet, sparse typographic info grid separated by razor-thin rules in a functional Swiss style.

    Mood
    quiet + clinical
    Layout
    2 col · grid · airy
    Open section →
    A quiet, sparse typographic info grid separated by razor-thin rules in a functional Swiss style.
  5. 04

    footer

    Whimsical hand-drawn statement graphic sitting directly above a sparse, hairline-divided contact footer.

    Mood
    playful + raw
    Layout
    8 col · stacked · airy
    Open section →
    Whimsical hand-drawn statement graphic sitting directly above a sparse, hairline-divided contact footer.

More like this

by shared mood