SearchSubmit
MUUDS

Curated catalog of analyzed web design.

NEON

A raw, auteur-driven cinema archive built with stark black-and-white framing and brutalist typography. Full-bleed film stills and high-tension imagery carry the emotional weight while rigid boxed labels and massive condensed type deliver utilitarian distributor grit.

grittymysteriousnostalgicrebelliouscontemplativeserene
Visit site

Rated

8.0/ 10

From 9 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.1
Systemmeasured
6.9
Distinctionmeasured
7.8
on the grid
36%
vertical rhythm
89%
type on a scale
50%
contrast passing AA
100%
unlike the library
1.07
model craft
7.8/10
model deviation
4.4/10

Colour

Background#ffffff
Text#000000
Surface#f3f3f3
Muted#000000

Typefaces

Display
Girott
Body
Focal
Mono
—
Source
self_hosted
Scale
9 · 10 · 12 · 14 · 36 · 41

Layout

Grid
12 columns
Container
1380px
Spacing base
5px
Radius
0px

Capture

Category
media
Sections
9
Captured
2026-09-16
Rhythm
dark → light → dark → light x4 → dark → light

Type rules

  • display headlines set in compressed bold uppercase with negative tracking
  • metadata labels enclosed in hairline rectangular pill badges at 9px to 10px
  • body text kept under 40 characters per line

Colour rules

  • strictly monochrome palette of solid black and pure white
  • full-bleed cinematic imagery supplies all color on the page

Voice rules

  • all metadata and titles strictly uppercase
  • action verbs limited to utilitarian cinema cues

Holds it together

  • render every status and category tag as an all-caps bordered wireframe badge
  • let edge-to-edge photography provide the sole colour against a monochrome white and black layout
  • use oversized compressed display typography directly superimposed over cinematic key art

Contrast

text on background21.0:1 AAA
muted text on background21.0:1 AAA
text on surface18.9:1 AAA

Type, measured

Body
14px / 1
Measure
39 characters
Display
160px / 0.9
Tracking
-0.03em display
Scale ratio
1.84

Voice

Tone
cinematic, direct, provocative
Sentences
short
Person
second
Vocabulary
plain
Calls to action
play, get, pre-order

Built with

Builder
—
Framework
next
Motion
—
WebGL
—
Nav
sticky_top_bar, 2 items, sticky
Length
6.9 screens
Mode

Sections in page order

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

  1. 00

    hero

    Strong

    Tense and cinematic full-bleed film still anchored by stark condensed typography and a floating minimal navigation island.

    Mood
    gritty + mysterious
    Layout
    1 col · full bleed · airy
    Open section →
    Tense and cinematic full-bleed film still anchored by stark condensed typography and a floating minimal navigation island.
  2. 01

    showcase

    A clean, high-contrast cinematic showcase featuring dramatic film stills arranged in a modern horizontal media gallery.

    Mood
    mysterious + gritty
    Layout
    3 col · grid · balanced
    Open section →
    A clean, high-contrast cinematic showcase featuring dramatic film stills arranged in a modern horizontal media gallery.
  3. 02

    showcase

    Cinematic and warmly intimate film preview slider combining raw family portrait photography with bold condensed typography.

    Mood
    nostalgic + grounded
    Layout
    2 col · stacked · balanced
    Open section →
    Cinematic and warmly intimate film preview slider combining raw family portrait photography with bold condensed typography.
  4. 03

    showcase

    Crisp, minimalist video showcase presenting indie film stills in a bold horizontal carousel.

    Mood
    mysterious
    Layout
    4 col · stacked · balanced
    Open section →
    Crisp, minimalist video showcase presenting indie film stills in a bold horizontal carousel.
  5. 04

    showcase

    Stark e-commerce merchandise grid displaying cult film artifacts on pale card containers with bold condensed typography.

    Mood
    rebellious + gritty
    Layout
    4 col · grid · balanced
    Open section →
    Stark e-commerce merchandise grid displaying cult film artifacts on pale card containers with bold condensed typography.
  6. 05

    showcase

    Crisp editorial film carousel presenting acclaimed cinema stills with condensed uppercase typography and laurel iconography.

    Mood
    contemplative + luxurious
    Layout
    4 col · stacked · balanced
    Open section →
    Crisp editorial film carousel presenting acclaimed cinema stills with condensed uppercase typography and laurel iconography.
  7. 06

    showcase

    Minimalist product grid presenting indie merchandise cutouts against soft gray cards under a heavy uppercase heading.

    Mood
    serene + clinical
    Layout
    4 col · grid · balanced
    Open section →
    Minimalist product grid presenting indie merchandise cutouts against soft gray cards under a heavy uppercase heading.
  8. 07

    footer

    Strong

    A cinematic dark newsletter banner transitions into modular, crisp white footer cards with social links and navigation.

    Mood
    mysterious + serene
    Layout
    4 col · stacked · balanced
    Open section →
    A cinematic dark newsletter banner transitions into modular, crisp white footer cards with social links and navigation.
  9. 08

    footer

    Strong

    A stark, monumental footer featuring an oversized brand wordmark where a film still unexpectedly inhabits the letterform.

    Mood
    rebellious + contemplative
    Layout
    1 col · stacked · airy
    Open section →
    A stark, monumental footer featuring an oversized brand wordmark where a film still unexpectedly inhabits the letterform.

More like this

by shared mood