SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Jeff Brokaw

Engineered, technical authority. Pitch-black backdrop paired with glowing neon orange telemetry lines and precise circuit motifs.

boldquietclinicaleditorialraw
Visit site

Colour

Background#0a0a0a
Text#f4f1ea
Accent#ff6a1f
Surface#1c1a17
Muted#b4aea4

Typefaces

Display
Bricolage Grotesque
Body
Hanken Grotesk
Mono
—
Source
google
Scale
11 · 13 · 15 · 17 · 24 · 38

Layout

Grid
15 columns
Container
1040px
Spacing base
8px
Radius
0px · 9999px

Capture

Category
portfolio
Sections
8
Captured
2026-08-29
Rhythm
dark x8

Type rules

  • display headlines in sentence case with tight tracking
  • eyebrows and metadata pills strictly uppercase
  • body text rendered in warm grey at generous line height

Colour rules

  • deep black background remains continuous throughout the page
  • high-voltage orange reserved strictly for key metrics, active tags, and primary CTAs

Voice rules

  • assertive first-person claims without fluff
  • every statement backed by live proof or quantified metrics

Holds it together

  • use neon orange sparingly to illuminate interactive hooks and quantitative metrics
  • frame interactive builds inside dark, hairline-bordered telemetry cards
  • keep layout strictly unified on a deep pitch-black canvas

Contrast

text on background17.6:1 AAA
muted text on background9.0:1 AAA
text on surface15.4:1 AAA
accent on background6.9:1 AA
background on accent6.9:1 AA

Type, measured

Body
17px / 1.62
Measure
87 characters
Display
38px / 1.5
Tracking
-0.02em display
Scale ratio
1.22

Voice

Tone
authoritative, direct, pragmatic
Sentences
short
Person
first
Vocabulary
technical
Calls to action
talk, open, see

Built with

Builder
—
Framework
—
Motion
gsap, lenis
WebGL
yes
Nav
top_bar, 5 items
Length
12.6 screens

Sections in page order

3 marked strong · 8

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

  1. 00

    hero

    A dark, technical executive portfolio combining dotted display typography with neon orange circuit network accents and precise metric callouts.

    Mood
    bold + clinical
    Layout
    16 col · stacked · balanced
    Open section →
    A dark, technical executive portfolio combining dotted display typography with neon orange circuit network accents and precise metric callouts.
  2. 01

    statement

    Strong

    A vast expanse of pitch-black negative space punctuated by stark declarative statements and a single hot-orange accent line.

    Mood
    quiet + bold
    Layout
    15 col · asymmetric · airy
    Open section →
    A vast expanse of pitch-black negative space punctuated by stark declarative statements and a single hot-orange accent line.
  3. 02

    showcase

    Engineered dark-mode showcase cards presenting interactive AI systems through alternating technical wireframes and vivid orange telemetry highlights.

    Mood
    clinical + bold
    Layout
    15 col · stacked · dense
    Open section →
    Engineered dark-mode showcase cards presenting interactive AI systems through alternating technical wireframes and vivid orange telemetry highlights.
  4. 03

    showcase

    A stark, typography-driven case study list that presents business outcomes with quiet, tabular precision against deep black.

    Mood
    clinical + quiet
    Layout
    12 col · stacked · airy
    Open section →
    A stark, typography-driven case study list that presents business outcomes with quiet, tabular precision against deep black.
  5. 04

    statement

    Strong

    A stark, high-contrast dark statement section balancing assertive bold typography with structured, editorial credential rows accented in vibrant orange.

    Mood
    bold + editorial
    Layout
    15 col · stacked · balanced
    Open section →
    A stark, high-contrast dark statement section balancing assertive bold typography with structured, editorial credential rows accented in vibrant orange.
  6. 05

    showcase

    A restrained dark editorial index pairing bold grotesque typography with delicate orange wire pill tags.

    Mood
    editorial + quiet
    Layout
    15 col · stacked · airy
    Open section →
    A restrained dark editorial index pairing bold grotesque typography with delicate orange wire pill tags.
  7. 06

    faq

    Strong

    A dark, highly disciplined editorial FAQ layout with crisp typography, subtle orange accents, and generous vertical pacing.

    Mood
    editorial + clinical
    Layout
    15 col · stacked · airy
    Open section →
    A dark, highly disciplined editorial FAQ layout with crisp typography, subtle orange accents, and generous vertical pacing.
  8. 07

    cta

    A stark, high-contrast dark layout combining an FAQ detail with an unadorned, direct contact call-to-action in vibrant orange.

    Mood
    raw + bold
    Layout
    12 col · stacked · airy
    Open section →
    A stark, high-contrast dark layout combining an FAQ detail with an unadorned, direct contact call-to-action in vibrant orange.