SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Liveblocks

Clinical and engineered with high-contrast precision. Deep black surfaces anchor crisp white grotesk typography and hairline-bordered component matrices, illuminated by subtle gradient blooms behind interactive developer mockups.

clinicalboldquiet
Visit site

Colour

Background#000000
Text#ffffff
Accent#9f8dfc
Surface#141716
Muted#918d8d

Typefaces

Display
suisse
Body
suisse
Mono
JetBrains Mono
Source
self_hosted
Scale
10 · 11 · 12 · 14 · 16 · 20

Layout

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

Capture

Category
tools
Sections
10
Captured
2026-08-30
Rhythm
dark x10

Type rules

  • display headlines set in Suisse at negative tracking (-0.02em)
  • code blocks, terminal labels, and technical metadata rendered in JetBrains Mono
  • body copy maintained around 98 characters per measure for technical clarity

Colour rules

  • pitch black background remains uniform across all 10 sections
  • accent purple #9f8dfc reserved strictly for highlighted text tokens and badges
  • text hierarchy strictly stratified between crisp white #ffffff and muted grey #918d8d

Voice rules

  • lead with engineering infrastructure capabilities rather than marketing fluff
  • reference familiar industry products to explain technical capabilities

Holds it together

  • frame all technical feature modules in hairline-bordered dark cards
  • pair abstract backend concepts with interactive UI mockups of familiar apps
  • render all code implementations alongside their visual component output

Contrast

text on background21.0:1 AAA
muted text on background6.4:1 AA
text on surface18.0:1 AAA
accent on background7.7:1 AAA
background on accent7.7:1 AAA

Type, measured

Body
20px / 1.38
Measure
98 characters
Display
64px / 1.1
Tracking
-0.02em display
Scale ratio
1.34

Voice

Tone
technical, authoritative, concise
Sentences
short
Person
third
Vocabulary
technical
Calls to action
start, install, read, browse

Built with

Builder
—
Framework
next
Motion
—
WebGL
yes
Nav
top_bar, 2 items
Length
11.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

    Precise and stark developer-focused hero defined by high-contrast monochrome typography on deep black with subtle pill navigation.

    Mood
    clinical + bold
    Layout
    1 col · centered · airy
    Open section →
    Precise and stark developer-focused hero defined by high-contrast monochrome typography on deep black with subtle pill navigation.
  2. 01

    showcase

    Polished developer SaaS showcase blending crisp dark-mode interface mockups over hazy gradient textures into a sharp typographic statement.

    Mood
    bold + dreamy
    Layout
    1 col · stacked · balanced
    Open section →
    Polished developer SaaS showcase blending crisp dark-mode interface mockups over hazy gradient textures into a sharp typographic statement.
  3. 02

    showcase

    Sleek, engineered product showcase demonstrating familiar collaborative interfaces in a horizontal reel above clean declarative statement copy.

    Mood
    clinical + bold
    Layout
    1 col · stacked · balanced
    Open section →
    Sleek, engineered product showcase demonstrating familiar collaborative interfaces in a horizontal reel above clean declarative statement copy.
  4. 03

    feature grid

    Strong

    Sleek, dark-mode technical feature matrix framed in subtle hairline borders with precise typography and minimal product graphics.

    Mood
    clinical + quiet
    Layout
    2 col · grid · balanced
    Open section →
    Sleek, dark-mode technical feature matrix framed in subtle hairline borders with precise typography and minimal product graphics.
  5. 04

    feature grid

    Strong

    Precise dark grid layout framed by hairline borders and minimal typographic hierarchy.

    Mood
    clinical + quiet
    Layout
    2 col · grid · balanced
    Open section →
    Precise dark grid layout framed by hairline borders and minimal typographic hierarchy.
  6. 05

    statement

    Precise, understated developer messaging set against pure black with clean type hierarchy and weighted emphasis.

    Mood
    clinical + quiet
    Layout
    8 col · stacked · balanced
    Open section →
    Precise, understated developer messaging set against pure black with clean type hierarchy and weighted emphasis.
  7. 06

    feature

    A refined, technical developer showcase pairing a clean UI preview with its concise React implementation against deep black.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · balanced
    Open section →
    A refined, technical developer showcase pairing a clean UI preview with its concise React implementation against deep black.
  8. 07

    testimonial

    Strong

    Crisp dark-mode developer card pairing a featured customer testimonial with a minimal bordered grid of infrastructure capabilities.

    Mood
    clinical + quiet
    Layout
    2 col · grid · balanced
    Open section →
    Crisp dark-mode developer card pairing a featured customer testimonial with a minimal bordered grid of infrastructure capabilities.
  9. 08

    cta

    An austere, pitch-black transitional section anchored by a subtle horizontal divider line.

    Mood
    quiet + raw
    Layout
    1 col · centered · airy
    Open section →
    An austere, pitch-black transitional section anchored by a subtle horizontal divider line.
  10. 09

    footer

    A dense, structured dark footer organizing extensive technical documentation and developer ecosystem links into clear monochromatic columns.

    Mood
    clinical + quiet
    Layout
    4 col · grid · dense
    Open section →
    A dense, structured dark footer organizing extensive technical documentation and developer ecosystem links into clear monochromatic columns.

More like this

by shared mood