SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Carbon

Disciplined and engineered dark mode aesthetic. Restrained near-black surfaces create a focused backdrop for floating dashboard UI components, layered charts, and crisp typography. Electric blue interactive elements cut through the low-contrast slate environment with clinical efficiency.

clinicalquiet
Visit site

Colour

Background#040507
Text#ffffff
Accent#0066ff
Surface#0c0d0f
Muted#a6a6a6

Typefaces

Display
Inter
Body
Inter
Mono
—
Source
self_hosted
Scale
14 · 16 · 18 · 32 · 42 · 64

Layout

Grid
—
Container
—
Spacing base
4px
Radius
8px · 12px · 16px

Capture

Category
saas
Sections
16
Captured
2026-08-29
Rhythm
dark x16

Type rules

  • display type set in sentence case with tight negative tracking (-0.031em)
  • body text set at 16px with relaxed 1.63 line-height
  • section category labels always set in uppercase tracked out sans-serif

Colour rules

  • pure deep dark backgrounds throughout with no light surface alternations
  • electric blue #0066ff reserved strictly for high-priority interactive buttons
  • low-contrast muted grey #a6a6a6 handles all secondary copy and interface details

Voice rules

  • lead with direct capability claims followed by short supporting clauses
  • use simple uppercase category tags above core section headlines

Holds it together

  • keep the background consistently dark across every section with no alternating light blocks
  • apply electric blue only to primary call-to-action buttons and key highlighted interactions
  • structure feature showcases around floating UI mockups, dark command cards, or wireframe assets
  • label sections with an uppercase muted category eyebrow above the main headline

Contrast

text on background20.4:1 AAA
muted text on background8.4:1 AAA
text on surface19.4:1 AAA
accent on background4.2:1 AA Large
background on accent4.2:1 AA Large

Type, measured

Body
16px / 1.63
Measure
93 characters
Display
64px / 1.13
Tracking
-0.031em display
Scale ratio
1.41

Voice

Tone
declarative, structured, direct
Sentences
short
Person
second
Vocabulary
technical
Calls to action
get, watch, learn, read

Built with

Builder
framer
Framework
—
Motion
—
WebGL
—
Nav
top_bar, 5 items
Length
14.4 screens

Sections in page order

3 marked strong · 16

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

  1. 00

    hero

    A dark, highly structured developer dashboard hero featuring a subtle grid background and a prominent software UI mockup.

    Mood
    clinical + bold
    Layout
    1 col · stacked · balanced
    Open section →
    A dark, highly structured developer dashboard hero featuring a subtle grid background and a prominent software UI mockup.
  2. 01

    feature

    Strong

    A refined dark SaaS feature showcase pairing an interactive feature list with a sleek floating chat mockup.

    Mood
    clinical + quiet
    Layout
    2 col · split · balanced
    Open section →
    A refined dark SaaS feature showcase pairing an interactive feature list with a sleek floating chat mockup.
  3. 02

    feature

    A dark, restrained SaaS feature section pairing floating UI mockup cards with clean typography and a vibrant blue action button.

    Mood
    clinical + quiet
    Layout
    15 col · split · balanced
    Open section →
    A dark, restrained SaaS feature section pairing floating UI mockup cards with clean typography and a vibrant blue action button.
  4. 03

    feature

    Dark, restrained fintech feature section pairing minimal copy with layered, low-contrast UI wave charts.

    Mood
    clinical + quiet
    Layout
    2 col · split · balanced
    Open section →
    Dark, restrained fintech feature section pairing minimal copy with layered, low-contrast UI wave charts.
  5. 04

    feature

    Sleek and subdued dark mode feature block showcasing financial interface mockups alongside concise copy and a vivid blue CTA.

    Mood
    clinical + quiet
    Layout
    11 col · split · airy
    Open section →
    Sleek and subdued dark mode feature block showcasing financial interface mockups alongside concise copy and a vivid blue CTA.
  6. 05

    feature

    Strong

    Sleek, dark-mode feature showcase centered around a command palette UI overlaid on an engineered keyboard graphic.

    Mood
    clinical + quiet
    Layout
    13 col · stacked · balanced
    Open section →
    Sleek, dark-mode feature showcase centered around a command palette UI overlaid on an engineered keyboard graphic.
  7. 06

    feature grid

    A disciplined, deep-black feature grid with delicate circular icon badges and center-aligned technical copy.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    A disciplined, deep-black feature grid with delicate circular icon badges and center-aligned technical copy.
  8. 07

    showcase

    Sleek and restrained dark-mode SaaS feature section anchoring direct value copy against a glowing product dashboard mockup.

    Mood
    clinical + bold
    Layout
    2 col · split · balanced
    Open section →
    Sleek and restrained dark-mode SaaS feature section anchoring direct value copy against a glowing product dashboard mockup.
  9. 08

    feature

    Sleek, high-contrast dark mode feature showcase pairing a mobile app mockup with clean feature bullet points and store badges.

    Mood
    clinical + quiet
    Layout
    2 col · split · balanced
    Open section →
    Sleek, high-contrast dark mode feature showcase pairing a mobile app mockup with clean feature bullet points and store badges.
  10. 09

    feature

    Dark minimal integrations feature section pairing structured copy and a bright blue CTA with a floating column of geometric icon tiles.

    Mood
    clinical + quiet
    Layout
    14 col · split · airy
    Open section →
    Dark minimal integrations feature section pairing structured copy and a bright blue CTA with a floating column of geometric icon tiles.
  11. 10

    testimonial

    Sleek dark-mode testimonial section featuring centered social proof copy over a dotted wireframe globe with customer quote cards below.

    Mood
    clinical + quiet
    Layout
    1 col · stacked · balanced
    Open section →
    Sleek dark-mode testimonial section featuring centered social proof copy over a dotted wireframe globe with customer quote cards below.
  12. 11

    pricing

    Sleek and highly structured dark-mode pricing grid featuring three distinct tier cards with electric blue call-to-action buttons.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    Sleek and highly structured dark-mode pricing grid featuring three distinct tier cards with electric blue call-to-action buttons.
  13. 12

    feature grid

    A clean dark-mode blog grid featuring moody technology photography and understated sans-serif typography.

    Mood
    quiet + clinical
    Layout
    12 col · grid · balanced
    Open section →
    A clean dark-mode blog grid featuring moody technology photography and understated sans-serif typography.
  14. 13

    stats

    A dark, disciplined stats container displaying large gradient-filled figures against a subtle gridded background.

    Mood
    clinical + quiet
    Layout
    4 col · grid · airy
    Open section →
    A dark, disciplined stats container displaying large gradient-filled figures against a subtle gridded background.
  15. 14

    faq

    Strong

    A stark, minimalist dark-mode FAQ section centered with quiet precision and rounded accordion cards.

    Mood
    quiet + clinical
    Layout
    1 col · centered · airy
    Open section →
    A stark, minimalist dark-mode FAQ section centered with quiet precision and rounded accordion cards.
  16. 15

    footer

    A clean, dark, minimalist footer with precise typographic column alignment and understated branding.

    Mood
    quiet + clinical
    Layout
    12 col · grid · airy
    Open section →
    A clean, dark, minimalist footer with precise typographic column alignment and understated branding.