// philipwilson.co.uk · the cassette / zine / arcade identity

visual style guide

The reference for everything that carries the site's identity: the home page, writing, about, and the talk pieces. Lineage is concepts/19-zine-plus.html → Site/src/styles/global.css. Every value below is pulled from that live CSS, not invented.

Lab projects are exempt · everything else adheres
01

Palette

Flat, solid fills only. No gradients except functional texture (grain, scanlines, tape).

core -- :root tokens
--cream#F4EDDFpage / paper background, labels
--olive-darker#2A2722ink: text, borders, nav + footer bg
--olive-deep#3F3B33dark panel fill (lab cards)
--olive#5B564Amuted text, captions
--mustard#E5B556primary accent: nav rule, links on dark, writing bg
--peach#D88E5Esecondary accent: stamps, shadows, zigzag
--peach-deep#9F5F33kickers, links on cream, hard shadows
--mint#7DC4A4cover background, LEDs
--blue#9BCFD6about background, tints
--crt#1A2A22CRT screen background
--phosphor#A8E5C5CRT text (terminal green)
secondary -- cassette internals
--plastic#1a1814cassette casing
--plastic-deep#0a0805casing trim / hairlines
--cream-deep#E5DCC4inset / code chip fill
added -- writing annotation system (not yet in live site CSS)
--ink#C2402Ethe bastard's red pen: strikes, refute marks
--ink-deep#8E2B1Ered note text
--mint-deep#3E7E60the peer's green: underlines, note text

// the three "added" tokens were introduced for the talk pieces. fold them into global.css if the writing annotation system ships.

02

Type

Five families, each with one job. Don't reach outside the roles.

Bungee 400
display
YOU CAN BE BAD AT THIS
HEADINGS · STAMPS · BIG NUMBERS · ALWAYS UPPERCASE · ls -.02em large / +.06em small caps · lh .85-1
Space Grotesk 400/500/700
body
Body copy and cassette titles. The workhorse text face. 18px / 1.7 in long-form prose, 15px / 1.5 elsewhere.
VT323 400
terminal mono
// KICKER · CHIP · META · COUNTER
KICKERS · CHIPS · METADATA · CODE · UPPERCASE · ls .06-.16em · blinking block cursor
Caveat 500/700
handwriting
subtitles, margin notes, tracklists, blockquotes -- often rotated a degree
Big Shoulders Display 700/900
lab titles only
Procedural City
CONDENSED UPPERCASE · LAB-CARD TITLES ONLY · DO NOT USE ELSEWHERE
heading scale (from the live CSS)
cover h1Bungee · clamp(48px, 11vw, 156px) · lh .85
section h2Bungee · clamp(48px, 8vw, 96px) · lh .9
article h1Bungee · clamp(36px, 5.5vw, 56px)
prose h2 / h3Bungee · 28px / 20px
body / proseSpace Grotesk · 18px / 1.7
kickerVT323 · 15-16px · ls .14em
03

Signature treatments

These are what make a thing look like the site. Use them; don't soften them.

Hard offset shadow. box-shadow:6px 6px 0 -- zero blur, always. Hover lifts translate(-2px,-2px) + bigger offset.
Thick ink borders. 2-3px solid --olive-darker (mustard on dark panels, 4px on the cabinet).
▶ press start
Rotated stamp. Bungee uppercase, rotate(-2deg…6deg), hard shadow.
COMING
SOONEST. 2026
Double-border stamp. border + outline in a second colour. See coming-soon / demo stamps.
// SECTION 01
VT323 chip / kicker. mono uppercase, ls .14em, peach-deep, blinking block cursor.
ISSUE 04
Mono badge. mustard fill, 1.5px ink border, VT323.

> ls -lh ~/lab

CRT block. --crt bg, phosphor text, scanline overlay, border-radius:22px/18px.
Zigzag tear. peach strip, clip-path polygon. Bottom of the cover.
grain overlay
is on this whole page
Halftone grain. fixed feTurbulence noise, opacity .55, mix-blend multiply, over everything.
SMPTE bars. 8 bars in the full palette. Empty / no-signal states.
04

Section colour blocking

Each home-page section owns a background; 3px ink rules divide them. Selection is mustard.

Cover--mint
Lab--olive-darker
Writing--mustard
About--blue

// lab is the one dark section. its rules switch to mustard; its accents to peach.

05

Components

The recurring boxed objects. All share borders, hard shadows, and a slight tilt.

◀◀ rewind
Deck button. Bungee, olive-darker, peach-deep shadow. Press: translate(2px,2px).
003 / 012
Counter. VT323, tape-deck position readout.
// 02 · 2025Procedural Citywfc, then extrudedwebgl★ ★ ★ ★
Lab card. olive-deep, mustard border, Big Shoulders title (lab only).

↳ get in touch

Emailhello@…
StatusOpen · 2026
Contact card. cream, tilted 1deg, dashed-rule rows.
SIDE A · 01APR 2026▶
Tape strip. article header band, VT323 on olive-darker.
06

Writing / long-form

Article body rules, from the live writing template. 720px column on cream.

A heading in Bungee

Body is Space Grotesk at 18px on 1.7 line-height. Inline links are peach-deep with a 2px bottom border, never underlined. Inline code sits in a bordered cream-deep chip.

A sub-heading

Block code is a mini CRT: phosphor on olive-darker with a peach-deep hard shadow.

> npx marp AI-usage-slides.md \
    --theme-set marp-theme-cassette.css
Pull quotes are Caveat at 24px with a peach-deep left border.
IMAGE

images get a 2px ink border + hard shadow; captions are VT323 uppercase

Horizontal rules are a 2px dashed ink line.

07

Reviewer annotations

The system the talk pieces add on top of the identity. Three voices, three colours.

① the peer · mint · underline · factual catches ② the bastard · red ink · strike · blind-spot catches ③ the meta · mustard · in-flow callout

across 32 daily notes this quarter i consistently caught my own mistakes early. this isn't a highlight reel, i included the failures too.

the peeri count 28.
the bastardsaying it isn't one IS the highlight.
the meta · it demonstrates itselfthe margins of this page are the two-reviewer pattern, running live.

// peer = mint underline + sticky in the left gutter. bastard = red strike + sticky in the right gutter. meta = full-width callout in normal flow, never floating over text.

08

Interludes, stickers & cards

Newer patterns from the writing pieces: bold colour panels, tilted sticker boxes, stamped cards, the reviewer rail.

so how do we do it? watch.
Interlude panel. bold full-bleed colour (talk slide-6 style) with tilted cream sticker boxes: Bungee title + Caveat note. Article transitions + the outro. Each interlude takes a different colour (mint hero / blue transition / mustard outro).
← back to the rack
Pinned sticker. fixed rotated stamp, top-left of the view (not a bar). Shared back-link across both writing pieces.
Binned
Stamp card. a screenshot in a tilted cream frame with a slammed Bungee verdict (Binned = ink, ★ Shipped = mint-deep). The bin gallery; click to enlarge in a dimmed lightbox.
▸ READING ALONG
● the peer
● the bastard
● the meta
AUDITED SO FAR · 3
Reviewer rail. sticky right column (wide screens): reading-along legend pinned top, live audit tally pinned to the bottom of the view. Collapses to a top banner + floating tally below 1540px.

// also live: lab CRT fills its section with SMPTE "dead channel" filler tiles; the reading article can toggle page-snap on/off; home sections are full-bleed to min(1640px, 94vw).

09

Rules

The non-negotiables. Aggressive flatness, hand-craftiness, themed character.

Do

  • Solid flat fills. Colour does the work, not depth.
  • Hard offset shadows, zero blur, single direction.
  • Box everything in 2-3px ink borders.
  • Tilt things a degree or two; let it feel hand-placed.
  • Keep each typeface in its lane (Bungee display, VT323 mono, Caveat hand, Space Grotesk body, Big Shoulders lab-only).
  • Keep Philip and Wilson whole when wrapping: word-break:keep-all; hyphens:none.

Don't

  • No gradients for decoration. (Functional texture only: grain, scanlines, tape.)
  • No soft / blurred / multi-direction shadows.
  • No borderless floating cards.
  • No Big Shoulders outside lab cards.
  • Don't break the name mid-word, ever.
  • Don't make lab projects follow this. The lab is the playground; it's deliberately exempt.