Themes
Citrine Bold
Energetic gold on deep amber — confident and game-ready.
Citrine Bold pairs the citrine gemstone with bold crystallization for an energetic, confident dark-gold theme. Thicker borders, bouncy easing, and warm gold tones suit gaming and action brands.
Mode: Dark | Gemstone: Citrine | Personality: Bold | Portfolio: Hashlands
Color Palette
Citrine Bold 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.
Citrine Bold Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0c0a04 | |
Surface | --crystal-surface-primary | #1c1708 | |
Text | --crystal-fg-primary | #fffbeb | |
Text Secondary | --crystal-fg-secondary | #fde68a | |
Primary | --crystal-accent-primary | #b45309 | |
Accent | --crystal-accent-primary | #f59e0b | |
Border | --crystal-border-default | rgba(180, 83, 9, 0.3) | |
Cool | --crystal-brand-cool | #fde68a | |
Warm | --crystal-brand-warm | #f59e0b |
Click any row to copy the CSS variable.
Usage
<html data-crystal="citrine-bold">- Citrine Bold + Bold — Full energetic gaming look (recommended)
- Citrine Bold + Edge — Sharper, more technical
When to Use
- Gaming and entertainment platforms
- Action-oriented product experiences
- Loyalty programs and reward systems
- Brands requiring energy and confidence