Colors

Foundational color tokens for backgrounds, borders, text and charts.

Color

Class name

bg-background

bg-secondary

bg-tertiary

bg-quaternary

bg-surface

bg-surface-inverted

bg-elevated

text-primary

text-secondary

text-tertiary

text-quaternary

border-primary

border-primary-solid

border-secondary

border-secondary-solid

border-inverted

text-brand-primary

text-brand-primary-hover

text-brand-secondary

text-brand-secondary-solid

text-brand-foreground

text-brand-inverted

destructive

warning

ring

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-inverted`	Primary text on inverted/dark surfaces.
`--text-secondary-inverted`	`text-inverted-secondary`	Secondary body or lower emphasis text on inverted surfaces.

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.

Charts

Chart colors are used for data visualization. Use in sequence for multi-series charts.

CSS Variable	Tailwind Class	Usage
`--chart-1`	`text-chart-1`, `bg-chart-1`	First chart color in the sequence. Green.
`--chart-2`	`text-chart-2`, `bg-chart-2`	Second chart color. Blue.
`--chart-3`	`text-chart-3`, `bg-chart-3`	Third chart color. Orange.
`--chart-4`	`text-chart-4`, `bg-chart-4`	Fourth chart color. Dark teal.
`--chart-5`	`text-chart-5`, `bg-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.

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-primary for headings, text-secondary for body, text-tertiary for captions
Use border-primary for subtle dividers, border-secondary for input borders
Use brand colors sparingly for primary actions and key UI elements

Don't

Don't use hardcoded colors like bg-stone-500 or #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

PreviousIntroduction

NextTypography