TRO — Design system

Components for symphonic worlds.

The TRO brand as a shadcn registry: one theme, drop-in components, the logo, the spheres and a Claude skill. Built for Claude Code, Claude Design and anyone vibe coding a TRO website.

$ npx shadcn@latest init https://ui.tro.de/r/base.json
Get started Components

Install

One brand, every setup.

New React project
Theme, Poppins, the @tro namespace, all primitives, logo, spheres, icons and the Claude skill in one step.
$ npx shadcn@latest init https://ui.tro.de/r/base.json
Existing shadcn project
Register the namespace, then add what you need. The theme alone restyles every shadcn component.
$ npx shadcn@latest registry add @tro=https://ui.tro.de/r/{name}.json
$ npx shadcn@latest add @tro/theme @tro/button @tro/card @tro/logo

Adding shadcn blocks? Add the TRO primitives in the same command so they win: npx shadcn@latest add login-01 @tro/primitives --overwrite

Any framework
Astro, Svelte, plain HTML, prototypes and Claude artifacts: one CSS file with tokens and component classes.
$ npx shadcn@latest add https://ui.tro.de/r/css.json

Or link https://ui.tro.de/tro.css. See the plain HTML example.

Claude skill
Brand rules, setup paths and page patterns for Claude Code, installed to .claude/skills/tro-design.
$ npx shadcn@latest add https://ui.tro.de/r/skill.json

Claude chat and Claude Design: download tro-design-skill.zip and upload it under Settings → Skills.

Components

Drop-in for shadcn, shaped like TRO.

Same names, same props. Install over the shadcn originals and every block you add afterwards renders in TRO style.

Button
$ npx shadcn add @tro/button
Badge
Sound brandingSoundlogoAudio UXMusic
$ npx shadcn add @tro/badge
Input and textarea
$ npx shadcn add @tro/input
Switch
$ npx shadcn add @tro/switch
Slider
$ npx shadcn add @tro/slider
Progress
Mastering
x
$ npx shadcn add @tro/progress
Logo
World building sound
$ npx shadcn add @tro/logo
Card
Sound branding
Cut through the noise and make your brand heard.
Sound brandingSoundlogo
Music concept and production
Cut through the noise and make your brand heard.
Music
Audio user experience
Cut through the noise and make your brand heard.
Audio UXSound
$ npx shadcn add @tro/card
Icons
Orchestration
Amplification
Simplification
Inspiration
Signification
Sound
Voice
Music
$ npx shadcn add @tro/icons

Brand

Monochrome, with colour only in the spheres.

Colour
Charcoal and Off-White for every interface. The palette lives in spheres, charts and campaigns, never as a UI accent.
Charcoal
#1E1E1E
Off-White
#F5F5F3
Yellow
#FFC832
Red
#FA5A19
Lavender
#DCC3FA
Light blue
#A0DCFF
Typography
Poppins in ExtraLight, Light and Medium. Highlights with <strong>.

Designed to be heard.

Crafting sonic spaces that last.

Chapter 1

Body copy in Light at 160% line height, with Medium highlights for key words.

Spheres
Rendered in CSS at any size, from presets or a client's colours combined with TRO Yellow.
aura
sunrise
ember
ocean
dusk
blush
lavender
Client
Mono
Crisp