Dorsyth Records
The public website for Dorsyth Records — the label’s home for artists, releases, and film.
Overview
This is the production platform for Dorsyth Records — Dorsyth’s music division, home to artists Caleb Ash and PRTTYWISE, two acts with deliberately different visual identities. It carries every artist world, release, and video under one shared system, not two separate sites stitched together.
Context & challenge
Caleb Ash and PRTTYWISE don’t share a visual identity by design — one act’s world reads nothing like the other’s. The previous site had no consistent design system across those two artist worlds, which made every new page feel like a one-off rather than part of the same production.
It also had real accessibility gaps: tab stops with no visible focus state, in places, on a site meant to carry every future release and artist page the label adds. The challenge was building one system that could hold both distinct artist worlds — and every route type within them — without sacrificing consistency or accessibility to get there.
Approach
The system starts from one shared foundation: a CSS Modules token layer that defines type, color, spacing, and rule treatment once, site-wide. Each artist’s visual identity is expressed on top of that shared foundation, page by page, rather than as a forked design system — so Caleb Ash and PRTTYWISE can look distinct while the homepage, artist pages, release pages, and video/watch pages all share the same underlying route and component discipline.
Accessibility was folded into that same system-level work rather than treated as a retrofit: the keyboard-focus audit covers every route type the system produces, not a sample of pages checked after launch.
What was built
The rebuild covers the full site: the homepage and its current-release hero, per-artist pages for Caleb Ash and PRTTYWISE, release pages, and a video/watch section — all unified under the token system above, so two visually distinct artist identities share the same underlying structure without looking templated.
Implementation
Next.js App Router and TypeScript form the application layer. CSS Modules, paired with the shared design-token layer, is what makes the artist-identity system possible without a CSS-in-JS runtime or a separate design-system package — styles stay scoped per component while the tokens keep them consistent site-wide.
Accessibility & engineering proof
Every keyboard tab stop on the site carries a visible focus indicator — 387 stops audited across 12 route and viewport combinations. In plain terms: a visitor navigating by keyboard alone, not a mouse, can always see where they are on the page, on every route type the site produces and at every standard viewport size, not just the homepage.
Outcome
- The rebuild is live in production at dorsythrecords.com, carrying the homepage, both artist worlds, release pages, and video content on the one shared system described above.
- The production build passes lint, TypeScript checks, and an automated test suite — 62 tests, no failures.
- Restoring targeted image optimization for first-party artwork (while leaving YouTube thumbnails to bypass it) cut homepage transfer weight by roughly 76% on mobile — about 5.1MB to about 1.2MB, measured on a production build.
Visual evidence
Three views of the same system: the shared homepage, one artist world expressed inside it, and the same homepage adapted to a phone viewport.
