---
name: Deadwax
version: "1.0"
slug: deadwax
tier: premium
price: 29
type: Record Label
axis: "7 — Spatial choreography (traveling element)"
theme: warm-monochrome-label
gesture: "The traveling disc — one CSS-drawn vinyl record travels the whole page, scrubbed by scroll: giant in the hero, it lands on the turntable platter, tucks into the featured sleeve, and ends as the label stamp in the footer. Fully reversible."
colors:
  taupe:      "#968178"
  taupe-deep: "#7E6A61"
  paper-1:    "#F1EFEE"
  paper-2:    "#F8F8F8"
  ink:        "#2B2320"
  cream:      "#F4EFE9"
fonts:
  display: "Squada One"
  body:    "Blinker"
  mono:    "IBM Plex Mono"
spacing:
  s1: "0.5rem"
  s2: "1rem"
  s3: "1.5rem"
  s4: "2.5rem"
  s5: "4rem"
  s6: "7rem"
radius: "3px"
type-scale:
  hero:    "clamp(4.5rem, 13vw, 11rem)"
  section: "clamp(2rem, 4.5vw, 3.4rem)"
  ticket:  "clamp(1.5rem, 3.4vw, 2.6rem)"
  body:    "1rem / 1.65"
  mono:    "0.72–0.85rem / ls .16–.28em"
full-kit: "https://www.stacklift.design/kit/deadwax"
---

# Deadwax — Design System

## §1 Identity

Deadwax is a record-label kit built on one structural gesture: **a single vinyl record that travels the entire page**. It opens giant in the hero, lands on the turntable in Now Playing, slides behind the featured sleeve in the catalogue, and finishes as the label's stamp beside the footer wordmark. The scroll does not reveal content — it **reorganises the scene**, and the journey rewinds when you scroll back up.

The palette is warm monochrome: taupe `#968178` frames the page (hero + footer) and doubles as the only accent on the light stages; two near-identical papers (`#F1EFEE` / `#F8F8F8`) alternate between sections so the stages stay quiet and the traveler stays the show. Ink is a warm near-black `#2B2320`; cream `#F4EFE9` speaks on taupe. **There is no colour accent** — hierarchy is carried by mass, rules and type.

Typography: Squada One (square, poster-condensed) for display; Blinker (300/400/600) for body; IBM Plex Mono for the deadwax etchings, catalogue numbers and eyebrows. The name comes from the runout groove — the silent band where every record is signed by hand.

## §2 The Signature Gesture — The Traveling Disc

The disc is drawn in pure CSS (repeating radial gradients for grooves, a cream paper label, a spindle hole) at a base size of 100px, `position: fixed`, and spun by a 26s CSS animation. Its journey is defined by **four invisible stops** — placeholder divs sized by regular CSS layout:

```html
<div class="disc-stop" id="stop-hero"></div>     <!-- in the hero, 58vmin -->
<div class="disc-stop" id="stop-platter"></div>  <!-- on the platter, 75% of it -->
<div class="disc-stop" id="stop-sleeve"></div>   <!-- behind the featured sleeve -->
<div class="disc-stop" id="stop-foot"></div>     <!-- 58px, beside the wordmark -->
```

On load (and resize, and `document.fonts.ready`) the engine measures each stop's document position, size, and **anchor** — the scrollY at which the stop's centre crosses the viewport centre. On every frame, the current scroll position is located between two anchors, eased (`easeInOutCubic`), and the disc's centre and scale are interpolated:

```js
var size = a.size + (b.size - a.size) * t;
var cx   = a.x + (b.x - a.x) * t;
var cy   = (a.y + (b.y - a.y) * t) - scrollY;
disc.style.transform = 'translate3d(…) scale(size/100)';
```

Because the stops are laid out in CSS, the gesture is **responsive for free** — resize, and the journey re-measures itself. Scrub is fully reversible; there is no "played once" state.

## §3 Stage Discipline

1. The two papers `--paper-1`/`--paper-2` alternate section by section. Their difference is barely perceptible — deliberate. The stages must stay quiet; the disc is the only spectacle.
2. Taupe appears exactly twice as a surface: hero and footer. The journey starts and ends in the same material.
3. Sections 4 and 5 (Artists, Etchings) are **rest zones**: the disc stays docked in the sleeve through both, and only travels again as the footer approaches.
4. Nothing else on the page translates, flies or parallaxes. Hovers may lift a card 5px; that is the ceiling.

## §4 Monochrome CTA Grammar

With no colour accent, calls-to-action carry weight through **mass and rules**:

- **Ticket** (`.ticket`) — the primary CTA: full-width, double rules top and bottom (`border: 3px double`), Squada One at clamp(1.5–2.6rem), arrow that slides on hover. On taupe use `.ticket--cream`.
- **Macaron** (`.macaron`) — the micro-CTA: a 58px circle with a 2px rule, uppercase Blinker 600 — the record's centre label as a button. Hovers invert and rotate −8°.
- Inert links use `.is-soon` (opacity .38, `pointer-events:none`, `aria-disabled`). Never a dead `href="#"`.

## §5 Components

- **Traveling disc** — `#disc` + `.disc-face` + `.disc-hole`; engine constants: base 100px, spin 26s, `easeInOutCubic` per segment.
- **Platter** — `.platter` + `.tonearm`: the turntable drawn entirely with border rules and radial gradients. The disc lands on `#stop-platter` (75% of the platter).
- **Tracklist** — `.tracklist`/`.track`: counter-numbered buttons, mono timings, click sets `.is-on` (▶).
- **Featured release** — `.featured`: sleeve left (z-index above the disc so it tucks behind, peeking right), body right with `.cat` mono line and a ticket CTA.
- **Release grid** — `.release` buttons; click opens the modal.
- **Release modal** — `.modal`: full-screen paper, prev/next + arrow keys, counter, Escape, focus restore, `body` scroll locked.
- **Etchings list** — `.etch-list`: mono catalogue numbers + hand-scratched messages, hairline rules.
- **Newsletter** — underline input + macaron submit; demo confirmation line.
- **Design System overlay** — `.ds`: ink slide-up panel, internal scroll, palette/type/CTA demos.

## §6 Agent Instructions

1. One traveler only. Never add a second fixed element that moves with scroll.
2. The disc's journey must always end where it began materially: taupe → taupe. If you add sections, insert them between the platter and the footer and keep the papers alternating.
3. New stops are allowed (max one per new section): add a `.disc-stop` placeholder, size it in CSS, and append its id to `stopIds` — the engine handles the rest. Keep 3–5 stops total; more turns choreography into pinball.
4. Respect the rest zones: at least one section between two travel legs where the disc stays docked.
5. No colour accent, ever. If something must stand out, make it bigger, give it rules (double borders), or set it in Squada One — do not reach for a hue.
6. Squada One is never lowercase. Blinker never exceeds weight 600. Etchings, catalogue numbers and eyebrows are always IBM Plex Mono.
7. Respect `prefers-reduced-motion`: the engine must not run; the disc parks statically in the hero (in flow), and the platter stays empty.
8. Never use Inter. Never use #000000. The photography is warm monochrome (taupe-sepia grade) — colour imagery breaks the kit.

> 💡 Full implementation available — this `design.md` ships with a complete HTML/CSS kit: the traveling-disc engine, platter, ticket & macaron CTAs, release modal and DS overlay, ready to use.
> → [www.stacklift.design/kit/deadwax](https://www.stacklift.design/kit/deadwax)