Themes
Citrine
Warm yellow, optimistic — a cheerful light theme for friendly applications.
Citrine uses warm yellow backgrounds with gold primaries and orange accents. Friendly, optimistic, and approachable.
Mode: Light | Accent: Orange #ea580c | Portfolio: VoyaVacations
Color Palette
Citrine 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 Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #fefce8 | |
Surface | --crystal-surface-primary | #ffffff | |
Text | --crystal-fg-primary | #1c1917 | |
Primary | --crystal-accent-primary | #ca8a04 | |
Accent | --crystal-accent-primary | #ea580c | |
Border | --crystal-border-default | #fde047 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="citrine">Recommended pairings:
- Citrine + Clean — Friendly, professional (VoyaVacations)
- Citrine + Dream — Warm and inviting
- Citrine + Bold — Energetic and playful
When to Use
- Travel and hospitality brands
- Consumer-facing marketing pages
- Friendly onboarding flows
- Applications requiring warmth and optimism