A design system that defines the platform before the product ships

Rádio Alvorada is not one site. It is a public platform, a browser-based audio studio, and a custom live TV viewer: three surfaces serving one gospel media brand. They share one identity because they were designed to inherit from the same foundation.

I built that foundation first. Tokens, typography, spacing, motion, and the core components were established and documented before the website shipped, then extended as audio tooling and live TV followed. The public reference at /design-system is where those decisions live: argued on the page, copyable, and ready for the next surface.

The brief I set for the system was simple: one warm, reverent identity that stays calm whether someone is listening to music, watching a live broadcast, or reading an article. That meant constraining the palette, limiting accent colors to semantic roles, and keeping interface density low enough that the content always leads.

The palette is candle-lit: a primary gold leading into warm amber and cream, all resting on a layered navy. Coral is reserved for one job only, the live, on-air moment, so “we are broadcasting” never competes with ordinary actions for attention.

Tokens are semantic, not literal. --primary, --card, --foreground: names that describe intent, not hex values. That keeps the whole identity re-themeable from a single place and makes contrast pairings a contract, not a guess.

Most design systems treat color as a wall of squares. I treated it as the section a team opens most and judges the system by: so it earned bespoke layouts instead of a generic swatch grid. Every decision is visible, testable, and copyable on the page.

Eleven components are documented the same disciplined way: a live preview, usage guidance, a variant table, and accessibility notes. Buttons, cards, inputs, play controls, live indicators, media frames, and step lists: each with a clear answer to “when do I reach for this?”

Variant strategy follows intent, not decoration. Primary actions use gold; destructive actions are rare and visually distinct; ghost and outline variants exist for secondary contexts. Loading, disabled, and active states are documented alongside the default so no surface invents its own spinner or opacity trick.

Accessibility is documented as a foundation layer, alongside color and type, not as a footnote on individual components. Focus rings, minimum 44px touch targets, reduced-motion behavior, skip links, and live regions are specified once and inherited everywhere.

The contrast section closes the loop: every text-on-surface pairing the product ships is rated on the page. If a new surface needs a pairing not yet documented, that is a system change, not a local override.

The documentation navigation was designed as a spatial map, not a hamburger menu of links. On desktop, a fixed sidebar holds the full system tree and never drifts with the page. On mobile, the same tree collapses into a calm, non-scrolling drawer that shows foundations, components, and patterns grouped and counted at a glance.

Breaking the system into one page per section keeps each topic shareable by URL and short enough to absorb. The overview is a card index; every section is a destination. That information architecture scales as the library grows.

The website, audio tooling, and live TV viewer each started from the same tokens and components documented here. When a new surface needs a UI element, the first question is whether an existing component or pattern already covers it. Only when the answer is no does the library grow.

That governance keeps the system small, opinionated, and defensible. The result is a living reference a team can lift from and a designer can argue from: documented so the next surface starts from certainty, not guesswork.