Themes
Topaz
Vibrant, energetic, youthful — a dark theme with warm orange energy.
Topaz is Crystal's most energetic dark theme. Deep warm blacks with bright orange accents create a dynamic, youthful feel. Designed for gaming, creative tools, and brands that want to project energy and action.
Mode: Dark | Accent: Orange #f97316
Color Palette
Topaz 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.
Topaz Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0c0a09 | |
Surface | --crystal-surface-primary | #1c1917 | |
Text | --crystal-fg-primary | #fafaf9 | |
Text Secondary | --crystal-fg-secondary | #a8a29e | |
Primary | --crystal-accent-primary | #f97316 | |
Accent | --crystal-accent-primary | #fb923c | |
Border | --crystal-border-default | #292524 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="topaz">Recommended pairings:
- Topaz + Bold — Maximum energy, gaming UIs
- Topaz + Edge — Sharp and dynamic, creative tools
- Topaz + Clean — Warm dark mode, toned-down energy
When to Use
- Gaming interfaces and promotional sites (Hashlands)
- Creative tools and design applications
- Social and community platforms
- Brands targeting younger, action-oriented audiences