--- version: alpha name: afterglow-records-design description: "A near-black canvas (#0a0a0d) with soft white ink (#f2f0f5), a neon magenta (#ff2e88) standing for the label's own mark and primary action, and a cyan (#29e6d0) standing for playback and the needle. Unbounded carries every heading at weight 700, always uppercase; Inter carries the surrounding prose. The system reads as an actual small label's site late at night, not a streaming platform's marketing chrome." --- ## Brand Positioning Afterglow Records is for listeners who want to hear what a small label actually presses, not scroll a recommendation algorithm. It exists because most music-label sites borrow streaming-platform chrome (autoplay hero video, algorithmic "for you" rows, a follower count front and center) that has nothing to do with four tracks a label is genuinely proud of this month. Afterglow's bet: the one piece of drama on the page should be the record itself, spinning up to speed as you scroll, needle dropping into the groove, the same physical motion as actually cueing up a record. Every visual decision below serves that one bet. If a component doesn't help someone hear a track or submit one, or doesn't come from a real label interaction (track list, discography table, demo form, playback status), it doesn't belong in this system. colors: accent: "#ff2e88" accent-alt: "#29e6d0" ink: "#f2f0f5" ink-muted: "#8f8d97" canvas: "#0a0a0d" surface: "#141417" surface-raised: "#1c1c20" border: "#28282e" focus-ring: "#29e6d0" ## Logo / Wordmark System The mark is a rounded-square card containing a miniature vinyl record, concentric groove rings around a magenta label dot, literally a 1:1 miniature of the hero's spinning `#vinyl-group`. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Afterglow" in Unbounded/700, uppercase, mark always left of the wordmark, never stacked or reversed. - **Minimum size**: mark not smaller than `16px` square, below that the groove rings merge into the label dot. Wordmark not smaller than `0.75rem`. - **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all four sides of the lockup. - **Don't**: recolor the mark for a light background, it only ever renders on `--panel`/`--bg`. Don't animate the mark itself, the spin belongs to the hero's full-size record, not the nav. Don't swap the label dot to cyan, magenta marks the record itself consistently, cyan is reserved for the needle and playback state. Don't stretch or rotate the mark as a static asset. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#0a0a0d` | Page background | | Surface | `--panel` | `#141417` | Panels, nav, track rows, table header | | Surface raised | `--surface-raised` | `#1c1c20` | Row hover, input focus bg | | Border | `--border` | `#28282e` | Panel edges, dividers, format tags, table rules, unlit groove rings | | Ink | `--ink` | `#f2f0f5` | Primary text | | Ink muted | `--dim` | `#8f8d97` | Secondary text, helper text, tonearm | | Record / primary | `--accent` | `#ff2e88` | Vinyl label dot, primary button fill, error/retry copy | | Needle / playback | `--accent-alt` | `#29e6d0` | Tonearm needle tip, equalizer bars, playing-status badge, focus ring | Error and "now playing" intentionally use different accents, a failed playback is routed to `--accent` (the same tone as the record itself, a problem with pressing this specific track), while an active, healthy playback state is routed to `--accent-alt` (the needle actually in the groove). Neither is a generic red or green, both stay inside the label's two-color system. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~17.5:1 | AAA | | `--dim` text on `--bg` | ~6.1:1 | AA (body text) | | `--accent` text on `--bg` (retry/error copy) | ~5.7:1 | AA (body text) | | `--accent-alt` text on `--bg` (playing status, links) | ~12.5:1 | AAA | | Dark label on `--accent` fill (primary button) | ~5.7:1 | AA | | `--ink` on `--panel` | ~16.3:1 | AAA | | `--ink` on `--surface-raised` | ~15.0:1 | AAA | The rule this table exists to enforce: a button or badge filled with `--accent` always labels itself in a near-black (`#1a0210`), never `--ink`, white-on-magenta at this saturation reads noticeably flatter and undershoots the crispness the rest of the system holds to. typography: display: fontFamily: Unbounded fontWeight: 700 body: fontFamily: Inter fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(1.75rem, 5vw, 3.25rem)` | 700 | Unbounded | 1.15 | -0.01em | Hero H1 only, always uppercase | | `--text-h2` | `1.25rem` (homepage) / `1.15rem` (second page) | 700 | Unbounded | 1.2 | 0, uppercase | Section headings | | `--text-body` | `1rem` | 400 | Inter | 1.6 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Inter | 1.5 | 0.01em | Footer, nav utility links, helper text, table cells, artist names | | `--text-track` | `1rem` | 600 | Inter | 1.4 | 0 | Track titles | Rule for Unbounded vs. Inter: Unbounded, always uppercase, is reserved for the hero headline and section headings, short moments meant to feel like a record sleeve's spine text. Everything read as continuous information, track titles, artist credits, table cells, form labels, is Inter, chosen because Unbounded at body size becomes hard to scan quickly. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape One radius scale: `--radius: 10px` for panels, track rows, inputs, and table containers. `--radius-pill: 999px` for buttons, format tags, and the playing-status badge. The vinyl record and its label dot are the one intentional full-circle exception. ## Iconography No icon library. The only non-text glyphs are the logo mark, the vinyl/tonearm illustration, the equalizer bars, and one Unicode glyph, `♪` (now playing), set at the same weight as the text beside it. Format is communicated with a plain-language tag ("12″ LP", "Digital"), never a format icon. If a future page needs more iconography, the fallback is Phosphor (line style, `1.5` stroke), that decision just hasn't been needed yet. ## Motion Principles Scroll spins the hero's vinyl record up through two full rotations while the tonearm swings from lifted to resting in the groove, both driven directly by scroll position (`scrub`, not a fixed duration), so the record is always exactly as far along as the scrollbar. Further down, a row of equalizer bars per track settles into place with a short stagger the first time the track list enters view. These are the only scripted animations on either page, everything else (buttons, table rows, form inputs) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. The whole system honors `prefers-reduced-motion` by resting the record at a fixed rotation with the tonearm already down and every equalizer bar at full height, no animation. ### Never-list (written before the impeccable-pass rebuild) 1. No small decorative vinyl icon stacked above a centered headline, the record is large (up to 340px, was 200px) and shares the first viewport with the copy in a two-column layout. 2. No two-button CTA row floating free of the record, the primary action sits beside the intro copy that introduces it. ## Voice & Tone cool, minimal, a little mysterious, no exclamation points. In practice: - **Button label**: "Submit a demo", not "Join Our Family of Artists!" - **Error message**: "Playback failed. This master hasn't been delivered yet.", not "Oops! Can't play that right now!" - **Empty state**: "Nothing queued right now.", not "Nothing to see here, add a track!" - **Success status**: "Now playing, Afterimage", not "🎶 Currently jamming to Afterimage!!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent-alt)`, `2px` offset, applied via `:focus-visible` on every interactive element (links, buttons, inputs, textarea), never removed without a visible replacement. - Reduced motion: the vinyl spin, tonearm swing, and equalizer stagger all check `prefers-reduced-motion: reduce` and render fully resolved with no animation when it's set. - Minimum tap target: `44px` in the smallest dimension for every button and form control on touch viewports. - Color is never the only signal: playback status pairs color with the `♪` glyph and a specific track name, format pairs a plain-language tag with the border-outlined shape, never color alone. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark + wordmark lockup, wordmark uppercase. Right: a Releases link plus one primary button. Collapses to just the lockup and primary button under `480px`, no hamburger, there are only two destinations. ### Buttons Three variants, one radius (`--radius-pill`), one primary accent: - **Primary**: `--accent` fill, dark label, used once per view for the single real action ("Submit a demo", "Send it over"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. Retry actions. - **Ghost**: text-only, `--dim` label, `--ink` on hover. Tertiary actions like "see the roster." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (cyan outline). ### Vinyl + tonearm An SVG record (concentric groove circles, magenta label) paired with a separately-rotating tonearm SVG, both driven by the same scroll-scrubbed rotation state. Illustrative only, not interactive, exists purely to make the "pressed, played" metaphor literal. ### Track rows A flat `.track` panel per song: a five-bar equalizer, title/artist, and a right-aligned duration. The equalizer bars are decorative rhythm, not a real audio visualization, heights are fixed per track, not randomized on load. ### Table Header row in `--panel`/`--dim` labels, body rows in `--bg`, one `--border` rule between rows, row hover to `--surface-raised`. Format cells use the pill-shaped `.format` tag, outlined, never filled, so it doesn't compete visually with the primary button. ### Forms Label above input, `--text-small`/`--dim`. Input/textarea: `--panel` background, `1px solid --border`, `--radius`, `--ink` text, `--dim` placeholder. On `:focus`, border becomes `--accent-alt` and background lifts to `--surface-raised`. On error, border becomes `--accent` and helper text explains what to fix in plain language. ### Status / feedback states - **Loading**: a skeleton shaped like the real content (bars matching text line-heights), not a spinner. - **Empty**: a plain sentence in `--dim`, no illustration. - **Error**: an inline `--accent` message naming the specific issue, with a retry action, never a silent failure. - **Success / status badge**: `--radius-pill`, `1px solid --accent-alt`, `--accent-alt` text on transparent fill, not filled, filled would compete with the primary button's exclusive use of a solid `--accent` fill. ### Footer One row: label name/tagline on the left, real page links on the right (Releases, back to gallery). No invented legal or rights-management text. ## Do's and Don'ts ### Do - Let the vinyl spin and tonearm swing be the only continuously scroll-scrubbed elements on the page. - Reserve `--accent` for the record/primary-action meaning and `--accent-alt` for needle/playback meaning, keep that split consistent everywhere. - Keep the wordmark and section headings uppercase Unbounded, body copy always sentence case, never mix the two. - Use a dark label on any `--accent`-filled surface. - Keep track and release listings to real, specific titles and durations, never placeholder "Track 1" naming. ### Don't - Don't add autoplay audio, a "for you" algorithmic row, or a follower/streams count, this is a small label's site, not a streaming platform. - Don't introduce a generic red/green for error/success, route those to `--accent`/`--accent-alt` respectively, staying inside the two-color system. - Don't replay the equalizer stagger on every scroll pass, reveal once per view. - Don't stack more than one primary button in the same view. - Don't fill a status badge or format tag solid, they stay outlined so the primary button remains the only solid-`--accent`-fill element on screen. ## Known Constraints - Two routes now exist (home, releases), still no real audio player or streaming embed, no responsive breakpoint table beyond a single-column mobile collapse, no artist login or royalty dashboard (the "Submit a demo" form is not wired to anything real, this is a concept demo).