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-bg-primaryBackground Subtle
--crystal-bg-tertiaryBackground Muted
--crystal-bg-secondarySurface
--crystal-surface-primarySurface Elevated
--crystal-surface-elevatedBorder
--crystal-border-defaultBorder Subtle
--crystal-border-subtleText
--crystal-fg-primaryText Secondary
--crystal-fg-secondaryText Muted
--crystal-fg-tertiaryPrimary
--crystal-accent-primaryPrimary Hover
--crystal-accent-secondaryAccent
--crystal-accent-primaryAccent Subtle
--crystal-accent-subtleCool
--crystal-brand-coolWarm
--crystal-brand-warmClick any swatch to copy the CSS variable.
Onyx Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #09090b | |
Surface | --crystal-surface-primary | #18181b | |
Text | --crystal-fg-primary | #fafafa | |
Text Secondary | --crystal-fg-secondary | #a1a1aa | |
Primary | --crystal-accent-primary | #fafafa | |
Accent | --crystal-accent-primary | #22d3ee | |
Border | --crystal-border-default | #27272a | |
Cool | --crystal-brand-cool | #22d3ee | |
Warm | --crystal-brand-warm | #f97316 |
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