MUUDS

Curated catalog of analyzed web design.

Linear

Engineered, razor-sharp, and rigorously restrained. Deep pitch-black surfaces are punctuated by crisp typography, subtle hairline borders, and intricate, authentic software UI mockups. The atmosphere is that of a high-performance precision instrument built by and for obsessive craftspeople.

Visit site

Colour

Background#08090a
Text#f7f8f8
Accent#e4f222
Surface#0f1011
Muted#8a8f98

Typefaces

Display
Inter Variable
Body
Inter Variable
Mono
Berkeley Mono
Source
self_hosted
Scale
10 · 12 · 14 · 16 · 20 · 24

Layout

Grid
Container
Spacing base
4px
Radius
4px · 8px

Capture

Category
tools
Sections
13
Captured
2026-08-29
Rhythm
unbroken dark canvas with layered surface panels and dense interface showcases

Type rules

  • display headlines set in sentence-case sans with negative tracking at 72px
  • technical labels, metadata, and figure tags rendered in Berkeley Mono uppercase

Colour rules

  • deep pitch-black background with subtle off-black surfaces for interactive tool containers
  • monochromatic white and grey text hierarchy with bright accents restricted strictly to UI status pills

Voice rules

  • deliver uncompromisingly declarative assertions about engineering speed and quality
  • pair concise feature category names with functional two-line explanatory copy

Holds it together

  • surround complex product UI frames with expansive pitch-black negative space
  • pair two-line split section headers on the left with concise explanatory summaries on the right
  • render architectural schematics and feature diagrams as clean hairline wireframes

Contrast

text on background18.7:1 AAA
muted text on background6.1:1 AA
text on surface17.9:1 AAA
accent on background16.1:1 AAA
background on accent16.1:1 AAA

Type, measured

Body
14px / 1.71
Measure
93 characters
Display
72px / 1
Tracking
-0.022em display
Scale ratio
1.51

Voice

Tone
declarative, precise, austere
Sentences
short
Person
third
Vocabulary
technical
Calls to action
learn, sign, view

Built with

Builder
Framework
next
Motion
WebGL
Nav
top_bar, 9 items
Length
11.1 screens

Sections in page order

3 marked strong · 13

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

  1. 00

    hero

    Stark dark minimalist hero anchored by precise typography and expansive negative space.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · airy
    Open section →
    Stark dark minimalist hero anchored by precise typography and expansive negative space.
  2. 01

    statement

    Ultra-precise dark interface showcase paired with crisp corporate logos and a monumental declarative statement on software craftsmanship.

    Mood
    clinical + bold
    Layout
    1 col · stacked · balanced
    Open section →
    Ultra-precise dark interface showcase paired with crisp corporate logos and a monumental declarative statement on software craftsmanship.
  3. 02

    feature grid

    Strong

    Precise, clinical feature grid pairing minimalist wireframe technical diagrams with disciplined, subdued typography.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    Precise, clinical feature grid pairing minimalist wireframe technical diagrams with disciplined, subdued typography.
  4. 03

    feature

    Dark, clinical feature header pairing a bold white title on the left with concise explanatory copy and an inline link on the right.

    Mood
    clinical + quiet
    Layout
    2 col · split · airy
    Open section →
    Dark, clinical feature header pairing a bold white title on the left with concise explanatory copy and an inline link on the right.
  5. 04

    feature

    Strong

    Ultra-precise dark interface demo floating an interactive chat issue generator over a deeply recessed task board with quiet typographic navigation below.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · dense
    Open section →
    Ultra-precise dark interface demo floating an interactive chat issue generator over a deeply recessed task board with quiet typographic navigation below.
  6. 05

    feature

    Clean, disciplined dark-mode section header with generous negative space and precise split typography.

    Mood
    clinical + quiet
    Layout
    2 col · split · airy
    Open section →
    Clean, disciplined dark-mode section header with generous negative space and precise split typography.
  7. 06

    feature

    Dense, dark clinical product UI showcasing precision data charts and timeline roadmaps with subtle cyan data points and understated feature links.

    Mood
    clinical + quiet
    Layout
    1 col · split · dense
    Open section →
    Dense, dark clinical product UI showcasing precision data charts and timeline roadmaps with subtle cyan data points and understated feature links.
  8. 07

    feature

    A stark, clinical split header pairing crisp typography on a pitch-black canvas with quiet precision.

    Mood
    clinical + quiet
    Layout
    2 col · split · airy
    Open section →
    A stark, clinical split header pairing crisp typography on a pitch-black canvas with quiet precision.
  9. 08

    showcase

    Technical dark-mode interface mockups showcasing agentic AI workflows with extreme precision and restraint.

    Mood
    clinical + quiet
    Layout
    1 col · grid · dense
    Open section →
    Technical dark-mode interface mockups showcasing agentic AI workflows with extreme precision and restraint.
  10. 09

    feature

    A stark, high-precision dark mode header pairing clean grotesque typography with technical product copy.

    Mood
    clinical + quiet
    Layout
    16 col · split · balanced
    Open section →
    A stark, high-precision dark mode header pairing clean grotesque typography with technical product copy.
  11. 10

    showcase

    Strong

    Dense, dark clinical developer tool interface pairing an issue tracker with an inline code diff mockup.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · dense
    Open section →
    Dense, dark clinical developer tool interface pairing an issue tracker with an inline code diff mockup.
  12. 11

    announcement

    A precision-engineered dark timeline changelog displaying recent product updates across a four-column horizontal layout.

    Mood
    clinical + quiet
    Layout
    4 col · grid · balanced
    Open section →
    A precision-engineered dark timeline changelog displaying recent product updates across a four-column horizontal layout.
  13. 12

    announcement

    Sparse, dark changelog row featuring subdued typography and monospace release dates against a pitch-black backdrop.

    Mood
    clinical + quiet
    Layout
    1 col · grid · airy
    Open section →
    Sparse, dark changelog row featuring subdued typography and monospace release dates against a pitch-black backdrop.