MUUDS

Curated catalog of analyzed web design.

Pablo Miguez

Aggressive, technically precise, and starkly monochromatic. Massive display typography and dark-mode brutalist grids collide with fluid motion graphics and stippled particle maps. Single inverted cream panels pierce the void to anchor the viewer's gaze.

Visit site

Colour

Background#0a0a0a
Text#ffffff
Accent#f880c8
Surface#131313
Muted#999999

Typefaces

Display
Science Gothic
Body
Inter
Mono
Source
self_hosted
Scale
14 · 16 · 18 · 23 · 28 · 32

Layout

Grid
16 columns
Container
1311px
Spacing base
8px
Radius
0px

Capture

Category
portfolio
Sections
6
Captured
2026-08-29
Rhythm
dark x6

Type rules

  • display headlines set in massive geometric uppercase with tight letter-spacing
  • body text constrained to a 47-character line measure with negative tracking
  • metadata and section tags set in small uppercase tracking

Colour rules

  • deep black background dominates across all sections
  • invert selected modular cards to cream surface with dark text for focal emphasis
  • accent pink appears only as subtle point markers and interactive highlights

Voice rules

  • speak directly from the developer perspective in first person
  • keep descriptions grounded in technical stack and design rationale

Holds it together

  • display type is always uppercase and stacked vertically at scale
  • cards use zero border radius with stark contrast boundaries
  • each skill or feature card starts with a zero-padded index numeral

Contrast

text on background19.8:1 AAA
muted text on background7.0:1 AA
text on surface18.6:1 AAA
accent on background8.4:1 AAA
background on accent8.4:1 AAA

Type, measured

Body
23px / 1.4
Measure
47 characters
Display
199px / 0.8
Tracking
-0.04em display
Scale ratio
1.72

Voice

Tone
confident, technical, direct
Sentences
short
Person
first
Vocabulary
technical
Calls to action
aceptar, rechazar, scroll

Built with

Builder
Framework
next
Motion
WebGL
yes
Nav
sticky_top_bar, 7 items, sticky
Length
11.6 screens

Sections in page order

3 marked strong · 6

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

  1. 00

    hero

    A stark monochrome hero featuring a stippled map backdrop and centered portrait overlaid by a bold, wide cookie consent banner.

    Mood
    raw + bold
    Layout
    1 col · stacked · dense
    Open section →
    A stark monochrome hero featuring a stippled map backdrop and centered portrait overlaid by a bold, wide cookie consent banner.
  2. 01

    statement

    Strong

    A stealthy dark statement block filled with massive, low-contrast geometric uppercase type.

    Mood
    quiet + bold
    Layout
    16 col · stacked · balanced
    Open section →
    A stealthy dark statement block filled with massive, low-contrast geometric uppercase type.
  3. 02

    feature grid

    Strong

    High-contrast modular card grid with an inverted cream focal panel and technical Swiss-inspired typography.

    Mood
    bold + raw
    Layout
    15 col · grid · airy
    Open section →
    High-contrast modular card grid with an inverted cream focal panel and technical Swiss-inspired typography.
  4. 03

    feature

    A quiet, starkly minimal dark-mode resume layout organized with delicate typographic hierarchy and generous negative space.

    Mood
    quiet + clinical
    Layout
    14 col · split · airy
    Open section →
    A quiet, starkly minimal dark-mode resume layout organized with delicate typographic hierarchy and generous negative space.
  5. 04

    statement

    Strong

    Massive, staggered typographic blocks cut across a pitch-black canvas with aggressive structural presence.

    Mood
    bold + raw
    Layout
    16 col · asymmetric · balanced
    Open section →
    Massive, staggered typographic blocks cut across a pitch-black canvas with aggressive structural presence.
  6. 05

    showcase

    Ultra-minimalist dark strip featuring sparse perimeter metadata that evokes a quiet, gallery-like catalog entry.

    Mood
    quiet + clinical
    Layout
    12 col · split · airy
    Open section →
    Ultra-minimalist dark strip featuring sparse perimeter metadata that evokes a quiet, gallery-like catalog entry.