MUUDS

Curated catalog of analyzed web design.

Neon

Engineering-first and technical. Deep black backgrounds and luminous waveforms give way to pale mint data-dense surfaces with Swiss typographic discipline.

Visit site

Colour

Background#000000
Text#ffffff
Accent#e4f1eb
Surface#111315
Muted#94979e

Typefaces

Display
Inter
Body
Inter
Mono
GeistMono
Source
self_hosted
Scale
10 · 12 · 13 · 14 · 16 · 20

Layout

Grid
16 columns
Container
1024px
Spacing base
4px
Radius
4px

Capture

Category
tools
Sections
10
Captured
2026-08-29
Rhythm
dark x3 → light → dark x3 → light → dark x2

Type rules

  • display headlines tracked tight at -0.04em
  • body measure limited to 76 characters

Colour rules

  • pale mint paper surfaces contrast against pitch black sections
  • secondary text uses muted grey tones for strict hierarchy

Voice rules

  • lead with infrastructure primitives
  • pair technical headlines with precise operational benefits

Holds it together

  • pale mint background panels reserved for high-density charts and proof points
  • monospace labels rendered uppercase above technical headlines
  • terminal commands housed in dark pill containers with inline prompts

Contrast

text on background21.0:1 AAA
muted text on background7.2:1 AAA
text on surface18.6:1 AAA
accent on background18.1:1 AAA
background on accent18.1:1 AAA

Type, measured

Body
13px / 1
Measure
76 characters
Display
80px / 1
Tracking
-0.04em display
Scale ratio
1.58

Voice

Tone
declarative, technical
Sentences
short
Person
second
Vocabulary
technical
Calls to action
get, read, start

Built with

Builder
Framework
next
Motion
WebGL
Nav
top_bar, 29 items
Length
10.4 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 deep black technical hero framed by glowing emerald vertical waveforms and sharp developer-focused typography.

    Mood
    clinical + bold
    Layout
    13 col · stacked · airy
    Open section →
    A deep black technical hero framed by glowing emerald vertical waveforms and sharp developer-focused typography.
  2. 01

    feature grid

    Strong

    A technical developer feature showcase pairing scanline micro-UI previews with concise infrastructure descriptions over a black substrate.

    Mood
    clinical + raw
    Layout
    5 col · grid · dense
    Open section →
    A technical developer feature showcase pairing scanline micro-UI previews with concise infrastructure descriptions over a black substrate.
  3. 02

    feature

    Precise dark developer feature section spotlighting an IDE terminal over a textured glowing halftone backdrop.

    Mood
    clinical + bold
    Layout
    1 col · stacked · airy
    Open section →
    Precise dark developer feature section spotlighting an IDE terminal over a textured glowing halftone backdrop.
  4. 03

    feature

    Strong

    A crisp, engineering-driven comparison chart on pale mint paper detailing autoscaling performance with Swiss typographic precision.

    Mood
    clinical + quiet
    Layout
    11 col · stacked · balanced
    Open section →
    A crisp, engineering-driven comparison chart on pale mint paper detailing autoscaling performance with Swiss typographic precision.
  5. 04

    feature

    A pitch-black developer feature section pairing crisp typography with a delicate, calibrated timeline grid.

    Mood
    clinical + quiet
    Layout
    16 col · stacked · airy
    Open section →
    A pitch-black developer feature section pairing crisp typography with a delicate, calibrated timeline grid.
  6. 05

    feature

    A stark, minimalist dark void anchored by a concise technical statement and a delicate dotted glyph.

    Mood
    quiet + clinical
    Layout
    16 col · asymmetric · airy
    Open section →
    A stark, minimalist dark void anchored by a concise technical statement and a delicate dotted glyph.
  7. 06

    feature grid

    Sleek and clinical dark feature matrix highlighting enterprise capabilities with subtle emerald icons and high typographic clarity.

    Mood
    clinical + quiet
    Layout
    16 col · grid · balanced
    Open section →
    Sleek and clinical dark feature matrix highlighting enterprise capabilities with subtle emerald icons and high typographic clarity.
  8. 07

    testimonial

    Strong

    Pale mint testimonial section pairing clean monospace quotes and fine hairline dividers with subtle grainy gradients.

    Mood
    clinical + editorial
    Layout
    2 col · split · airy
    Open section →
    Pale mint testimonial section pairing clean monospace quotes and fine hairline dividers with subtle grainy gradients.
  9. 08

    cta

    A dark, engineered statement section anchored by an intricate branching wireframe diagram and sharp terminal-inspired action buttons.

    Mood
    clinical + bold
    Layout
    10 col · split · balanced
    Open section →
    A dark, engineered statement section anchored by an intricate branching wireframe diagram and sharp terminal-inspired action buttons.
  10. 09

    footer

    A clean, dark multi-column technical footer structured with precise typography and a quiet, operational tone.

    Mood
    clinical + quiet
    Layout
    5 col · grid · balanced
    Open section →
    A clean, dark multi-column technical footer structured with precise typography and a quiet, operational tone.