MUUDS

Curated catalog of analyzed web design.

Trionn

Atmospheric, deep-space minimalism anchored by pitch-black backgrounds, floating 3D geometric artifacts, and massive sentence-case typography. High contrast between crisp white letterforms and deep dark surfaces creates an immersive, cinematic studio presence.

Visit site

Colour

Background#040508
Text#ffffff
Accent#d8d8d8
Surface#0c0c0c
Muted#434343

Typefaces

Display
familjen
Body
neueHaas
Mono
martianMono
Source
self_hosted
Scale
13 · 15 · 16 · 27 · 32 · 50

Layout

Grid
Container
Spacing base
8px
Radius
9999px

Capture

Category
studio
Sections
4
Captured
2026-08-29
Rhythm
dark x3 → light

Type rules

  • display headlines render in sentence case with tight negative tracking
  • body text stays constrained to 50 characters per line at 1.5 line-height
  • metadata, navigation, and badges use uppercase mono or sans with generous tracking

Colour rules

  • deep void black (#040508) dominates the canvas with dark surface (#0c0c0c) transitions
  • text hierarchy relies strictly on white (#ffffff) fading to muted grey (#434343) without chromatic accents

Voice rules

  • lead with short declarative sentences punctuated by periods
  • use all-caps tracked microcopy for navigational prompts and badge metadata

Holds it together

  • render large scale typography in sentence case with tight letter spacing against black backgrounds
  • encapsulate primary interactive triggers in rounded pill shapes with hairline borders
  • punctuate expansive dark sections with an abrupt light silver editorial panel to break rhythm

Contrast

text on background20.4:1 AAA
muted text on background2.1:1 fail
text on surface19.6:1 AAA
accent on background14.3:1 AAA
background on accent14.3:1 AAA

Type, measured

Body
16px / 1.5
Measure
50 characters
Display
132px / 1
Tracking
-0.08em display
Scale ratio
1.69

Voice

Tone
confident, visionary, concise
Sentences
short
Person
first
Vocabulary
curated
Calls to action
discuss, book, explore, view

Built with

Builder
Framework
next
Motion
lenis, swiper
WebGL
yes
Nav
sticky_top_bar, 1 items, sticky
Length
13.8 screens

Sections in page order

3 marked strong · 4

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

  1. 00

    hero

    Strong

    A shadowy, atmospheric hero with floating 3D geometric shards and glowing accents anchored by a stark pill-shaped navigation bar.

    Mood
    dreamy + clinical
    Layout
    1 col · full bleed · airy
    Open section →
    A shadowy, atmospheric hero with floating 3D geometric shards and glowing accents anchored by a stark pill-shaped navigation bar.
  2. 01

    statement

    Strong

    A moody, cinematic dark section with immense negative space and high-contrast typographic statements.

    Mood
    bold + quiet
    Layout
    1 col · stacked · airy
    Open section →
    A moody, cinematic dark section with immense negative space and high-contrast typographic statements.
  3. 02

    statement

    Vast, pitch-black space offset by a precise, understated mission statement and link tucked into the upper right corner.

    Mood
    quiet + clinical
    Layout
    12 col · asymmetric · airy
    Open section →
    Vast, pitch-black space offset by a precise, understated mission statement and link tucked into the upper right corner.
  4. 03

    stats

    Strong

    Minimalist, editorial key facts section pairing surreal portraiture cards with monochrome client proofs and an offset narrative testimonial.

    Mood
    editorial + quiet
    Layout
    16 col · stacked · balanced
    Open section →
    Minimalist, editorial key facts section pairing surreal portraiture cards with monochrome client proofs and an offset narrative testimonial.