SearchSubmit
MUUDS

Curated catalog of analyzed web design.

UPCLOSE

Quietly confident and refined. Deep charcoal backgrounds let high-craft editorial serif statements and rich portfolio case imagery command attention, framed by subtle technical crop marks and crisp hairline grids.

editorialquietbold
Visit site

Colour

Background#181816
Text#ffffff
Accent#ff9b0b
Surface#000000
Muted#b3b3b3

Typefaces

Display
IvoryLLSub
Body
ABCDiatype
Mono
ABCDiatypeSemiMono
Source
self_hosted
Scale
12 · 14 · 18 · 26 · 38 · 48

Layout

Grid
10 columns
Container
1296px
Spacing base
4px
Radius
0px

Capture

Category
studio
Sections
5
Captured
2026-08-29
Rhythm
dark x5

Type rules

  • editorial serif headlines in sentence case with negative tracking
  • body text set in sans-serif at 51 characters per line in muted grey
  • navigation, metadata, and eyebrows set in uppercase sans or mono

Colour rules

  • dark charcoal background (#181816) uniform across almost the entire page
  • pure white reserved for primary headlines, muted grey (#b3b3b3) for narrative copy

Voice rules

  • lead with a clear first-person synthesis of design and engineering
  • project entries credit collaborating design studios and year

Holds it together

  • maintain a continuous dark charcoal background without full-width panel switching
  • pair sentence-case serif headline statements with uppercase grotesque metadata
  • enclose client names and footer links within delicate architectural crop marks or hairlines

Contrast

text on background17.8:1 AAA
muted text on background8.5:1 AAA
text on surface21.0:1 AAA
accent on background8.4:1 AAA
background on accent8.4:1 AAA

Type, measured

Body
18px / 1.4
Measure
51 characters
Display
48px / 1.25
Tracking
-0.025em display
Scale ratio
1.28

Voice

Tone
understated, confident, precise
Sentences
medium
Person
first
Vocabulary
plain
Calls to action
contact, view

Built with

Builder
—
Framework
—
Motion
—
WebGL
—
Nav
top_bar, 4 items
Length
8 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

    A dark, restrained studio introduction featuring an editorial serif headline that flows seamlessly into a curated project showcase.

    Mood
    editorial + quiet
    Layout
    16 col · stacked · airy
    Open section →
    A dark, restrained studio introduction featuring an editorial serif headline that flows seamlessly into a curated project showcase.
  2. 01

    hero

    A cinematic landscape video header transitions into dark space with quiet editorial typography celebrating outdoor fabric craftsmanship.

    Mood
    editorial + quiet
    Layout
    12 col · stacked · airy
    Open section →
    A cinematic landscape video header transitions into dark space with quiet editorial typography celebrating outdoor fabric craftsmanship.
  3. 02

    showcase

    Strong

    A structured dark portfolio grid with crisp hairline dividers, understated typography, and diverse media tiles showcasing recent studio projects.

    Mood
    editorial + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A structured dark portfolio grid with crisp hairline dividers, understated typography, and diverse media tiles showcasing recent studio projects.
  4. 03

    logo bar

    Strong

    Sparse dark-mode client roster framed by precise typographic crop marks, leading into an understated direct contact prompt.

    Mood
    quiet + clinical
    Layout
    10 col · grid · airy
    Open section →
    Sparse dark-mode client roster framed by precise typographic crop marks, leading into an understated direct contact prompt.
  5. 04

    footer

    Strong

    Massive full-bleed bold wordmark towering over stark, monospaced social links partitioned by fine hairline grid borders.

    Mood
    bold + raw
    Layout
    10 col · stacked · balanced
    Open section →
    Massive full-bleed bold wordmark towering over stark, monospaced social links partitioned by fine hairline grid borders.