MUUDS

Curated catalog of analyzed web design.

Irene Butenko

Austere and gallery-like Swiss minimalism. The off-white background and tightly tracked grotesque typography create immense calm and editorial authority. Asymmetric layouts, vast negative space, and delicate hairline rules let portfolio media command full attention.

Visit site

Colour

Background#f6f6f6
Text#191919
Accent#191919
Surface#ffffff
Muted#191919

Typefaces

Display
General Sans
Body
General Sans
Mono
Source
self_hosted
Scale
14 · 16 · 20 · 40 · 53 · 122

Layout

Grid
12 columns
Container
1386px
Spacing base
8px
Radius
0px · 4px

Capture

Category
portfolio
Sections
10
Captured
2026-08-29
Rhythm
light x10

Type rules

  • display type set in sentence case with tight negative tracking and line height below 1.0
  • body text runs at a 77-character measure with negative tracking (-0.022em)
  • section anchors and metadata labels occupy the left rail in small font sizes

Colour rules

  • strictly monochrome palette dominated by 91 percent off-white background with solid dark text
  • no chromatic accent colors; hierarchy is established entirely through type scale and thin borders

Voice rules

  • first-person narration for personal perspective and bio copy
  • interactive actions and navigation links are prefixed with a curved arrow symbol

Holds it together

  • prefix interactive text links and secondary navigation items with a curved arrow symbol (↳)
  • anchor major headings and narrative content to the right side of the grid, leaving the left column for quiet section labels
  • use 1px dark hairline borders to structure tables, client grids, and service blocks without visual weight

Contrast

text on background16.3:1 AAA
muted text on background16.3:1 AAA
text on surface17.6:1 AAA
accent on background16.3:1 AAA
background on accent16.3:1 AAA

Type, measured

Body
20px / 1.08
Measure
77 characters
Display
122px / 0.8
Tracking
-0.074em display
Scale ratio
1.57

Voice

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

Built with

Builder
webflow
Framework
Motion
gsap
WebGL
Nav
top_bar, 6 items
Length
6.5 screens

Sections in page order

3 marked strong · 10

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

  1. 00

    hero

    A quiet, highly restrained editorial portfolio intro with crisp typography anchored to the right edge and vast negative space on the left.

    Mood
    quiet + editorial
    Layout
    16 col · asymmetric · airy
    Open section →
    A quiet, highly restrained editorial portfolio intro with crisp typography anchored to the right edge and vast negative space on the left.
  2. 01

    announcement

    A utilitarian dark cookie consent banner sits grounded against a light backdrop of archived website thumbnails.

    Mood
    clinical + quiet
    Layout
    1 col · split · dense
    Open section →
    A utilitarian dark cookie consent banner sits grounded against a light backdrop of archived website thumbnails.
  3. 02

    statement

    Strong

    Minimal, airy portfolio statement section driven entirely by crisp Swiss typography and oversized numerical stats.

    Mood
    quiet + editorial
    Layout
    12 col · asymmetric · airy
    Open section →
    Minimal, airy portfolio statement section driven entirely by crisp Swiss typography and oversized numerical stats.
  4. 03

    showcase

    A clean, airy agency portfolio showcase with asymmetric card scaling and minimal typography on an off-white canvas.

    Mood
    quiet + editorial
    Layout
    12 col · asymmetric · airy
    Open section →
    A clean, airy agency portfolio showcase with asymmetric card scaling and minimal typography on an off-white canvas.
  5. 04

    logo bar

    Strong

    A clean, airy client logo grid grounded by subtle card containers and balanced by an offset editorial headline.

    Mood
    quiet + editorial
    Layout
    16 col · grid · airy
    Open section →
    A clean, airy client logo grid grounded by subtle card containers and balanced by an offset editorial headline.
  6. 05

    feature

    An airy, quiet services list built with vast negative space, fine dividers, and a strict Swiss-inspired typographic layout.

    Mood
    quiet + clinical
    Layout
    12 col · asymmetric · airy
    Open section →
    An airy, quiet services list built with vast negative space, fine dividers, and a strict Swiss-inspired typographic layout.
  7. 06

    showcase

    An austere, airy awards ledger rendered with refined Swiss typography and understated tabular precision.

    Mood
    quiet + clinical
    Layout
    12 col · grid · airy
    Open section →
    An austere, airy awards ledger rendered with refined Swiss typography and understated tabular precision.
  8. 07

    testimonial

    Strong

    Spacious, Swiss-inspired testimonial slider with fine grid lines, quiet typography, and generous negative space.

    Mood
    quiet + editorial
    Layout
    1 col · asymmetric · airy
    Open section →
    Spacious, Swiss-inspired testimonial slider with fine grid lines, quiet typography, and generous negative space.
  9. 08

    cta

    A whisper-quiet, minimalist contact invitation that pairs an off-center headline with vast negative space.

    Mood
    quiet
    Layout
    16 col · asymmetric · airy
    Open section →
    A whisper-quiet, minimalist contact invitation that pairs an off-center headline with vast negative space.
  10. 09

    footer

    Clean, minimal light-mode footer with delicate branching arrows and airy tabular columns.

    Mood
    quiet
    Layout
    12 col · grid · airy
    Open section →
    Clean, minimal light-mode footer with delicate branching arrows and airy tabular columns.