cassettemusic-com

Tactile, music-industry nostalgia built on a raw zine aesthetic. High-contrast dark charcoal backdrops collide with punchy acid yellow branding, collage imagery, and dense monospaced typography.

bold raw nostalgic quiet playful

Visit site

Rated

7.8/ 10

From 7 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.0
Systemmeasured: 6.4
Distinctionmeasured: 8.2

on the grid: 27%
vertical rhythm: 77%
type on a scale: 50%
contrast passing AA: 100%
unlike the library: 0.27
model craft: 7.7/10
model deviation: 6.7/10

Colour

Background#19181a

Text#f5f4f0

Accent#f0e226

Surface#272727

Muted#d9d7ce

Typefaces

Display: Apercu Pro
Body: Apercu Mono Pro
Mono: Apercu Mono Pro
Source: self_hosted
Scale: 13 · 14 · 15 · 37 · 56 · 60

Layout

Grid: —
Container: —
Spacing base: 8px
Radius: 0px · 999px

Capture

Category: agency
Sections: 7
Captured: 2026-08-30
Rhythm: dark x5 → mixed → dark

Type rules

body set in Apercu Mono Pro at 13px with short character measures
all supporting section labels and metadata formatted in full uppercase monospace

Colour rules

acid yellow (#f0e226) reserved for branding, nav pills, and equalizer elements
service tiers represented as full-width vibrant color blocks against the dark canvas

Voice rules

use all-caps monospace for narrative descriptions
keep primary section statements concise

Holds it together

anchor top and bottom viewports with edge-to-edge Cassette wordmarks in bright yellow
render metadata, labels, and paragraph copy strictly in uppercase monospace
enclose navigation actions inside solid rounded pill buttons

Contrast

text on background16.1:1 AAA

muted text on background12.3:1 AAA

text on surface13.6:1 AAA

accent on background13.2:1 AAA

background on accent13.2:1 AAA

Type, measured

Body: 13px / 1.3
Measure: 42 characters
Display: 60px / 1.2
Tracking: 0em display
Scale ratio: 1.47

Voice

Tone: confident, declarative, artistic
Sentences: short
Person: first
Vocabulary: specialized
Calls to action: listen, contact, explore

Built with

Builder: webflow
Framework: —
Motion: gsap
WebGL: —
Nav: —
Length: 7 screens

Sections in page order

3 marked strong · 7

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

00
hero
Punchy dark hero anchored by a massive acid-yellow wordmark and asymmetric tactile pill navigation.
Mood
bold + nostalgic
Layout
1 col · asymmetric · airy
Open section →
01
hero
High-contrast modular grid of textured yellow equalizer bars spanning across a dark industrial background.
Mood
raw + bold
Layout
8 col · grid · dense
Open section →
02
statement
Strong
Tactile, music-inspired agency about section pairing a cut-and-paste tape collage with sharp monospaced editorial typography on textured dark canvas.
Mood
nostalgic + raw
Layout
12 col · split · balanced
Open section →
03
logo bar
Subdued, dark-themed client logo grid structured with subtle bounding lines and understated typography.
Mood
quiet + clinical
Layout
4 col · grid · balanced
Open section →
04
team
Strong
Gritty music-agency team section pairing a tactile halftone collage portrait with a dense, monospace roster list.
Mood
raw + editorial
Layout
1 col · split · dense
Open section →
05
feature
Strong
Stacked horizontal bands of saturated color present services with bold simplicity under a dark, confident header.
Mood
playful + bold
Layout
2 col · stacked · dense
Open section →
06
footer
A dark, high-impact music studio footer anchoring centered contact pills above a massive, edge-to-edge acid yellow wordmark.
Mood
bold + raw
Layout
1 col · stacked · balanced
Open section →