Colors

Color tokens for brand identity, surface treatments, status indicators, overlays, and shadows across the design system.

Brand Colors

Primary brand palette used for accents, CTAs, and visual identity across marketing and product surfaces.

Color	CSS Variable	Value	Use cases	Live pages
Primary Orange	`var(--primary)`	`#ff5c00`	Primary CTAs, active states, links, and brand accents.	Home Platform – Annotations
Brand Orange (Alt)	`var(--primary-alt)`	`rgba(255, 140, 80, 0.7)`	Desaturated orange for icon containers and subtle accents. Designed for the marketing website.	Alignment Platform – Security Coworker
Brand Purple	`var(--brand-purple)`	`#a422e1`	Secondary accent for annotation types, gradients, and category badges.	Home
Brand Cyan	`var(--brand-cyan)`	`#6fc1e0`	Tertiary accent for annotation types, highlights, and data visualization.	Home
Brand Green	`var(--brand-green)`	`#88fb75`	Positive accents, success states, and careers page theming.	Careers
Brand Green Alt	`var(--brand-green-alt)`	`#50cc3d`	Alternative green for annotation types and chart differentiation.	Home

Background, card, and text colors for dark-mode UI surfaces.

Color	CSS Variable	Value	Use cases
Background	`var(--background)`	`#121212`	Page backgrounds, base layer for all surfaces.
Foreground	`var(--foreground)`	`#f5f5f5`	Primary text, headings, and high-emphasis content.
Card	`var(--card)`	`#1e1e1e`	Card backgrounds, elevated surfaces, and container fills.
Muted Foreground	`var(--muted-foreground)`	`#b3b3b3`	Secondary text, captions, placeholders, and low-emphasis content.
Border	`var(--border)`	`#2a2a2a`	Dividers, card borders, and subtle separators.

Semantic colors for dashboard metrics, charts, and pipeline states. Used primarily in the operations dashboard.

Color	CSS Variable	Value	Use cases
Status Green	`var(--status-green)`	`#22c55e`	Success, positive trends, in-progress calibration states.
Status Blue	`var(--status-blue)`	`#3b82f6`	Information, active processes, labeling 4D pipeline stage.
Status Orange	`var(--status-orange)`	`#f97316`	Warnings, attention needed, labeling 2D pipeline stage.
Status Purple	`var(--status-purple)`	`#8b5cf6`	Review states, final review pipeline stage.
Status Red	`var(--status-red)`	`#ef4444`	Errors, failures, negative trends, destructive actions.
Status Emerald	`var(--status-emerald)`	`#10b981`	Complete states, positive trend indicators.
Status Gray	`var(--status-gray)`	`#6b7280`	Neutral, inactive, backlog pipeline stage.

Transparent white and black overlays for borders, backgrounds, and depth effects.

Color	CSS Variable	Value	Use cases
White 5%	`var(--overlay-white-5)`	`rgba(255, 255, 255, 0.05)`	Subtle container borders, separator lines.
White 10%	`var(--overlay-white-10)`	`rgba(255, 255, 255, 0.1)`	Hover states, scrollbar thumbs, glassmorphism borders.
White 15%	`var(--overlay-white-15)`	`rgba(255, 255, 255, 0.15)`	Active states, stronger hover effects.
White 20%	`var(--overlay-white-20)`	`rgba(255, 255, 255, 0.2)`	Prominent overlays, modal backdrops light variant.
Black 35%	`var(--overlay-black-35)`	`rgba(0, 0, 0, 0.35)`	Card shadows, drop shadows on elevated elements.
Black 45%	`var(--overlay-black-45)`	`rgba(0, 0, 0, 0.45)`	Hero shadows, prominent depth effects.

Standardized box-shadow values for cards, heroes, and glow effects.

Color	CSS Variable	Value	Use cases
Card Shadow	`var(--shadow-card)`	`0 20px 50px -25px rgba(0, 0, 0, 0.35)`	Default elevation for cards and interactive containers.
Card Hover Shadow	`var(--shadow-card-hover)`	`0 20px 60px -20px rgba(0, 0, 0, 0.5)`	Enhanced elevation on card hover states.
Hero Shadow	`var(--shadow-hero)`	`0 28px 80px rgba(0, 0, 0, 0.45)`	Large depth effect for newsletter popups and hero elements.
Stage Shadow	`var(--shadow-stage)`	`0 16px 44px rgba(0, 0, 0, 0.1)`	Subtle elevation for stage cards and process steps.
Primary Glow	`var(--shadow-glow-primary)`	`0 0 20px rgba(255, 92, 0, 0.15)`	Orange glow effect for primary accent elements.