Colors
Foundational color tokens for backgrounds, borders, text and charts.
Overview
All colors in the Rogo design system are defined as CSS custom properties and mapped to Tailwind utility classes. Colors automatically adapt between light and dark modes. Always use semantic tokens rather than raw color values.
Backgrounds
Background colors define the layered surfaces of the interface. Use increasingly darker backgrounds to create visual hierarchy and depth.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--background-primary | bg-primary | Default app background. Use for body background and large zones. |
--background-secondary | bg-secondary | Subtle background differentiation. Use for alternate sections or hover states. |
--background-tertiary | bg-tertiary | Hover states or when more differentiation is needed. |
--background-quaternary | bg-quaternary | Strongest background differentiation. Use sparingly. |
Surfaces
Surface colors are for elevated UI elements that sit above the background layers.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--surface | bg-surface | Elevated surfaces like popovers, menus, dropdowns, and cards. |
--surface-inverted | bg-surface-inverted | Dark background surfaces like tooltips or inverted UI sections. |
Elevated
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--elevated | bg-elevated | Subtle elevation effect. Semi-transparent overlay for hover states on dark backgrounds. |
Text
Text colors provide hierarchy for typography. Use primary for important content and progressively lighter variants for supporting text.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--text-primary | text-primary | Primary, emphasized text. Use for headers, bold text, and important content. |
--text-secondary | text-secondary | Default content body text. Use for paragraphs and standard UI text. |
--text-tertiary | text-tertiary | Lower emphasis text. Use for captions, labels, and supporting content. |
--text-quaternary | text-quaternary | Subtle, light text. Use for placeholders, disclaimers, and disabled states. |
--text-primary-inverted | text-primary-inverted | Primary text on inverted/dark surfaces. |
--text-secondary-inverted | text-secondary-inverted | Secondary body or lower emphasis text on inverted surfaces. |
text-inverted and text-inverted-secondary are the pre-rename names. They only work in
apps/frontend and apps/global-admin-panel, which each alias them locally; anywhere else
they silently render nothing. Write the canonical names above.
Borders
Border colors define the edges of UI elements. Use alpha variants by default for better blending, solid variants when transparency causes issues.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--border-primary | border-primary | Standard border color. Uses alpha transparency for natural blending. |
--border-primary-solid | border-primary-solid | Standard border as a solid color. Use when alpha causes visual issues. |
--border-secondary | border-secondary | Stronger border for inputs, focused elements. Uses alpha transparency. |
--border-secondary-solid | border-secondary-solid | Stronger border as a solid color. Use when alpha causes visual issues. |
--border-inverted | border-inverted | Border on inverted/dark surfaces. |
Brand
Brand colors represent Rogo's identity. Use for primary actions, links, and branded elements.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--brand-primary | bg-brand-primary, text-brand-primary | Primary brand color. Use for primary buttons, links, and key actions. |
--brand-primary-hover | bg-brand-primary-hover, text-brand-primary-hover | Hover state for primary brand elements. |
--brand-secondary | bg-brand-secondary, text-brand-secondary | Lighter brand color using opacity. Use for subtle brand accents and backgrounds. |
--brand-secondary-solid | bg-brand-secondary-solid | Lighter brand color as a solid. Use when alpha causes visual issues. |
--brand-foreground | text-brand-foreground | Foreground color for elements on brand backgrounds. Use for text/icons on brand buttons. |
--brand-inverted | bg-brand-inverted | Modified brand color for use on inverted/dark surfaces. |
Decorative
Decorative colors are non-brand accents for illustrations, tags, callouts, and supporting visual elements. Use sparingly and reach for brand tokens for primary actions.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--decorative-green | bg-decorative-green, text-decorative-green | Deep teal-green accent. Pairs naturally with brand without competing. |
--decorative-blue | bg-decorative-blue, text-decorative-blue | Muted ocean blue accent. Use for informational tags and illustrations. |
--decorative-olive | bg-decorative-olive, text-decorative-olive | Desaturated yellow-green accent. Warm, earthy complement. |
--decorative-crimson | bg-decorative-crimson, text-decorative-crimson | Deep red accent. Distinct from --destructive, decorative only. |
Charts
Chart colors are used for data visualization. Use in sequence for multi-series charts.
The tokens are raw RGB channel triples (e.g. 27 140 108), so wrap them: rgb(var(--chart-1)), or rgb(var(--chart-1) / 0.5) for alpha.
| CSS Variable | Usage |
|---|---|
--chart-1 | First chart color in the sequence. Green. |
--chart-2 | Second chart color. Blue. |
--chart-3 | Third chart color. Orange. |
--chart-4 | Fourth chart color. Dark teal. |
--chart-5 | Fifth chart color. Mauve. |
Notifications
Semantic colors for system feedback and alerts.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--destructive | bg-destructive, text-destructive | Destructive actions, errors, and critical warnings. Red. |
--warning | bg-warning, text-warning | Warning states and caution indicators. Amber. |
--success | bg-success, text-success | Completed actions, healthy status, and confirmations. Green. |
For a tinted background behind a success icon or badge, use an alpha of the same token
(bg-success/10) rather than a second solid token, the same pattern --destructive uses.
Status Tones
Tones for a surface that reports state rather than acting on it: the Badge status
variants, and any tinted status pill built the same way. Use one token for both halves of
the pair, bg-status-success/10 text-status-success: each value flips per theme so the
label stays legible on its own tint in light and dark.
Reach for these instead of --destructive / --warning when the color carries text.
Those two are tuned as fills, borders, and icons; amber at fill strength sits near 2:1 as
small text on a light surface, which is why every app that hand-rolled a status pill ended
up reaching into the raw palette for amber-700. amber-700 is not the fix either: on its
own 10% tint it measures 4.3:1, under the 4.5:1 bar that 10–14px pill text has to clear, so
these tones sit a step darker. Every value here clears 4.5:1 on its own tint in both themes.
| CSS Variable | Tailwind Class | Usage |
|---|---|---|
--status-success | bg-status-success, text-status-success | Healthy, active, complete. Green. |
--status-warning | bg-status-warning, text-status-warning | Degraded but working, approaching a limit. Amber. |
--status-critical | bg-status-critical, text-status-critical | Failed, expired, over a hard limit. Red. |
--status-info | bg-status-info, text-status-info | Neutral, non-urgent state. Blue. |
Usage Guidelines
Do
- Use semantic color tokens (
bg-primary,text-secondary) instead of raw values - Layer backgrounds to create depth:
bg-primary→bg-secondary→bg-tertiary - Use
text-primaryfor headings,text-secondaryfor body,text-tertiaryfor captions - Use
border-primaryfor subtle dividers,border-secondaryfor input borders - Use brand colors sparingly for primary actions and key UI elements
Don't
- Don't use hardcoded colors like
bg-stone-500or#135b44 - Don't use text colors for backgrounds or vice versa
- Don't mix light mode colors on dark surfaces (use inverted variants)
- Don't use brand colors for large background areas
- Don't use more than 5 chart colors in a single visualization