# TRO UI > The TRO design system as a shadcn registry: theme, React components, logo, > spheres, plain CSS and a Claude skill for building TRO websites. - Registry namespace: `@tro` → `https://ui.tro.de/r/{name}.json` - Registry catalog: https://ui.tro.de/r/registry.json - Plain CSS: https://ui.tro.de/tro.css - Plain HTML example page: https://ui.tro.de/examples/plain.html - Claude skill for claude.ai upload: https://ui.tro.de/tro-design-skill.zip - Source: registry.json at the root of the GitHub repository ## Registry items - [@tro/base](https://ui.tro.de/r/base.json) (registry:base): Complete TRO setup for a new project: monochrome Charcoal/Off-White theme, Poppins (ExtraLight/Light/Medium), 1px outlines, pill buttons, 32px card radius, Phosphor icons, the @tro registry namespace and all TRO primitives. Use with `shadcn init`. - [@tro/theme](https://ui.tro.de/r/theme.json) (registry:theme): TRO theme for any shadcn project: Charcoal #1E1E1E on Off-White #F5F5F3 (inverted in dark mode), 1px charcoal borders, 5%/10% charcoal hover tints, a very rounded radius scale (rounded-2xl = 32px cards) and brand weights only (200/300/500). Typography: ExtraLight headlines with tightened tracking, Light small headlines, sentence case everywhere (never all caps), display tokens text-display (heroes, covers) and text-headline (section headlines). Also the TRO spacing grid (p-tro-xs/sm/md/lg = 10/25/40/75px), a max-w-page content width, the brand palette as bg-tro-* utilities, and monochrome chart colours with TRO Yellow (chart-2) for the highlighted value. Add this to restyle every shadcn component at once. - [@tro/font-poppins](https://ui.tro.de/r/font-poppins.json) (registry:font): Poppins, the TRO typeface, in the three brand weights: ExtraLight (200) for headlines, Light (300) for body text, Medium (500) for emphasis. - [@tro/primitives](https://ui.tro.de/r/primitives.json) (registry:item): All TRO UI primitives at once (button, badge, input, textarea, card, switch, slider, progress) plus the theme. Add it in the same command as any shadcn block or component, with --overwrite, so the TRO versions win over the shadcn originals: npx shadcn@latest add login-01 @tro/primitives --overwrite - [@tro/button](https://ui.tro.de/r/button.json) (registry:ui): TRO pill button, a drop-in for shadcn Button (same props). Rounded-full, light weight, sentence case (never all caps). variant: default (solid charcoal, the primary action), outline (1px charcoal outline, the standard TRO pill), secondary, ghost, destructive, link. size: xs, sm, default, lg, icon*. Hover is a 10% charcoal tint with no movement; aria-pressed / aria-current=page render solid charcoal. render={} or render={} works without extra props. - [@tro/badge](https://ui.tro.de/r/badge.json) (registry:ui): TRO tag, a drop-in for shadcn Badge (same props). Small outlined pill in sentence case for categories and labels. variant: outline (default), default (solid), secondary (outlined with 10% tint, for the active tag), destructive, ghost, link. - [@tro/input](https://ui.tro.de/r/input.json) (registry:ui): TRO text input, a drop-in for shadcn Input. Pill-shaped (rounded-full) with a 1px charcoal outline, transparent background and a subtle 5% hover tint. - [@tro/textarea](https://ui.tro.de/r/textarea.json) (registry:ui): TRO textarea, a drop-in for shadcn Textarea. 1px charcoal outline, generous rounding (rounded-xl), auto-sizing to content. - [@tro/card](https://ui.tro.de/r/card.json) (registry:ui): TRO card, a drop-in for shadcn Card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter). 1px outline, 32px radius, 40px inner spacing (size="sm": 24px), ExtraLight titles. A leading becomes a fully rounded grayscale image panel. Pass interactive for clickable cards: 5% charcoal hover tint, no movement. Use one card system for projects, services and insights, and keep cards in a row the same height. - [@tro/switch](https://ui.tro.de/r/switch.json) (registry:ui): TRO switch, a drop-in for shadcn Switch, modelled on the TRO logo: an outlined pill with a solid circle that travels left (off) to right (on). size: default, sm. - [@tro/slider](https://ui.tro.de/r/slider.json) (registry:ui): TRO slider, a drop-in for shadcn Slider: a solid circle travelling along a 1px line, like the TRO play bar, with the selected range drawn as a thicker stroke. Supports ranges and vertical orientation. - [@tro/progress](https://ui.tro.de/r/progress.json) (registry:ui): TRO progress bar, a drop-in for shadcn Progress (Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue): an outlined pill track with a solid charcoal fill, echoing the extended logo. - [@tro/accordion](https://ui.tro.de/r/accordion.json) (registry:ui): TRO Accordion, a drop-in for shadcn Accordion (same props), styled by the TRO theme. - [@tro/alert](https://ui.tro.de/r/alert.json) (registry:ui): TRO Alert, a drop-in for shadcn Alert (same props), styled by the TRO theme. - [@tro/alert-dialog](https://ui.tro.de/r/alert-dialog.json) (registry:ui): TRO Alert Dialog, a drop-in for shadcn Alert Dialog (same props), styled by the TRO theme. - [@tro/aspect-ratio](https://ui.tro.de/r/aspect-ratio.json) (registry:ui): TRO Aspect Ratio, a drop-in for shadcn Aspect Ratio (same props), styled by the TRO theme. - [@tro/attachment](https://ui.tro.de/r/attachment.json) (registry:ui): TRO Attachment, a drop-in for shadcn Attachment (same props), styled by the TRO theme. - [@tro/avatar](https://ui.tro.de/r/avatar.json) (registry:ui): TRO Avatar, a drop-in for shadcn Avatar (same props), styled by the TRO theme. - [@tro/breadcrumb](https://ui.tro.de/r/breadcrumb.json) (registry:ui): TRO Breadcrumb, a drop-in for shadcn Breadcrumb (same props), styled by the TRO theme. - [@tro/bubble](https://ui.tro.de/r/bubble.json) (registry:ui): TRO Bubble, a drop-in for shadcn Bubble (same props), styled by the TRO theme. - [@tro/button-group](https://ui.tro.de/r/button-group.json) (registry:ui): TRO Button Group, a drop-in for shadcn Button Group (same props), styled by the TRO theme. - [@tro/calendar](https://ui.tro.de/r/calendar.json) (registry:ui): TRO Calendar, a drop-in for shadcn Calendar (same props), styled by the TRO theme. - [@tro/carousel](https://ui.tro.de/r/carousel.json) (registry:ui): TRO Carousel, a drop-in for shadcn Carousel (same props), styled by the TRO theme. - [@tro/chart](https://ui.tro.de/r/chart.json) (registry:ui): TRO Chart, a drop-in for shadcn Chart (same props), styled by the TRO theme. - [@tro/checkbox](https://ui.tro.de/r/checkbox.json) (registry:ui): TRO Checkbox, a drop-in for shadcn Checkbox (same props), styled by the TRO theme. - [@tro/code-block](https://ui.tro.de/r/code-block.json) (registry:ui): TRO Code Block, a drop-in for shadcn Code Block (same props), styled by the TRO theme. - [@tro/collapsible](https://ui.tro.de/r/collapsible.json) (registry:ui): TRO Collapsible, a drop-in for shadcn Collapsible (same props), styled by the TRO theme. - [@tro/combobox](https://ui.tro.de/r/combobox.json) (registry:ui): TRO Combobox, a drop-in for shadcn Combobox (same props), styled by the TRO theme. - [@tro/command](https://ui.tro.de/r/command.json) (registry:ui): TRO Command, a drop-in for shadcn Command (same props), styled by the TRO theme. - [@tro/context-menu](https://ui.tro.de/r/context-menu.json) (registry:ui): TRO Context Menu, a drop-in for shadcn Context Menu (same props), styled by the TRO theme. - [@tro/dialog](https://ui.tro.de/r/dialog.json) (registry:ui): TRO Dialog, a drop-in for shadcn Dialog (same props), styled by the TRO theme. - [@tro/direction](https://ui.tro.de/r/direction.json) (registry:ui): TRO Direction, a drop-in for shadcn Direction (same props), styled by the TRO theme. - [@tro/drawer](https://ui.tro.de/r/drawer.json) (registry:ui): TRO Drawer, a drop-in for shadcn Drawer (same props), styled by the TRO theme. - [@tro/dropdown-menu](https://ui.tro.de/r/dropdown-menu.json) (registry:ui): TRO Dropdown Menu, a drop-in for shadcn Dropdown Menu (same props), styled by the TRO theme. - [@tro/empty](https://ui.tro.de/r/empty.json) (registry:ui): TRO Empty, a drop-in for shadcn Empty (same props), styled by the TRO theme. - [@tro/field](https://ui.tro.de/r/field.json) (registry:ui): TRO Field, a drop-in for shadcn Field (same props), styled by the TRO theme. - [@tro/hover-card](https://ui.tro.de/r/hover-card.json) (registry:ui): TRO Hover Card, a drop-in for shadcn Hover Card (same props), styled by the TRO theme. - [@tro/input-group](https://ui.tro.de/r/input-group.json) (registry:ui): TRO Input Group, a drop-in for shadcn Input Group (same props), styled by the TRO theme. - [@tro/input-otp](https://ui.tro.de/r/input-otp.json) (registry:ui): TRO Input Otp, a drop-in for shadcn Input Otp (same props), styled by the TRO theme. - [@tro/item](https://ui.tro.de/r/item.json) (registry:ui): TRO Item, a drop-in for shadcn Item (same props), styled by the TRO theme. - [@tro/kbd](https://ui.tro.de/r/kbd.json) (registry:ui): TRO Kbd, a drop-in for shadcn Kbd (same props), styled by the TRO theme. - [@tro/label](https://ui.tro.de/r/label.json) (registry:ui): TRO Label, a drop-in for shadcn Label (same props), styled by the TRO theme. - [@tro/marker](https://ui.tro.de/r/marker.json) (registry:ui): TRO Marker, a drop-in for shadcn Marker (same props), styled by the TRO theme. - [@tro/menubar](https://ui.tro.de/r/menubar.json) (registry:ui): TRO Menubar, a drop-in for shadcn Menubar (same props), styled by the TRO theme. - [@tro/message](https://ui.tro.de/r/message.json) (registry:ui): TRO Message, a drop-in for shadcn Message (same props), styled by the TRO theme. - [@tro/message-scroller](https://ui.tro.de/r/message-scroller.json) (registry:ui): TRO Message Scroller, a drop-in for shadcn Message Scroller (same props), styled by the TRO theme. - [@tro/native-select](https://ui.tro.de/r/native-select.json) (registry:ui): TRO Native Select, a drop-in for shadcn Native Select (same props), styled by the TRO theme. - [@tro/navigation-menu](https://ui.tro.de/r/navigation-menu.json) (registry:ui): TRO Navigation Menu, a drop-in for shadcn Navigation Menu (same props), styled by the TRO theme. - [@tro/pagination](https://ui.tro.de/r/pagination.json) (registry:ui): TRO Pagination, a drop-in for shadcn Pagination (same props), styled by the TRO theme. - [@tro/popover](https://ui.tro.de/r/popover.json) (registry:ui): TRO Popover, a drop-in for shadcn Popover (same props), styled by the TRO theme. - [@tro/questionnaire](https://ui.tro.de/r/questionnaire.json) (registry:ui): TRO Questionnaire, a drop-in for shadcn Questionnaire (same props), styled by the TRO theme. - [@tro/radio-group](https://ui.tro.de/r/radio-group.json) (registry:ui): TRO Radio Group, a drop-in for shadcn Radio Group (same props), styled by the TRO theme. - [@tro/resizable](https://ui.tro.de/r/resizable.json) (registry:ui): TRO Resizable, a drop-in for shadcn Resizable (same props), styled by the TRO theme. - [@tro/scroll-area](https://ui.tro.de/r/scroll-area.json) (registry:ui): TRO Scroll Area, a drop-in for shadcn Scroll Area (same props), styled by the TRO theme. - [@tro/select](https://ui.tro.de/r/select.json) (registry:ui): TRO Select, a drop-in for shadcn Select (same props), styled by the TRO theme. - [@tro/separator](https://ui.tro.de/r/separator.json) (registry:ui): TRO Separator, a drop-in for shadcn Separator (same props), styled by the TRO theme. - [@tro/sheet](https://ui.tro.de/r/sheet.json) (registry:ui): TRO Sheet, a drop-in for shadcn Sheet (same props), styled by the TRO theme. - [@tro/sidebar](https://ui.tro.de/r/sidebar.json) (registry:ui): TRO Sidebar, a drop-in for shadcn Sidebar (same props), styled by the TRO theme. - [@tro/skeleton](https://ui.tro.de/r/skeleton.json) (registry:ui): TRO Skeleton, a drop-in for shadcn Skeleton (same props), styled by the TRO theme. - [@tro/sonner](https://ui.tro.de/r/sonner.json) (registry:ui): TRO Sonner, a drop-in for shadcn Sonner (same props), styled by the TRO theme. - [@tro/spinner](https://ui.tro.de/r/spinner.json) (registry:ui): TRO Spinner, a drop-in for shadcn Spinner (same props), styled by the TRO theme. - [@tro/table](https://ui.tro.de/r/table.json) (registry:ui): TRO Table, a drop-in for shadcn Table (same props), styled by the TRO theme. - [@tro/tabs](https://ui.tro.de/r/tabs.json) (registry:ui): TRO Tabs, a drop-in for shadcn Tabs (same props), styled by the TRO theme. - [@tro/toast](https://ui.tro.de/r/toast.json) (registry:ui): TRO Toast, a drop-in for shadcn Toast (same props), styled by the TRO theme. - [@tro/toggle](https://ui.tro.de/r/toggle.json) (registry:ui): TRO Toggle, a drop-in for shadcn Toggle (same props), styled by the TRO theme. - [@tro/toggle-group](https://ui.tro.de/r/toggle-group.json) (registry:ui): TRO Toggle Group, a drop-in for shadcn Toggle Group (same props), styled by the TRO theme. - [@tro/tooltip](https://ui.tro.de/r/tooltip.json) (registry:ui): TRO Tooltip, a drop-in for shadcn Tooltip (same props), styled by the TRO theme. - [@tro/trace](https://ui.tro.de/r/trace.json) (registry:ui): TRO Trace, a drop-in for shadcn Trace (same props), styled by the TRO theme. - [@tro/use-mobile](https://ui.tro.de/r/use-mobile.json) (registry:hook): Support code for TRO components, mirrored from shadcn Use Mobile. - [@tro/use-highlighted-code](https://ui.tro.de/r/use-highlighted-code.json) (registry:hook): Support code for TRO components, mirrored from shadcn Use Highlighted Code. - [@tro/logo](https://ui.tro.de/r/logo.json) (registry:component): The official TRO logo as a React component, always with its pill frame: solid circle + wordmark, built to the brand construction (frame stroke = half the letter stroke). variant: default (compact), extended (fills its container; use full-width in headers and footers). orientation: horizontal, vertical (turned 90° clockwise, for a layout's vertical edge). size: xs, sm, default (56px high), lg. progress={0..1} moves the circle along the bar, so the logo doubles as a play bar or progress indicator. claim adds the fixed "World building sound" lockup. Colour follows currentColor (dark on light, light on dark). Keep clear space of one circle diameter around it; never recolour, distort, rotate other than 90°, make transparent, outline the circle or swap the typeface. - [@tro/sphere](https://ui.tro.de/r/sphere.json) (registry:component): The TRO sphere, the only colour element on TRO websites: a soft, luminous, blurred colour field placed behind content (absolute; centred, cropped at an edge, or reduced to an arc in a corner of an overflow-hidden section). preset: aura (default, the styleguide sphere), sunrise, ember, ocean, dusk, blush, lavender. colors: custom colours, first is the base (combine a client's colours with TRO Yellow #FFC832). image: an official rendered sphere hosted on ui.tro.de (e.g. red-1, purple-2-distorted for the textured look). mono: monochrome sphere in currentColor; blur="0" for a crisp circle. Size it with a width class. Use sparingly; keep text readable; no other accent colours or gradients. - [@tro/icons](https://ui.tro.de/r/icons.json) (registry:component): The eight TRO brand icons as React components (OrchestrationIcon, AmplificationIcon, SimplificationIcon, InspirationIcon, SignificationIcon, SoundIcon, VoiceIcon, MusicIcon). Thin line illustrations from the world of sound, in currentColor; use them large (40px+) for features, services and values. For small UI icons use Phosphor in thin or light weight. - [@tro/icon-provider](https://ui.tro.de/r/icon-provider.json) (registry:component): Sets the TRO icon style for all Phosphor icons (@phosphor-icons/react, the TRO icon library; never use lucide-react). Wrap the app root in once. Default weight light for UI sizes; use weight="thin" on icons from 32px up, as in the styleguide. - [@tro/skill](https://ui.tro.de/r/skill.json) (registry:item): Installs the tro-design agent skill into .claude/skills/tro-design: TRO brand rules, setup paths, typography, colour, spheres, logo and page patterns, plus the plain tro.css for artifacts. Works in any project, no components.json needed. - [@tro/css](https://ui.tro.de/r/css.json) (registry:item): Framework-agnostic TRO styles as one plain CSS file (styles/tro.css): tokens, Poppins, base typography and component classes (tro-btn, tro-badge, tro-input, tro-card, tro-logo, tro-sphere, tro-label). For Astro, Svelte, plain HTML or any project without Tailwind. Also served at https://ui.tro.de/tro.css. ## Brand guide TRO is a sound branding agency: "Creators of Symphonic Worlds", claim "World building sound". The digital identity is calm, monochrome and precise: Charcoal on Off-White, thin 1px outlines, very round shapes, light Poppins type. The only colour on a page comes from the **spheres**. Source of truth: https://ui.tro.de (registry, docs, `llms.txt`, `tro.css`). ### 1. Set up Pick the path that matches the project. Don't hand-roll TRO styles when a component exists. **React + Tailwind (shadcn) — new project** ```bash npx shadcn@latest init https://ui.tro.de/r/base.json ``` Installs the theme, Poppins, the `@tro` namespace, all TRO primitives, the logo, spheres, icons and this skill. Then wrap the app root in `` (see Icons) and remove `lucide-react` if the template added it. **React + Tailwind — existing shadcn project** ```bash 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 ``` `@tro/button`, `badge`, `input`, `textarea`, `card`, `switch`, `slider`, `progress` are drop-in replacements for the shadcn components of the same name (same props). Brand pieces install to `components/tro/`: `logo`, `sphere`, `icons`, `icon-provider`. `@tro/theme` alone already restyles every other shadcn component. List everything with `npx shadcn@latest list @tro`. **Adding shadcn blocks and components (important)** shadcn blocks depend on the original `button`, `input`, `card` … and would replace the TRO versions. In a non-interactive shell the overwrite prompt also aborts the install halfway. Always add `@tro/primitives` in the same command, with `--overwrite`, so the TRO versions win: ```bash npx shadcn@latest add login-01 dashboard-01 @tro/primitives --overwrite --yes ``` If a TRO primitive was replaced anyway, restore it with `npx shadcn@latest add @tro/button --overwrite`. Components without a TRO version (dialog, select, table, tabs …) are styled by the theme; keep them as they are. **Anything else (Astro, Svelte, plain HTML, Claude artifacts)** Use the plain CSS build, either linked or inlined (inline it in artifacts; a copy sits next to this file as `tro.css`): ```html ``` Classes: `tro-btn` (`--solid`, `--ghost`, `--sm`, `--lg`), `tro-badge` (`--active`, `--solid`), `tro-input`, `tro-textarea`, `tro-card` (`--interactive`, `__title`, `__description`), `tro-label`, `tro-image`, `tro-logo` (`--extended`, `--vertical`; markup in the CSS comments), `tro-logo-lockup`, `tro-sphere` (`--sunrise`, `--ember`, `--ocean`, `--dusk`, `--blush`, `--lavender`, `--mono`, `--crisp`). Dark mode: `class="dark"` on ``. Example page: https://ui.tro.de/examples/plain.html ### 2. Colour | Token | Value | Use | | --- | --- | --- | | Charcoal | `#1E1E1E` | text, 1px lines, solid buttons, dark sections | | Off-White | `#F5F5F3` | page background, text on charcoal | | Hover tint | Charcoal 10% (buttons) / 5% (cards, inputs) | hover states | - Web UI is **monochrome**. No accent colour: no yellow buttons, no coloured links, no coloured headings, no extra gradients. - Colour only enters through **spheres** (and photos). Use them sparingly. - Dark sections (e.g. the footer) invert: Off-White text and outlines on Charcoal. Wrap them in `className="dark"` so all tokens flip. - The brand palette exists for charts, campaigns and spheres only: Yellow `#FFC832` (the constant in every sphere), Red `#FA5A19`, Lavender `#DCC3FA`, Light Blue `#A0DCFF` (Tailwind: `bg-tro-yellow` …). ### 3. Typography Poppins only, in three weights: ExtraLight 200, Light 300, Medium 500. The theme maps every Tailwind weight onto these, so `font-bold` becomes Medium. | Element | Size | Line height | Weight | Highlight | | --- | --- | --- | --- | --- | | H1 | 3rem | 110% | ExtraLight, −0.02em tracking | Light | | H2 | 1.75rem | 120% | ExtraLight, −0.01em tracking | Light | | H3 | 1.5rem | 125% | ExtraLight | Light | | H4–H6 / small headlines (< 26px) | | 120% | Light | Medium | | Body large | 1rem | 160% | Light | Medium | | Body small | 0.75rem | 160% | Light | Medium | | Lists | body size | 160% | Light, mixed case | | | Label / eyebrow | 0.875rem | 130% | Medium | | | Button, tag | 0.75–0.875rem | | Light | | The theme applies all of this to plain `h1`–`h6`, `strong` and `body`. - Highlight key words with ``: inside H1–H3 it renders Light, in body text Medium. `

Creators of Symphonic Worlds

` - Display sizes (above 3rem, e.g. a hero or cover) use ExtraLight with 110% line height and `tracking-tight`; the bigger the type, the tighter. - Labels/eyebrows: `className="tro-label"`, e.g. `TRO — Soundbranding Agentur`. - **Sentence case everywhere**: buttons, tags, labels, eyebrows, nav, toggles, annotations and headlines. Capitalise the first letter (and names), nothing else. Never all caps, never wide letter-spacing: it reads as generic and AI-made, not TRO. - Large, airy headlines. Never bold. ### 4. Shape, lines, spacing - Lines are **1px solid Charcoal** (`border-border`). No shadows, no elevation; separation comes from outlines and space. - Very round: buttons, tags, inputs and the logo are `rounded-full`; cards are 32px (`rounded-2xl`). - Spacing grid: **10 / 25 / 40 / 75 px** (`p-tro-xs`, `p-tro-sm`, `p-tro-md`, `p-tro-lg`, also for `gap-`, `m-` …). Cards use 40px inner spacing and 40px gaps. Reduce proportionally on small screens. - Motion is calm: colour transitions only. No hover lifts, no scale, no bounce. The one signature motion is the logo circle travelling left to right. ### 5. Components - **Buttons** are pills. `variant="outline"` is the standard TRO pill; `default` (solid Charcoal) is for the one primary action and for the active/current state. Hover = 10% tint. - **Links styled as buttons**: ``, or `className={cn(buttonVariants({ variant: "outline" }))}`. Always wrap `buttonVariants` in `cn()`: on its own, the base `border-transparent` overrides the outline border. - **Tags** (`Badge`, outline by default) label categories on cards: `Sound branding`, `Soundlogo`, `Audio UX`. - **Cards**: one card system for projects, services, insights. Image first (rounded, grayscale), then an ExtraLight title, a short description and tags. Same height for all cards in a row; `interactive` for clickable cards (5% hover tint). - **Switch / Slider / Progress** echo the logo: an outlined pill or line with a solid circle that travels left to right. - **Section markers**: chapters are numbered with an outlined circle (`inline-flex size-8 items-center justify-center rounded-full border text-sm`) next to a two-line title: the topic, then a lighter subtitle ("Logo" / "Construction"). ### 6. Icons - **Phosphor** (`@phosphor-icons/react`) is the TRO icon library. Never use `lucide-react`, even if a template installed it; remove it (`npm uninstall lucide-react`) and import from `@phosphor-icons/react`. - Wrap the app root once in `` from `@/components/tro/icon-provider`: it sets the TRO weight for every icon (light at UI sizes; pass `weight="thin"` from 32px up, as in the styleguide). Icons imported from `@phosphor-icons/react/ssr` in Server Components don't see the provider: pass `weight="light"` there. - The eight TRO icons (`OrchestrationIcon`, `SoundIcon`, … from `@/components/tro/icons`) are thin line illustrations for large use (40px+): services, values, features. Outlines only, never filled. ### 7. Logo `` from `@/components/tro/logo`. A solid circle and the wordmark inside a pill frame; the frame stroke is half the letter stroke. The logo **always** has its frame: there is no circle-only or wordmark-only logo. - Headers and footers use `variant="extended"`: it fills the container; the circle stays left, the wordmark right, only the frame grows. Navigation sits to the right of a header logo; a full-width logo can run along the top or bottom edge of a page. - `orientation="vertical"` turns it 90° clockwise (circle on top) to run along a vertical edge. - `progress={0..1}` turns it into a play/progress bar: the circle travels along the bar. - `claim` adds "World building sound" below: a fixed lockup, never separated or rearranged. - Clear space: at least one circle diameter on every side. Minimum width 168px. - Dark on light, light on dark (set `text-*`). Never recolour it, make it transparent, distort it, rotate it other than 90°, change the spacing, outline the circle, swap the typeface, or place it on busy or low-contrast backgrounds. ### 8. Spheres `` from `@/components/tro/sphere`: soft, luminous, blurred colour fields that make sound visible. A form without edges, expanding from its centre. - Place them **behind** content, absolutely positioned and sized with a width class: large in the hero, cropped at an edge, or reduced to a single arc in a corner. Clip with an `overflow-hidden` section and give the content `relative z-10` so it paints above the sphere. - `preset`: `aura` (default, the styleguide sphere: lavender, yellow, light blue), `sunrise`, `ember`, `ocean`, `dusk`, `blush`, `lavender`. - For client work combine the client's colours with TRO Yellow, the constant in every sphere: `colors={["#E20074", "#FFC832", "#F5F5F3"]}` (the first colour is the base). - Texture: the official renders, e.g. `image="red-1-distorted"` (fine inner structure) or `image="lavender-2"` (soft). Hosted on ui.tro.de. - `mono` gives the monochrome sphere (white on dark, black on light); `blur="0"` makes it a crisp circle. - Text over a sphere must stay readable; never add other colour overlays or gradients. ### 9. Infographics and charts - Organic meets technical: spheres and soft fills combined with thin 1px lines and small annotations (`tro-label`). - Monochrome by default. **TRO Yellow highlights the key value** only (`chart-2`); the other series use `chart-1` and the greys `chart-3` to `chart-5`. - Bars are fully rounded pills (`radius` = half the bar width), solid or 1px outlined, on thin grid lines. Pie and Venn charts are drawn with thin lines, optionally over a sphere. - Annotations: a thin line ending in a small open circle, pointing to an small label ("113 bpm", "High energy"). ### 10. Imagery - Black and white only (`grayscale` / `tro-image`), so the spheres stay the only colour. - Real and unposed: everyday moments, real people, small details. Blur, unusual crops and imperfect framing are part of the style. Unsplash is a fine source. ### 11. Page patterns (from tro.de) - **Header**: extended logo on the left (max ~60% width), small nav links on the right, sphere bleeding in from behind. - **Hero**: big sphere behind; small `tro-label` eyebrow; H1 in ExtraLight on two lines; generous whitespace; optional full-width grayscale image or video below with a logo-switch ("Ton einschalten"). - **Content**: alternating image/text project cards, centred ExtraLight statements between them, a sphere drifting behind the section. - **Logo wall**: client logos in grayscale on a 6-column grid. - **Footer**: `dark` section; "Get in touch" + contact links in large Light type; outlined location cards; full-width extended logo; nav links; small legal row. - **Posters, covers, social posts**: big ExtraLight headline, sphere behind or bleeding off an edge, extended logo along the bottom edge, rounded corners, category tags. ### 12. Voice Confident, warm, concise. Speak about sound as space: "Designed to be heard.", "Cut through the noise and make your brand heard." German and English are both used; keep one language per page.