Themes
Onyx Edge
Sharp, minimal dark neutral — technical precision for developer brands.
Onyx Edge pairs the onyx gemstone with edge crystallization for a minimal, technical aesthetic. Tight border radii, fast transitions, and near-zero blur create a no-nonsense interface.
Mode: Dark | Gemstone: Onyx | Personality: Edge | Portfolio: SyncFocus
Color Palette
Onyx Edge 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 Edge Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0a0a0a | |
Surface | --crystal-surface-primary | #141414 | |
Text | --crystal-fg-primary | #fafafa | |
Text Secondary | --crystal-fg-secondary | #a3a3a3 | |
Primary | --crystal-accent-primary | #fafafa | |
Accent | --crystal-accent-primary | #22d3ee | |
Border | --crystal-border-default | rgba(250, 250, 250, 0.1) | |
Cool | --crystal-brand-cool | #22d3ee | |
Warm | --crystal-brand-warm | #f59e0b |
Click any row to copy the CSS variable.
Usage
<html data-crystal="onyx-edge">- Onyx Edge + Edge — Full technical look (recommended)
- Onyx Edge + Clean — Slightly softer
When to Use
- Developer tools and technical documentation
- Audio/music production interfaces
- Data-heavy dashboards where borders define structure
- Brands prioritizing speed and clarity over warmth