SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Ycode

Deep black surfaces and disciplined typography evoke a stark, developer-first environment. Crisp UI previews and minimal hairline framing reinforce technical rigor and focus.

quietclinical
Visit site

Colour

Background#0a0a0a
Text#ffffff
Accent#48e54d
Surface#0a0a0a
Muted#ffffff

Typefaces

Display
Inter
Body
Inter
Mono
Geist Mono
Source
google
Scale
10 · 12 · 14 · 16 · 24 · 40

Layout

Grid
—
Container
—
Spacing base
4px
Radius
9999px · 12px

Capture

Category
tools
Sections
11
Captured
2026-08-29
Rhythm
dark x11

Type rules

  • display type set in sentence case with tight tracking
  • body text set at approximately 77 characters per measure

Colour rules

  • deep monochrome black background across entire canvas
  • accent green reserved solely for live indicators and subtle status marks

Voice rules

  • clear technical descriptions
  • concise feature points

Holds it together

  • maintain high-contrast white text on #0a0a0a throughout all sections
  • use pill-shaped borders for primary CTAs and badge labels
  • frame product surfaces with subtle hairline borders

Contrast

text on background19.8:1 AAA
muted text on background19.8:1 AAA
text on surface19.8:1 AAA
accent on background11.9:1 AAA
background on accent11.9:1 AAA

Type, measured

Body
16px / 1.6
Measure
77 characters
Display
72px / 1.1
Tracking
-0.02em display
Scale ratio
1.46

Voice

Tone
direct, technical, understated
Sentences
medium
Person
second
Vocabulary
developer-focused
Calls to action
get, open, start, join

Built with

Builder
—
Framework
next
Motion
—
WebGL
—
Nav
—
Length
7.6 screens

Sections in page order

3 marked strong · 11

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

  1. 00

    nav

    Minimalist dark navigation bar with clean developer-focused links, community icons, and subtle pill login button.

    Mood
    quiet + clinical
    Layout
    10 col · full bleed · airy
    Open section →
    Minimalist dark navigation bar with clean developer-focused links, community icons, and subtle pill login button.
  2. 01

    hero

    Minimalist, high-contrast dark hero section presenting an open-source tool with clean typography and pill action buttons.

    Mood
    clinical + quiet
    Layout
    6 col · stacked · airy
    Open section →
    Minimalist, high-contrast dark hero section presenting an open-source tool with clean typography and pill action buttons.
  3. 02

    showcase

    Strong

    A dark, clinical web builder interface framing an active light-themed website canvas within its workspace.

    Mood
    clinical + quiet
    Layout
    16 col · centered · balanced
    Open section →
    A dark, clinical web builder interface framing an active light-themed website canvas within its workspace.
  4. 03

    statement

    A sparse two-column text layout setting problem against thesis in muted, disciplined prose.

    Mood
    quiet + editorial
    Layout
    7 col · split · airy
    Open section →
    A sparse two-column text layout setting problem against thesis in muted, disciplined prose.
  5. 04

    feature grid

    Minimal dark developer onboarding section presenting a three-step self-hosting setup with simple icons and pill buttons.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    Minimal dark developer onboarding section presenting a three-step self-hosting setup with simple icons and pill buttons.
  6. 05

    feature

    Strong

    Minimal, deeply dark two-column feature list balancing AI model integrations against platform capabilities with clinical precision.

    Mood
    clinical + quiet
    Layout
    2 col · split · airy
    Open section →
    Minimal, deeply dark two-column feature list balancing AI model integrations against platform capabilities with clinical precision.
  7. 06

    pricing

    A stark, dark developer pricing grid contrasting open-source and managed cloud tiers against pure black negative space.

    Mood
    clinical + quiet
    Layout
    3 col · split · balanced
    Open section →
    A stark, dark developer pricing grid contrasting open-source and managed cloud tiers against pure black negative space.
  8. 07

    announcement

    A clean, dark timeline of recent software releases marked with a subtle luminous green status indicator.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    A clean, dark timeline of recent software releases marked with a subtle luminous green status indicator.
  9. 08

    testimonial

    A sleek dark-mode testimonial grid showcasing user reviews inside subtly bordered cards under a Discord community CTA.

    Mood
    clinical
    Layout
    3 col · grid · balanced
    Open section →
    A sleek dark-mode testimonial grid showcasing user reviews inside subtly bordered cards under a Discord community CTA.
  10. 09

    cta

    Strong

    Quiet, stark CTA section submerged in deep black with subtle metallic text illumination and paired pill action buttons.

    Mood
    quiet + bold
    Layout
    16 col · centered · airy
    Open section →
    Quiet, stark CTA section submerged in deep black with subtle metallic text illumination and paired pill action buttons.
  11. 10

    footer

    Sparse, dark footer with quiet typographic navigation columns and circular social icons set against expansive negative space.

    Mood
    quiet + clinical
    Layout
    16 col · split · airy
    Open section →
    Sparse, dark footer with quiet typographic navigation columns and circular social icons set against expansive negative space.