COLORS
The Obsidian color system is built on deep navy foundations with high-contrast accent colors. Every shade is calibrated for readability on dark surfaces, with opacity scales that provide consistent layering across the interface.
Foundation
Three tiers of darkness form the spatial hierarchy. Void is the deepest background, surface is the default card fill, and elevated lifts interactive elements above the canvas.
Accent Palette
Five accent colors provide semantic meaning and visual contrast. Cyan is the primary interactive color, purple marks premium features, and green/red/amber handle status communication.
Opacity Scale
Each accent color uses a consistent opacity ramp for backgrounds, borders, hover states, and text. Lower opacities are for subtle fills; higher opacities for prominent text and icons.
Semantic Colors
Status & Meaning
CSS Variables
All design tokens are exposed as CSS custom properties using HSL values (without the hsl() wrapper) for composability with Tailwind's opacity modifiers.
Global CSS Custom Properties
Gradients
Three gradient patterns are used across the system: a directional CTA gradient for buttons and headings, a radial ambient glow for hover states and backgrounds, and a vignette for framing content.
CTA Gradient
Primary call-to-action gradient — cyan to purple diagonal
Ambient Glow
Radial glow for hover states and emphasis backgrounds
Vignette
Edge-darkening overlay to frame content within the viewport