Colors

Complete color palette based on Tailwind CSS and shadcn/ui conventions

Tailwind CSS

CSS Variables

HSL Format

RDS Primary Color

RDS uses gray-950 as its primary brand color, creating a bold and professional aesthetic.

Primary

Gray 950

RDS uses gray-950 as its primary brand color for bold, professional aesthetics

Hex: #030712

CSS Variable: --primary

HSL: 224 71% 4%

Tailwind: bg-primary, bg-gray-950

Semantic Colors

Theme-aware colors that adapt to light and dark modes. These are defined as CSS variables.

Background

Page and container backgrounds

--backgroundbg-background

Foreground

Primary text color

--foregroundtext-foreground

Primary

Primary actions and CTAs

--primarybg-primary

Secondary

Secondary buttons and elements

--secondarybg-secondary

Muted

Subtle backgrounds and disabled states

--mutedbg-muted

Accent

Highlighted or focused elements

--accentbg-accent

Destructive

Error states and destructive actions

--destructivebg-destructive

Card

Card and elevated surface backgrounds

--cardbg-card

Border

Default border color

--borderborder-border

RDS Status Colors

RDS-specific semantic colors for success, warning, and info states.

Examples

/* Primary Color (Gray-950) */
<div className="bg-gray-950 text-white">
  Primary colored element
</div>

/* Semantic Colors (theme-aware) */
<div className="bg-background text-foreground">
  Adapts to light/dark mode
</div>

/* Tailwind Palette Colors */
<div className="bg-blue-500 text-white">Blue 500</div>
<div className="bg-emerald-100 text-emerald-900">Emerald tones</div>

/* CSS Variables */
.custom-element {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}