MUUDS

Curated catalog of analyzed web design.

Presentable

Stark, disciplined, and unapologetically editorial. A monolithic near-black background provides vast negative space for oversized serif headlines and vivid magenta brand moments. The layout reads like a high-end monograph, balancing dense index typography with floating visual artifacts.

Visit site

Colour

Background#06060a
Text#fafafa
Accent#ff00bf
Surface#06060a
Muted#fafafa

Typefaces

Display
Gambetta
Body
Poppins
Mono
Source
google
Scale
12 · 14 · 16 · 18 · 20 · 26

Layout

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

Capture

Category
studio
Sections
16
Captured
2026-08-29
Rhythm
dark x16

Type rules

  • display typography set in high-contrast editorial serif reaching up to 237px
  • body text set in geometric sans-serif with extended line measure up to 94 characters
  • micro metadata and eyebrow labels strictly set in uppercase tracking

Colour rules

  • deep near-black canvas covers all sections uniformly
  • vivid magenta accent reserved strictly for signature wordmarks, section eyebrows, and metric leads

Voice rules

  • concise editorial statements framing studio scope
  • client and award lists formatted as structured indexes

Holds it together

  • maintain an unbroken dark canvas (#06060a) across every section without alternating background tones
  • use electric magenta (#ff00bf) strictly for anchor wordmarks and section category labels
  • pair massive serif display titles with fine-print uppercase metadata at opposite visual extremes

Contrast

text on background19.4:1 AAA
muted text on background19.4:1 AAA
text on surface19.4:1 AAA
accent on background5.8:1 AA
background on accent5.8:1 AA

Type, measured

Body
16px / 1.6
Measure
94 characters
Display
237px / 0.94
Tracking
-0.003em display
Scale ratio
1.96

Voice

Tone
restrained, authoritative, sensorial
Sentences
medium
Person
first
Vocabulary
elevated
Calls to action
view, read

Built with

Builder
framer
Framework
Motion
WebGL
Nav
top_bar, 5 items
Length
12.9 screens

Sections in page order

3 marked strong · 16

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

  1. 00

    hero

    Spacious black canvas with floating portfolio tiles orbiting a restrained, centered studio statement.

    Mood
    quiet
    Layout
    12 col · asymmetric · airy
    Open section →
    Spacious black canvas with floating portfolio tiles orbiting a restrained, centered studio statement.
  2. 01

    hero

    Strong

    A striking dark hero dominated by an oversized magenta serif title framed by tiny tracking-spaced labels.

    Mood
    bold + editorial
    Layout
    12 col · stacked · airy
    Open section →
    A striking dark hero dominated by an oversized magenta serif title framed by tiny tracking-spaced labels.
  3. 02

    showcase

    Strong

    A disciplined dark studio overview featuring bold geometric identity blocks followed by an extensive, high-contrast press and recognition index.

    Mood
    editorial + quiet
    Layout
    11 col · stacked · airy
    Open section →
    A disciplined dark studio overview featuring bold geometric identity blocks followed by an extensive, high-contrast press and recognition index.
  4. 03

    statement

    A quiet, starkly minimal title section pairing an elegant heavy serif with crisp centered body text against deep black.

    Mood
    quiet + luxurious
    Layout
    12 col · centered · airy
    Open section →
    A quiet, starkly minimal title section pairing an elegant heavy serif with crisp centered body text against deep black.
  5. 04

    statement

    A stark and refined section header featuring a prominent display serif headline against a deep black void.

    Mood
    luxurious + quiet
    Layout
    15 col · centered · airy
    Open section →
    A stark and refined section header featuring a prominent display serif headline against a deep black void.
  6. 05

    video

    Stark and hyper-minimal presentation focusing on an isolated centered brand mark surrounded by vast negative space.

    Mood
    quiet + clinical
    Layout
    12 col · centered · airy
    Open section →
    Stark and hyper-minimal presentation focusing on an isolated centered brand mark surrounded by vast negative space.
  7. 06

    statement

    Minimal and dark transition header pairing a bold editorial serif title with subtle centered narrative text.

    Mood
    quiet + editorial
    Layout
    12 col · centered · airy
    Open section →
    Minimal and dark transition header pairing a bold editorial serif title with subtle centered narrative text.
  8. 07

    stats

    A restrained dark metrics list defined by vivid magenta serif headlines and crisp horizontal stat rows.

    Mood
    editorial + quiet
    Layout
    12 col · stacked · airy
    Open section →
    A restrained dark metrics list defined by vivid magenta serif headlines and crisp horizontal stat rows.
  9. 08

    showcase

    High-contrast split showcase juxtaposing pixelated geometric brand artwork against sleek, sparse dark-mode typography.

    Mood
    bold + clinical
    Layout
    12 col · split · airy
    Open section →
    High-contrast split showcase juxtaposing pixelated geometric brand artwork against sleek, sparse dark-mode typography.
  10. 09

    showcase

    A restrained dark project preview banner with quiet geometric branding and crisp typographic hierarchy.

    Mood
    quiet
    Layout
    16 col · split · balanced
    Open section →
    A restrained dark project preview banner with quiet geometric branding and crisp typographic hierarchy.
  11. 10

    showcase

    Strong

    A sleek, dark portfolio project row with understated typography and a masked emblem revealing subtle scenery.

    Mood
    quiet + luxurious
    Layout
    16 col · split · airy
    Open section →
    A sleek, dark portfolio project row with understated typography and a masked emblem revealing subtle scenery.
  12. 11

    showcase

    Sleek, dark portfolio case study banner pairing a compact mobile app preview with crisp, restrained typography.

    Mood
    quiet
    Layout
    16 col · split · airy
    Open section →
    Sleek, dark portfolio case study banner pairing a compact mobile app preview with crisp, restrained typography.
  13. 12

    showcase

    Minimalist dark portfolio entry pairing a compact geometric visual with clean, quiet typographic project details.

    Mood
    quiet + clinical
    Layout
    6 col · split · airy
    Open section →
    Minimalist dark portfolio entry pairing a compact geometric visual with clean, quiet typographic project details.
  14. 13

    showcase

    A dark, restrained case study preview card pairing concise editorial typography with a stark media thumbnail on the left.

    Mood
    quiet + editorial
    Layout
    16 col · split · balanced
    Open section →
    A dark, restrained case study preview card pairing concise editorial typography with a stark media thumbnail on the left.
  15. 14

    logo bar

    Minimalist text-only client roster on deep black, pairing subtle row dividers with an electric magenta serif header.

    Mood
    quiet + editorial
    Layout
    11 col · grid · balanced
    Open section →
    Minimalist text-only client roster on deep black, pairing subtle row dividers with an electric magenta serif header.
  16. 15

    footer

    Deep black typographic footer balancing an electric magenta serif wordmark with meticulous, airy centered service listings.

    Mood
    editorial + quiet
    Layout
    16 col · stacked · airy
    Open section →
    Deep black typographic footer balancing an electric magenta serif wordmark with meticulous, airy centered service listings.