SearchSubmit
MUUDS

Curated catalog of analyzed web design.

Ainsley

Stark, sophisticated dark-mode editorial. Sharp typographic hierarchy combines heavyweight grotesks with delicate italic serif moments over deep black backgrounds.

editorialclinicalboldquiet
Visit site

Colour

Background#0a0a0a
Text#ffffff
Accent#ffffff
Surface#1f1f1f
Muted#9a9a9a

Typefaces

Display
plus jakarta sans
Body
plus jakarta sans
Mono
—
Source
self_hosted
Scale
13 · 14 · 16 · 18 · 19 · 21

Layout

Grid
—
Container
—
Spacing base
10px
Radius
0px

Capture

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

Type rules

  • display type mixes heavy sans-serif with italic serif accent words
  • body text constrained to short measures around 43 characters
  • section anchors rotated vertically 90 degrees in the left margin

Colour rules

  • strictly monochromatic dark palette dominated by #0a0a0a
  • hierarchy expressed through pure white headers and muted grey body copy

Voice rules

  • pair bold assertions with descriptive technical competence
  • use asterisk annotations on key focal words

Holds it together

  • anchor major sections with vertically rotated numbered titles on the left
  • highlight hero keywords with serif italic styling and asterisk marks
  • use modular full-width horizontal list items for services and insights

Contrast

text on background19.8:1 AAA
muted text on background7.0:1 AAA
text on surface16.5:1 AAA
accent on background19.8:1 AAA
background on accent19.8:1 AAA

Type, measured

Body
19px / 1.8
Measure
43 characters
Display
75px / 1
Tracking
-0.027em display
Scale ratio
1.41

Voice

Tone
confident, authoritative
Sentences
medium
Person
first
Vocabulary
curated
Calls to action
get to know, all work, say hello

Built with

Builder
—
Framework
—
Motion
locomotive-scroll, barba
WebGL
—
Nav
sticky_top_bar, 14 items, sticky
Length
16.2 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 stark, shadowy digital studio hero pairing precise italic serif accents with bold geometric type against a towering minimalist monogram.

    Mood
    editorial + bold
    Layout
    1 col · asymmetric · airy
    Open section →
    A stark, shadowy digital studio hero pairing precise italic serif accents with bold geometric type against a towering minimalist monogram.
  2. 01

    feature

    Strong

    A sleek, dark-mode agency services index combining rotated sidebar numbering with structured horizontal rows, minimal tags, and outbound arrows.

    Mood
    clinical + quiet
    Layout
    10 col · stacked · balanced
    Open section →
    A sleek, dark-mode agency services index combining rotated sidebar numbering with structured horizontal rows, minimal tags, and outbound arrows.
  3. 02

    feature

    A stark dark agency section using vertical numbering and candid presentation photography to introduce the team.

    Mood
    editorial + quiet
    Layout
    11 col · asymmetric · airy
    Open section →
    A stark dark agency section using vertical numbering and candid presentation photography to introduce the team.
  4. 03

    feature

    Austere dark-mode feature list anchored by a vertical sideways section title and precise typographic hierarchy.

    Mood
    clinical + quiet
    Layout
    2 col · split · balanced
    Open section →
    Austere dark-mode feature list anchored by a vertical sideways section title and precise typographic hierarchy.
  5. 04

    showcase

    Strong

    Staggered 3D scroll-like device mockups unroll down a stark black canvas in an asymmetrical portfolio showcase.

    Mood
    bold + editorial
    Layout
    14 col · asymmetric · airy
    Open section →
    Staggered 3D scroll-like device mockups unroll down a stark black canvas in an asymmetrical portfolio showcase.
  6. 05

    showcase

    A crisp, dark editorial article index featuring a vertical section marker, structured rows with dates, bold headlines, and clean categorization pills.

    Mood
    editorial + clinical
    Layout
    10 col · split · balanced
    Open section →
    A crisp, dark editorial article index featuring a vertical section marker, structured rows with dates, bold headlines, and clean categorization pills.
  7. 06

    cta

    Strong

    Moody, monochromatic CTA banner overlaying an intimate workspace photograph with elegant mixed sans and italic serif typography.

    Mood
    quiet + editorial
    Layout
    15 col · full bleed · airy
    Open section →
    Moody, monochromatic CTA banner overlaying an intimate workspace photograph with elegant mixed sans and italic serif typography.
  8. 07

    footer

    A sleek, dark studio footer pairing crisp white typography and structured navigation columns against a subtle geometric background monogram.

    Mood
    quiet
    Layout
    14 col · split · balanced
    Open section →
    A sleek, dark studio footer pairing crisp white typography and structured navigation columns against a subtle geometric background monogram.