4
4HZ
Drop a link, get the tracklist. 404HZ uses a gray background, blue text and lines, Origin typography, and square record artwork.
All sample data on this page is illustrative and never came from a real scan. Read the contract in DESIGN.md and the tokens in tokens.css.
Tool shell
The tool is a sticky top bar over a 220px icon nav and one panel per screen. The top bar holds the wordmark, a 46px scan form with a filled mono SCAN button, and the profile control. The nav is mono, uppercase, weight 600. The current item sits on a quiet --soft ground in ink. Everything is squared and separated by hairlines. The panel below opens with the set hero first: cover, heading, source and waveform, then the rows.
source soundcloud scanned 2026-09-24 duration 36:45 tracks 4 confidence high
tracklist
-
404-07
Motive StateStatic PressureHZ-008
-
404-07
KorridorPressure SystemHZ-001
-
Nadir ArrayWarehouse DubHZ-009
-
404-07
Linear FormFault LineHZ-011
Track row: stamp, sleeve, artist, title, catalog, store marks, actions. Select a row with the stamp to drive the Player section. Store marks are labelled samples and are not links. At 480px the row collapses to sleeve, title and actions.
Rows, selection and detail
Each row holds a mono tabular stamp, a sleeve with artwork or the catalog number on a quiet ground, the artist and title, and quiet actions. Selection adds a --row-sel tint and a detail strip above the tracklist with the timestamp, artist, title, catalog, play control and store marks. It adds no colour change and no shadow. Timestamps, counts and catalogs use tabular numerals so columns stay aligned.
tracklist
-
404-07
KorridorPressure SystemHZ-001
Scan stage
Press SCAN in the top bar or run the sample below. The round mark turns inside its orbit, the percent counts in Origin Display, the stage line advances, and the rail fills. The run uses no network and identifies nothing.
sample run · no network · illustrative only
0%idle
ready · press scan
0 of 4 tracks · 00:00:00 elapsed
Artwork
Record artwork carries its own colors. The interface stays gray with blue text and controls. These eight fictional sleeves show warm, cool, light and dark artwork on the same field.
Tokens
The colour system is one field, one ink and an ink-alpha ramp. Contrast figures are computed by compositing alphas in sRGB over the field and then applying WCAG relative luminance and ratio. Text pairs must reach 4.5:1. The remaining values are decoration and sit below 3:1 on purpose.
| token | value | role | contrast on field |
|---|---|---|---|
| --field | #bdbdc3 | the one background | n/a |
| --ink | #2921cc | every mark, line, accent | n/a |
| --i1 | #2921cc | primary text | 5.143:1 |
| --i2 | rgba(41,33,204,.96) | secondary text, stamps | 4.921:1 |
| --i3 | rgba(41,33,204,.95) | quiet mono labels | 4.863:1 |
| --i2 on --row-sel | .96 over .03 | text on a selected row | 4.706:1 |
| --i3 on --row-sel | .95 over .03 | labels on a selected row | 4.652:1 |
| --i2 / --i3 on --fill | over .04 | text on a sleeve ground | 4.636 / 4.583:1 |
| field on ink | filled controls | SCAN, play, active chip | 5.143:1 |
| --line | rgba(41,33,204,.5) | control outlines, dividers | 2.32:1 |
| --line2 | rgba(41,33,204,.34) | row dividers (decorative) | 1.75:1 |
| --edge | rgba(41,33,204,.26) | plate cut line (decorative) | 1.52:1 |
| --hot | rgba(41,33,204,.14) | icon-button and row ground. Small text on it fails at 4.13:1 | 1.25:1 |
| --soft | rgba(41,33,204,.06) | text hover ground (safe for ink text) | 1.10:1 |
| --row-sel | rgba(41,33,204,.03) | selected row / hover tint | 1.05:1 |
| --sel-bg / --sel-fg | ink on field | text selection | 5.143:1 |
Layout metrics: --pad clamp(16px,3.6vw,54px) · --max 920px · --slv 54px · --player-h 88px · --r-flat 0 · --r-pill 999px (chips only) · --ease cubic-bezier(.16,1,.3,1).
Type
Origin Display 900 sets the wordmark and the scanner percent. Origin Text sets titles, rows and controls. Mono sets stamps, catalogs, counts, labels and errors.
| role | face | spec |
|---|---|---|
| wordmark | Origin Display 900 | editorial scale here; landing clamp(4rem,24vw,23rem), tool bar 2rem, lh .82, ls -.035em |
| screen title | Origin Text 700 | clamp(1.5rem,3vw,2.1rem), lh 1.02, ls -.01em, max 24ch, sentence case |
| scanner percent | Origin Display 900 | clamp(2rem,5vw,3.4rem), tabular |
| track title / artist | Origin Text 500 / 400 | 1rem / .95rem, artist in --i2, em dash separator |
| section label | Origin Text 600 | 13px, uppercase, ls .2em, --i3 |
| data / labels / errors | mono | 12–max(12px,.85vw), tabular numerals, uppercase ls .09–.2em where structural |
fabric live, corsica studios
facts 07:20 · 128 min · 31 tracks · high
Warehouse Dub — Nadir Array
row · title 500 over artist 400
Controls
A primary action is a filled ink rectangle. A secondary action is a quiet outlined rectangle. A tertiary action is a text link. Chips are the only pill in the product. They report state with aria-pressed and the ink fill. Every control below works.
active filters: all
Player
The player band holds the artwork, the now playing text, the transport, a waveform seek and the time. Row selection updates the title, the artist and the artwork. Left and right arrows seek by 2 percent. Home and End jump to the ends. Space toggles play. In the app this band is fixed to the bottom of every tool screen with a reserved body padding. In this specimen it sits in the page flow.
Pressure System
sample audio not bundled
00:00 / 06:48
Canvas seek with role=slider, arrow keys, Home and End, aria-valuenow in sync. Transport states are visual: play toggles to pause, previous and next move the selection.
States
Every control answers hover, focus, active, disabled, empty and error. Focus is a 2px ink outline at 2px offset. An error is a single mono line prefixed with a bold exclamation. The line wraps and is never clipped or coloured.
that link is not a mix we can read: check the url and scan again, or paste the set page instead of a single track
no sets yet — paste your first link above
nothing in this view yet
Scan a mix link above and the set will land here with its full tracklist.
Responsive
Breakpoints in order. At 1080 the top bar tightens. At 900 the nav narrows to 172px. At 760 the shell turns phone-native: brand and controls on one row, the scan form full width beneath, the nav a horizontal tab strip, and the player reflows. At 640 the player becomes a two-row grid so the now playing text keeps its width. At 480 a track row collapses to sleeve, title and actions, and the chips go square. At 380 the scan submit compresses.
On a phone the row loses its stamp and catalog line. Both stay reachable in the selected-row detail. The title, sleeve and player text keep their size. Resize this page or open it at 375 to check.
Checks
Check contrast in tiers: text at or above 4.5:1, filled controls at field-on-ink 5.143:1, decoration never load-bearing. Check that tabular columns align, that the page has no document-level horizontal scroll at 375 or 1440, that the console stays clean, that focus shows as a 2px outline on every interactive element, that reduced motion kills animation, and that Origin reports loaded. Capture 1440 and 375 and review the screenshots by eye. The full contract lives in DESIGN.md.