MUUDS

Curated catalog of analyzed web design.

Kyne Jang

Serene, airy editorial portfolio anchored by high-contrast serif typography and soft glowing orange gradient auras. Generous negative space and delicate bracketed uppercase labels create a quiet gallery-like elegance on an off-white canvas.

Visit site ↗

Colour

Background#f6f6f6
Text#2b2b2b
Surface#f6f6f6
Muted#bbbbbb

Typefaces

Display
PP Editorial Old Regular
Body
Apfel Grotezk
Mono
Source
self_hosted
Scale
13 · 16 · 24 · 28 · 40 · 100

Layout

Grid
12 columns
Container
1360px
Spacing base
10px
Radius
0px

Capture

Category
portfolio
Sections
6
Captured
2026-08-27
Rhythm
light x6

Type rules

  • display typography set in high-contrast serif with tight negative letterspacing
  • body text set in clean geometric sans-serif at 71 characters per line measure
  • eyebrows and index numbers enclosed in parentheses uppercase

Colour rules

  • monochrome text and background palette across all sections
  • chromatic warmth reserved exclusively for ambient gradient blurs at hero and footer edges

Voice rules

  • parenthesized uppercase text for all metadata and section labels
  • first-person personal intro with informal punctuation

Holds it together

  • enclose category tags, numbers, and navigation hints inside uppercase parentheses
  • use luminous warm gradient glows as atmospheric grounding at the vertical edges of the page
  • maintain uniform light off-white background across the entire length of the page

Contrast

text on background13.1:1 AAA
muted text on background1.8:1 fail
text on surface13.1:1 AAA

Type, measured

Body
16px / 1.5
Measure
71 characters
Display
128px / 1.2
Tracking
-0.06em display
Scale ratio
1.68

Voice

Tone
approachable, refined
Sentences
medium
Person
first
Vocabulary
plain
Calls to action
view, submit, explore

Built with

Builder
framer
Framework
Motion
lenis
WebGL
Nav
Length
8.2 screens

Colour, by area

#f6f6f6 0%#2b2b2b 0%#bbbbbb 0%#000000 0%

Sections in page order

3 strongest marked · 6

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

  1. 00

    hero

    An airy, minimalist personal hero centered on expressive high-contrast serif typography rising above a warm glowing gradient aura.

    Mood
    editorial + dreamy
    Layout
    14 col · centered · airy
    Open section →
    An airy, minimalist personal hero centered on expressive high-contrast serif typography rising above a warm glowing gradient aura.
  2. 01

    hero

    Luminous orange gradient haze rising beneath elegant editorial serif typography in an airy, gallery-like portfolio header.

    Mood
    dreamy + editorial
    Layout
    1 col · stacked · airy
    Open section →
    Luminous orange gradient haze rising beneath elegant editorial serif typography in an airy, gallery-like portfolio header.
  3. 02

    showcase

    Strongest

    Minimalist, typography-driven project index with quiet editorial restraint, structured as an airy split layout with numbered catalogue entries.

    Mood
    quiet + editorial
    Layout
    2 col · split · airy
    Open section →
    Minimalist, typography-driven project index with quiet editorial restraint, structured as an airy split layout with numbered catalogue entries.
  4. 03

    statement

    Strongest

    A serene editorial about section pairing dramatic high-contrast serif display typography with disciplined minimalist bio copy.

    Mood
    editorial + quiet
    Layout
    12 col · split · airy
    Open section →
    A serene editorial about section pairing dramatic high-contrast serif display typography with disciplined minimalist bio copy.
  5. 04

    testimonial

    Strongest

    An airy editorial testimonial section with staggered framed review cards and an expressive lowercase serif headline on pale grey.

    Mood
    quiet + editorial
    Layout
    2 col · asymmetric · airy
    Open section →
    An airy editorial testimonial section with staggered framed review cards and an expressive lowercase serif headline on pale grey.
  6. 05

    footer

    An airy editorial contact footer bathed in a warm ambient gradient blur, combining flowing italic display type with minimal line-based inputs.

    Mood
    dreamy + editorial
    Layout
    12 col · split · airy
    Open section →
    An airy editorial contact footer bathed in a warm ambient gradient blur, combining flowing italic display type with minimal line-based inputs.

More like this

by shared mood