Themes
Garnet Edge
Sharp technical deep-red — precise and enterprise-grade.
Garnet Edge pairs the garnet gemstone with edge crystallization for a sharp, technical dark-red theme. Tight corners and fast transitions suit enterprise and industrial interfaces.
Mode: Dark | Gemstone: Garnet | Personality: Edge | Portfolio: Halliburton
Color Palette
Garnet 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.
Garnet Edge Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0a0505 | |
Surface | --crystal-surface-primary | #1c0a0a | |
Text | --crystal-fg-primary | #fef2f2 | |
Text Secondary | --crystal-fg-secondary | #fecaca | |
Primary | --crystal-accent-primary | #7f1d1d | |
Accent | --crystal-accent-primary | #ea580c | |
Border | --crystal-border-default | rgba(127, 29, 29, 0.3) | |
Cool | --crystal-brand-cool | #fca5a5 | |
Warm | --crystal-brand-warm | #ea580c |
Click any row to copy the CSS variable.
Usage
<html data-crystal="garnet-edge">- Garnet Edge + Edge — Full technical industrial look (recommended)
- Garnet Edge + Bold — More aggressive energy
When to Use
- Enterprise and industrial applications
- Petroleum and energy sector dashboards
- Technical monitoring and alert systems
- Brands requiring authority and precision