Themes
Onyx
Deep black, tech-forward — Crystal's flagship dark theme.
Onyx is Crystal's primary dark theme. Deep blacks with zinc grays and bright cyan accents. Designed for developer tools, technical dashboards, and modern dark UIs.
Mode: Dark | Accent: Cyan #22d3ee | Portfolio: OpsCenter
Color Palette
Onyx Colors
Background
--crystal-bgBackground Subtle
--crystal-bg-subtleBackground Muted
--crystal-bg-mutedSurface
--crystal-surfaceSurface Elevated
--crystal-surface-elevatedBorder
--crystal-borderBorder Subtle
--crystal-border-subtleText
--crystal-textText Secondary
--crystal-text-secondaryText Muted
--crystal-text-mutedPrimary
--crystal-primaryPrimary Hover
--crystal-primary-hoverAccent
--crystal-accentAccent Subtle
--crystal-accent-subtleCool
--crystal-coolWarm
--crystal-warmClick any swatch to copy the CSS variable. Colors update live with theme changes.
Onyx Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg | #09090b | |
Surface | --crystal-surface | #18181b | |
Text | --crystal-text | #fafafa | |
Text Secondary | --crystal-text-secondary | #a1a1aa | |
Primary | --crystal-primary | #fafafa | |
Accent | --crystal-accent | #22d3ee | |
Border | --crystal-border | #27272a | |
Cool | --crystal-cool | #22d3ee | |
Warm | --crystal-warm | #f97316 |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="onyx">Recommended pairings:
- Onyx + Edge — Sharp, technical, developer-focused (OpsCenter uses this)
- Onyx + Clean — Standard dark mode
- Onyx + Bold — High contrast, action-oriented
When to Use
- Developer tools and dashboards
- Command centers and operations UIs
- Dark mode default for any application
- Technical documentation