SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Wicked Blocks

A clinical, tool-first component directory built for rapid visual parsing. Off-white card surfaces and hairline borders recede completely, letting monochrome and gradient UI specimens serve as the sole graphic elements. The layout feels like an orderly, distraction-free developer workbench.

clinicalquiet
Visit site

Colour

Background#f9fafb
Text#27272a
Accent#27272a
Surface#ffffff
Muted#71717a

Typefaces

Display
Inter Variable
Body
Inter Variable
Mono
SFMono-Regular
Source
self_hosted
Scale
12 · 14 · 16 · 18 · 24

Layout

Grid
3 columns
Container
940px
Spacing base
4px
Radius
4px · 6px

Capture

Category
tools
Sections
16
Captured
2026-08-30
Rhythm
light x16

Type rules

  • body measure stays constrained around 78 characters per line
  • display scale remains tight and restrained with a maximum size of 24px

Colour rules

  • near-monochrome interface relying purely on zinc neutral tones over an off-white background
  • structural chrome contains zero saturation to let preview specimens supply all visual variety

Voice rules

  • lead with immediate utilitarian benefit and component quantity
  • tag list items with exact count badges rather than descriptive copy

Holds it together

  • sidebar taxonomy lists category tags with exact item counts enclosed in light pills
  • component specimens render inside uniform rounded white preview cards across a multi-column grid
  • avoid decorative UI chrome—use plain zinc text and hairline borders for all structural elements

Contrast

text on background14.3:1 AAA
muted text on background4.6:1 AA
text on surface14.9:1 AAA
accent on background14.3:1 AAA
background on accent14.3:1 AAA

Type, measured

Body
18px / 1.56
Measure
78 characters
Display
24px / 1.33
Tracking
-0.025em display
Scale ratio
1.07

Voice

Tone
utilitarian, plain
Sentences
short
Person
third
Vocabulary
plain
Calls to action
copy, download, signup

Built with

Builder
—
Framework
astro
Motion
—
WebGL
—
Nav
—
Length
10.7 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

    Clean, utilitarian directory interface presenting a catalog of UI component previews in a neat, subdued grid.

    Mood
    clinical + quiet
    Layout
    1 col · split · balanced
    Open section →
    Clean, utilitarian directory interface presenting a catalog of UI component previews in a neat, subdued grid.
  2. 01

    gallery

    Strong

    Clean, disciplined component catalog displaying structured web templates with stark monochrome imagery and a quiet taxonomic sidebar.

    Mood
    clinical + quiet
    Layout
    12 col · grid · airy
    Open section →
    Clean, disciplined component catalog displaying structured web templates with stark monochrome imagery and a quiet taxonomic sidebar.
  3. 02

    gallery

    A dense, clinical multi-column showcase grid displaying monochromatic website template wireframes and celestial imagery on an off-white canvas.

    Mood
    clinical + quiet
    Layout
    3 col · grid · dense
    Open section →
    A dense, clinical multi-column showcase grid displaying monochromatic website template wireframes and celestial imagery on an off-white canvas.
  4. 03

    showcase

    Strong

    An understated catalog grid showcasing clean, monochrome UI templates floating across a pale grey canvas.

    Mood
    quiet + clinical
    Layout
    3 col · grid · balanced
    Open section →
    An understated catalog grid showcasing clean, monochrome UI templates floating across a pale grey canvas.
  5. 04

    gallery

    A clinical, neatly organized multi-column showcase of monochrome wireframe components and page templates arranged across a clean grey grid.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A clinical, neatly organized multi-column showcase of monochrome wireframe components and page templates arranged across a clean grey grid.
  6. 05

    gallery

    A quiet, clinical monochrome gallery showcasing an array of minimal web component layouts.

    Mood
    quiet + clinical
    Layout
    3 col · grid · airy
    Open section →
    A quiet, clinical monochrome gallery showcasing an array of minimal web component layouts.
  7. 06

    showcase

    A clean, clinical component showcase presenting a dense three-column gallery of monochrome UI templates.

    Mood
    clinical + quiet
    Layout
    3 col · grid · dense
    Open section →
    A clean, clinical component showcase presenting a dense three-column gallery of monochrome UI templates.
  8. 07

    showcase

    A clean, clinical showcase of monochromatic UI layout blocks and template previews arranged in a sparse grid.

    Mood
    clinical + quiet
    Layout
    16 col · grid · balanced
    Open section →
    A clean, clinical showcase of monochromatic UI layout blocks and template previews arranged in a sparse grid.
  9. 08

    showcase

    Strong

    An orderly, quiet masonry showcase displaying an array of minimalist monochrome layout cards anchored by high-contrast lunar photography.

    Mood
    quiet + clinical
    Layout
    3 col · grid · dense
    Open section →
    An orderly, quiet masonry showcase displaying an array of minimalist monochrome layout cards anchored by high-contrast lunar photography.
  10. 09

    showcase

    A systematic, clean catalog of monochrome UI wireframes and design components arranged across an orderly multi-column grid.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    A systematic, clean catalog of monochrome UI wireframes and design components arranged across an orderly multi-column grid.
  11. 10

    gallery

    A modular, clinical gallery grid displaying a crisp collection of UI component blocks and interface patterns.

    Mood
    clinical + quiet
    Layout
    3 col · grid · dense
    Open section →
    A modular, clinical gallery grid displaying a crisp collection of UI component blocks and interface patterns.
  12. 11

    showcase

    A clean, modular showcase of UI component cards and layouts tiled across an off-white canvas.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A clean, modular showcase of UI component cards and layouts tiled across an off-white canvas.
  13. 12

    gallery

    A structured gallery grid previewing diverse UI component layouts with vibrant gradient placeholders.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A structured gallery grid previewing diverse UI component layouts with vibrant gradient placeholders.
  14. 13

    showcase

    A clean, modular component gallery showcasing responsive UI block variations with bright gradient placeholders.

    Mood
    clinical + quiet
    Layout
    3 col · grid · balanced
    Open section →
    A clean, modular component gallery showcasing responsive UI block variations with bright gradient placeholders.
  15. 14

    gallery

    An expansive grid gallery showcasing a structured UI library of clean wireframe templates, cards, and gradient components.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    An expansive grid gallery showcasing a structured UI library of clean wireframe templates, cards, and gradient components.
  16. 15

    showcase

    Clean, modular component specimens displaying blog card layouts with calm green-to-blue gradient preview blocks.

    Mood
    clinical + quiet
    Layout
    3 col · grid · airy
    Open section →
    Clean, modular component specimens displaying blog card layouts with calm green-to-blue gradient preview blocks.

More like this

by shared mood