How David Wademan Music looks

Colour

The site has a dark and a light mode. It follows the visitor’s device setting until they choose with the sun / moon button in the header (THEME-01). These swatches show the mode you are in: switch to see the other. In light mode night and chalk trade places, and the crayons go a touch deeper.

Surfaces and text

• COL-night

  night

  --color-night

  Page background

• COL-deep

  deep

  --color-deep

  Raised sections

• COL-deep-stripe

  deep-stripe

  --color-deep-stripe

  Placeholder stripe

• COL-chalk

  chalk

  --color-chalk

  Main text

• COL-mist

  mist

  --color-mist

  Secondary text

• COL-line

  line

  --color-line

  Rules and borders

• COL-ink

  ink

  --color-ink

  Dark type on crayons (never flips)

Show crayons

• COL-marigold

  marigold

  --color-marigold

  Focus ring, highlights

• COL-coral

  coral

  --color-coral

  Hello Kitty – Let’s Go

• COL-lagoon

  lagoon

  --color-lagoon

  Crayola

• COL-lilac

  lilac

  --color-lilac

  Brookhaven

• COL-sky

  sky

  --color-sky

  Miko

Light mode options (to choose)

Marigold and coral struggle on the light background: they are warm, like the cream. These options show the fixes side by side, always in light colours. Ratios are measured contrast against the background; 4.5:1 is the standard for reading text. Pick one of each by ID.

1. One shade or two

Each crayon does two jobs: big fills (cards, play buttons) and small things that must be read (coloured words, hairlines, outlines). One shade can’t do both on cream, so each has two: the bright original for fills, a deep version for text (the -text tokens). Dark mode is unchanged. Chosen by Paul; the one-shade option is retired.

2. Coral

The fill for cards and play buttons. Each is shown with its deep text shade (from option 1) on the playing title.

3. The playing track’s title

Now the playing title takes the show’s colour. Option 2 keeps it in the normal text colour and lets the filled play button say which track is playing: no contrast problem in either mode, and calmer. (Would apply in dark mode too.)

4. The “Design system” chip (until launch)

5. Background

The biggest lever: a lighter background lifts every crayon at once. Shown with the original coral (LM-COR-2), two shades (LM-SHADE-2) and the plain title (LM-ROW-2).

Phone first

The phone is designed first and the desktop adds to it, not the other way round. These rules apply to every page.

• Units

  Type and spacing are in rem (1rem = 16px by default), so they follow a visitor’s own text-size setting. px is only for hairlines (1px borders). vw appears only inside a clamp(). em is used inside a component so its padding scales with its own text.

• Fluid, not stepped

  Large type is a clamp(smallest, fluid, largest), so it glides between phone and desktop sizes instead of jumping at a breakpoint. The tables below show the real result at 390px and 1280px.

• Touch

  Every button, link in a menu and form control is at least 44px tall. Nothing depends on hover.

• Layout

  Base styles are the phone layout, one column. A breakpoint prefix such as md: adds the wider layout from that width up. Wide sections are re-composed for the phone, not shrunk.

Breakpoints

• base

  Phone, from 320px

• sm:

• md:

• lg:

• xl:

Typography

Two typefaces, both served from this site: Fraunces (display and reading) and Schibsted Grotesk (interface text). Sizes are measured live from the CSS: phone is a 390px screen, desktop is 1280px, and “this screen” is the window you are looking at now.

• TYP-hero text-hero · The name on the homepage. Fluid: grows with the screen.

  Wademan

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-page text-page · A page's own title, such as a project's name.

  Brookhaven

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-title text-title · Section headings such as Listen and Work.

  Section title

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-heading text-heading · Table captions, panel headings.

  Sub-heading

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-lede text-lede · Intros and cue titles.

  Lede paragraph for introductions.

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-body text-body · Default text. Never below this on a phone.

  Body text for descriptions and long reading.

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

• TYP-small text-small · Details, labels and notes.

  Small text for details, labels and notes.

  Phone (390px)

  Desktop (1280px)

  This screen

  Token value

Shape and space

• RAD-field

  rounded-field

  Form fields

• RAD-card

  rounded-card

  Cards and images

• RAD-frame

  rounded-frame

  Large frames

• RAD-pill

  rounded-pill

  Buttons and chips

• SPC-gutter px-gutter · Page side padding

  Phone (390px)

  Desktop (1280px)

  Token value

• SPC-section py-section · Space between page sections

  Phone (390px)

  Desktop (1280px)

  Token value

• SPC-measure max-w-measure · Longest line of reading text

  Phone (390px)

  Desktop (1280px)

  Token value

• SPC-page max-w-page · Widest any page's content gets

  Phone (390px)

  Desktop (1280px)

  Token value

Motion

Motion keeps time with the music: every duration is a note at 90 bpm, so everything that moves shares one tempo. Few things move, and only to show where you are going. A device that asks for reduced motion gets ordinary page loads.

• MOTION-01

  --motion-beat

  667ms

  One beat. Bigger moves.

• MOTION-02

  --motion-eighth

  333ms

  An eighth. A page arriving.

• MOTION-03

  --motion-sixteenth

  167ms

  A sixteenth. A page leaving, small steps.

• MOTION-04

  --ease-settle

  cubic-bezier(0.2, 0.7, 0.2, 1)

  Arrivals: quick, then a soft landing.

• MOTION-05

  --ease-glide

  cubic-bezier(0.65, 0, 0.25, 1)

  Travel: eases out and in again.

Moving between pages

The switch is for comparing, and only affects this browser. Transitions play in Chrome, Edge and Safari; other browsers load pages as before.

Arriving on a page

ENTER-01

Every designed page arrives the same way: the title rises out of a mask for a beat, the intro follows an eighth later, then a hairline draws across. The page’s own piece (the passes’ breeze on Live, the gatefold on About) starts after it.

Replay

As you scroll, load and switch

Everything that already moved (the header and phone menu, the footer credits, the hero strings, the passes, the desk, the gatefold) now takes its timing from the same tempo; each keeps its own curve.

Logo

The DWM mark on a stave, drawn in the text colour so it follows light and dark mode. The mark alone in the header; with the name in the footer, for people who don't know DWM yet. Files in assets/logo/, drawn by the logo component.

Hero name

The homepage hero sets the site name large. With "Music" added, the original two steps (NAME-01) put "Wademan Music" on one long line. The first two words count as the name; each layout places anything after them differently, and all of them still work for "David Wademan" alone.

Header and footer

Chosen by Dave from the options: the floating capsule header with its phone menu, and the end credits footer. Every footer links the Privacy notice and Terms of use.

Components

Each lives in template-parts/components/ and is reused wherever it appears. Every example has an ID: quote it when giving feedback, and it links straight to the item.

play-button

Playing a cue is always the round control. It is 48px (or 64px) so it is easy to hit with a thumb, and it takes the colour of the show it sits in.

Finer versions: a hairline ring, 40px (56px large), that fills on hover. The tap area is still 44px or more.

theme-toggle

Switches between dark and light mode and remembers the choice. A sun in dark mode, a moon in light mode. Choosing what the device would pick anyway goes back to following the device.

button

Two kinds. One filled call to action per page at most (the main contact action); every other action is a word with an arrow.

chip

filter-chip and filter-sheet

Filters over a list. From tablet up, chips (CHIP-04). On a phone, a Filter button that opens a bottom drawer (FILT-01): narrow your window to see it. Both are on the Work page.

section-head

Other ways to set a heading and its lede. Each is shown with a short lede (a) and a long one (b), since an alignment that suits one line can look ragged at three.

track-row

embed-facade

A SoundCloud or Spotify track on a project page. Nothing from the service loads until it is pressed; then its player takes the row’s place (SoundCloud in the show’s colour).

project-card

Cards respond to their own width, not the screen: the title steps down for long words. Use a grid that never lets a card go below 15rem.

• CARD-S1

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-S2

  LEGO DUPLO

  Score
  LEGO

• CARD-S3

  Crayola

  Original music & score
  Crayola

• CARD-S4

  Brookhaven

  Singles and scores
  Roblox

• CARD-S5

  Miko

  Original music & score
  Miko

• CARD-W1

  Extraordinary Adventures

  Score
  Narrowest card (15rem)

• CARD-W2

  Extraordinary Adventures

  Score
  A medium card (24rem)

• CARD-W3

  Extraordinary Adventures

  Score
  A wide card

• TYP-card text-card ·
• TYP-card-long text-card-long ·
• TYP-card-xlong text-card-xlong ·

project-card: concepts to compare

Directions for the same card, using the same data and tokens. Options are never edited once seen: a change is added as a new option with a new ID, and old ones are retired only when Dave chooses. Each option appears twice: “a” with a short title, “b” with a long one.

• CARD-A1a Sleeve, night disc rises from the top

  Brookhaven

  Singles and scores
  Roblox

• CARD-A1b Sleeve, night disc rises from the top

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-A2a Sleeve, night disc slides out of the side

  Brookhaven

  Singles and scores
  Roblox

• CARD-A2b Sleeve, night disc slides out of the side

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-A3a Sleeve, night disc on the right edge

  Brookhaven

  Singles and scores
  Roblox

• CARD-A3b Sleeve, night disc on the right edge

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-A4a Sleeve, coloured disc rises from the top

  Brookhaven

  Singles and scores
  Roblox

• CARD-A4b Sleeve, coloured disc rises from the top

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-A5a Sleeve, coloured disc slides out of the side

  Brookhaven

  Singles and scores
  Roblox

• CARD-A5b Sleeve, coloured disc slides out of the side

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-A6a Sleeve, coloured disc on the right edge

  Brookhaven

  Singles and scores
  Roblox

• CARD-A6b Sleeve, coloured disc on the right edge

  Hello Kitty – Let’s Go

  Score
  Sanrio

• CARD-Ba Cue first

  Singles and scores

  Brookhaven

  Roblox

• CARD-Bb Cue first

  Score

  Hello Kitty – Let’s Go

  Sanrio

• CARD-Ca Sticker

  Singles and scores

  Brookhaven

  Roblox

• CARD-Cb Sticker

  Score

  Hello Kitty – Let’s Go

  Sanrio

tour-pass

A tour laminate for each act Dave has toured with, hanging from a slack cord between pins (the Live page, LIVE-C1; chosen by Dave, 16 Oct 2026; LAM-01, the straight rail, is retired). Crayon fill and ink type, the same in both modes. Each pass draws its own piece of cord, dipping under its pass by a slightly different amount, so any number join into rows that wrap and balance (12 hang as two rows of 6); on a phone, one swipe row. On arrival the cord is strung left to right and each pass drops onto it, so the cord gives and settles; tap or hover lifts a pass, straightens it and its piece springs up. With reduced motion it simply hangs.

studio-desk and session-log

The Studio page (STUDIO-A1), shown here with two of Dave's sessions on the desk and the rest in the log. Up to four channels (sessions with "On the desk" switched on); choosing one raises its fader, lights its meter and puts its record on the monitor. Every other session is a row in the session log, which plays through the same monitor. The desk, tape and paper look the same in both modes.

gatefold

The About page (ABOUT-A1): the inside of a record's gatefold sleeve. From 56rem it arrives closed (the cover photo with the name) and swings open on its spine; reload to see it again. A second photo inside on the left, liner notes on paper on the right, with credits set out like an album's personnel. On a phone the halves stack.

GATE-01

A record of work David Wademan Music

David Wademan Music Composer · Bass

I write music for the screen, and I play bass.

A short sample of the liner notes: two or three paragraphs in Dave's own words sit here.

They run in two columns when the panel is wide enough.

Composition

Sanrio, Crayola, LEGO

Bass

Kosheen, Blue, Five

DWM · Liner notes Get in touch

A record of work David Wademan Music

David Wademan Music Composer · Bass

letter-form

The Contact page (CONTACT-A1): the enquiry as a letter to Dave on paper, the fields as blanks in one sentence. The topic is the site's dropdown drawn as a paper slip (with a mouse; phones use their own picker). Consent and "Send to Dave" share one line. Not connected yet: it says so on submit.

credits-table

placeholder

form-field

Refined fields, two directions. Line: no box, a hairline under serif text. Soft: a filled tile with the label inside. Dropdowns are redrawn: the chevron is set in from the edge and the open list is built from our tokens. On touch screens the phone’s own picker is used instead. A consent checkbox is included for each (a GDPR acceptance).