Themes
Garnet
Warm red, enterprise-grade — a dark theme with authority.
Garnet combines deep stone-brown backgrounds with red primaries and orange accents. It conveys authority, warmth, and enterprise reliability.
Mode: Dark | Accent: Orange #f97316 | Portfolio: Halliburton (mapped)
Color Palette
Garnet 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.
Garnet Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg | #0c0a09 | |
Surface | --crystal-surface | #1c1917 | |
Text | --crystal-text | #fafaf9 | |
Primary | --crystal-primary | #dc2626 | |
Accent | --crystal-accent | #f97316 | |
Border | --crystal-border | #44403c |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="garnet">Recommended pairings:
- Garnet + Clean — Professional enterprise
- Garnet + Edge — Data-dense dashboards
- Garnet + Bold — Action-oriented, high-stakes
When to Use
- Enterprise and industrial applications
- Data dashboards with importance indicators
- Applications requiring authority and trust