← All workCase Study
Dorsyth Records
The public website for Dorsyth Records — the label’s home for artists, releases, and film.
Overview
Dorsyth Records is Dorsyth’s music division, home to artists Caleb Ash and PRTTYWISE — two acts with deliberately different visual identities. The site carries their releases, artist pages, and video content under one production build.
Context & challenge
The previous site had no consistent design system across the two artist “worlds,” and gaps in keyboard accessibility — tab stops with no visible focus state, in places.
- Role
- Design and development, end to end.
- Technology
- Next.js App Router, TypeScript, CSS Modules with a shared design-token layer.
- Delivered
- The homepage, per-artist pages, release pages, and a video/watch section, unified under one token system so two distinct artist identities share the same underlying structure without looking templated.
Verified evidence
- Every keyboard tab stop carries a visible focus indicator — 387 stops audited across 12 route and viewport combinations.
- The production build passes lint, TypeScript checks, and an automated test suite (62 tests) with no failures.
- Homepage transfer payload cut by approximately 76% on mobile — ~5.1MB to ~1.2MB (~5.2MB to ~1.3MB on desktop) — measured on a production build, by restoring targeted Next.js image optimization for first-party artwork while YouTube thumbnails continue to bypass it.
Screenshots
