brand-and-accent

Summary

The app has two blues, indigo and blue, and the design set names them brand and accent.

Why it matters

The app declares no theme. globals.css imports Tailwind and every component picks a hue by name. Read across the components, two hues do the work of a brand colour, and they are not interchangeable in the code:

• indigo-600 — Button variant="primary", the header's "Start Recording", filter tabs, focus rings, the free-tier branding block.
• blue-600 — text links in the auth forms, the highlighted pricing card and its "Most Popular" badge, the recorder's own "Start Recording" button and its toggles, the current plan on the billing page.

Nobody decided this; it is what the code does. Drawing both as one colour would hide it, and the set is meant to describe the app that exists.

Implications

• brand-* is the indigo ramp and accent-* is the blue ramp in shared.css.
• A screen uses the one its component uses. The recorder menu's Start button is btn--accent; the header's is btn--primary.
• The logo is a third thing: a violet-to-indigo gradient, kept as designs/brand/mark.svg.
• Collapsing the two into one is a product decision. It changes the app first, then this file.

Related

• recording-red
• home
• recorder
• pricing

Sources

• packages/ui/src/components/ui/button.tsx
• packages/ui/src/components/marketing/pricing-card.tsx
• packages/ui/src/components/recording/recording-menu.tsx
• packages/ui/src/components/ui/logo.tsx
• .context/designs/web/shared.css