SearchSubmit
MUUDS

Curated catalog of analyzed web design.

blacksmith-sh

High-voltage developer tool aesthetic combining electric acid yellow with technical blueprint grids and terminal code diffs. Monospace metadata markers and wireframe cards convey raw computational speed and developer-first utility.

rawboldclinical
Visit site

Rated

6.4/ 10

From 11 analysed sections. Two measured components and one judged by a model. Distinction is a rank within the library; the rest are scores in their own right.

AI scorejudged
9.4
Systemmeasured
4.4
Distinctionmeasured
2.6
on the grid
32%
vertical rhythm
60%
type on a scale
44%
contrast passing AA
40%
unlike the library
0.20
model craft
7.9/10
model deviation
5.7/10

Colour

Background#f5f5f5
Text#202020
Accent#f0fb29
Surface#000000
Muted#333333

Typefaces

Display
IBM Plex Sans
Body
IBM Plex Sans
Mono
IBM Plex Mono
Source
google
Scale
12 · 14 · 16 · 18 · 20 · 24

Layout

Grid
—
Container
—
Spacing base
8px
Radius
0px · 9999px

Capture

Category
tools
Sections
11
Captured
2026-08-30
Rhythm
acid yellow → light grey x2 → dark → light grey x4 → acid yellow x2

Type rules

  • display headers set with tight line-height and negative tracking
  • technical metadata, badges, and section eyebrows formatted in uppercase monospace
  • body text restricted to narrow measures for rapid scanning

Colour rules

  • high-voltage acid yellow (#f0fb29) serves as the full-bleed canvas for hero, CTA, and footer bookends
  • internal content sections use neutral light grey (#f5f5f5) structured with stark dark (#202020) wireframe borders
  • accent blue (#aee3fd) is reserved strictly for diff additions and code highlighting

Voice rules

  • short declarative technical statements with exact numerical metrics
  • code diff snippets used directly to explain functionality

Holds it together

  • bookend the experience with full-bleed neon yellow hero and footer sections
  • prefix section eyebrows with a slash and uppercase monospace tag
  • enclose benchmarks, code snippets, and stats in fine 1px dark-bordered modular cards
  • render primary CTA buttons as stark pill shapes with high-contrast borders

Contrast

text on background14.9:1 AAA
muted text on background11.6:1 AAA
text on surface1.3:1 fail
accent on background1.0:1 fail
background on accent1.0:1 fail

Type, measured

Body
20px / 1.2
Measure
41 characters
Display
64px / 1.13
Tracking
-0.063em display
Scale ratio
1.34

Voice

Tone
technical, blunt, confident
Sentences
short
Person
second
Vocabulary
technical
Calls to action
try, contact, explore, read

Built with

Builder
webflow
Framework
—
Motion
gsap
WebGL
—
Nav
top_bar, 10 items
Length
10 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

    Strong

    Electric acid-yellow header pairing high-contrast monospaced navigation with a massive, pixelated wordmark.

    Mood
    raw + bold
    Layout
    24 col · stacked · dense
    Open section →
    Electric acid-yellow header pairing high-contrast monospaced navigation with a massive, pixelated wordmark.
  2. 01

    hero

    High-voltage acid yellow canvas with stark technical typography and terminal-style diff code creates an intense developer-focused statement.

    Mood
    bold + raw
    Layout
    1 col · stacked · balanced
    Open section →
    High-voltage acid yellow canvas with stark technical typography and terminal-style diff code creates an intense developer-focused statement.
  3. 02

    video

    Minimalist dotted card framing a bold centered word with an integrated play button.

    Mood
    clinical + raw
    Layout
    16 col · centered · airy
    Open section →
    Minimalist dotted card framing a bold centered word with an integrated play button.
  4. 03

    feature grid

    Technical feature grid blending wireframe-like schematics, subtle dotted textures, and high-voltage yellow accents for a sharp developer tool feel.

    Mood
    clinical + raw
    Layout
    3 col · grid · balanced
    Open section →
    Technical feature grid blending wireframe-like schematics, subtle dotted textures, and high-voltage yellow accents for a sharp developer tool feel.
  5. 04

    testimonial

    Strong

    A technical case study card pairing monochrome interview footage with dot-grid metrics and a sharp neon play accent.

    Mood
    clinical + raw
    Layout
    2 col · split · balanced
    Open section →
    A technical case study card pairing monochrome interview footage with dot-grid metrics and a sharp neon play accent.
  6. 05

    testimonial

    Strong

    Electric yellow dot-matrix grid and raw modular cells create a high-contrast, technical developer-tool aesthetic.

    Mood
    raw + bold
    Layout
    2 col · split · balanced
    Open section →
    Electric yellow dot-matrix grid and raw modular cells create a high-contrast, technical developer-tool aesthetic.
  7. 06

    feature

    Clean technical feature breakdown paired with an engineered interactive benchmark comparison widget framed in high-contrast line work.

    Mood
    clinical + raw
    Layout
    2 col · split · balanced
    Open section →
    Clean technical feature breakdown paired with an engineered interactive benchmark comparison widget framed in high-contrast line work.
  8. 07

    comparison

    A clean, engineered comparison table with monospace uppercase labels, fine horizontal dividing rules, and fluorescent yellow accents.

    Mood
    clinical + raw
    Layout
    1 col · split · airy
    Open section →
    A clean, engineered comparison table with monospace uppercase labels, fine horizontal dividing rules, and fluorescent yellow accents.
  9. 08

    stats

    Raw technical stats section with blueprint-like dotted grid quadrants, high-contrast acid yellow block, and stark developer-tool typography.

    Mood
    raw + clinical
    Layout
    1 col · split · balanced
    Open section →
    Raw technical stats section with blueprint-like dotted grid quadrants, high-contrast acid yellow block, and stark developer-tool typography.
  10. 09

    cta

    Vibrant neon yellow callout banner pairing sharp technical typography with stark pill-shaped action buttons.

    Mood
    bold + raw
    Layout
    8 col · asymmetric · airy
    Open section →
    Vibrant neon yellow callout banner pairing sharp technical typography with stark pill-shaped action buttons.
  11. 10

    footer

    A high-voltage acid yellow brutalist footer structured with strict technical lines, dot grids, and monospaced typography.

    Mood
    raw + bold
    Layout
    12 col · grid · airy
    Open section →
    A high-voltage acid yellow brutalist footer structured with strict technical lines, dot grids, and monospaced typography.

More like this

by shared mood