Every surface — this site and the app — reads from a single file, /brand.css. Change a token here and the whole product moves with it. This page is that system, made visible.
An abstract “deck”: three faders / tracklist rows. Defined once as /favicon.svg and reused as the favicon, the nav mark and the app icon.
One accent only — indigo. Greens and ambers are reserved for status (Approved / WIP). No rainbow gradients, no neon glow.
A dark-grey frosted fill over a real backdrop-filter blur. The single most recognisable element. Class: .glass / .glass-strong.
Buttons, status pills and the eyebrow chip all live in /brand.css. Use them as-is across the site and the app.
Both trackdeck.de and the app link the same /brand.css. The colours, the glass material, the logo, the buttons — all defined once. Update a token here and every screen that uses it changes on the next load. New tools built in this style inherit the same look for free.
Building a different product? The same system, stripped of Trackdeck branding, lives as a portable design system → Obsidian Glass (/system). One file, one accent variable, bring your own logo.