Themes
Sapphire Dream
Soft ethereal blue — dreamy and inviting for travel brands.
Sapphire Dream pairs the sapphire gemstone with dream crystallization for a soft, ethereal dark-blue theme. Large radii, slow easing, and gentle blur create a dreamy, inviting atmosphere.
Mode: Dark | Gemstone: Sapphire | Personality: Dream | Portfolio: VoyaVacations
Color Palette
Sapphire Dream 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.
Sapphire Dream Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #030712 | |
Surface | --crystal-surface-primary | #0c1929 | |
Text | --crystal-fg-primary | #f0f9ff | |
Text Secondary | --crystal-fg-secondary | #bfdbfe | |
Primary | --crystal-accent-primary | #1e40af | |
Accent | --crystal-accent-primary | #f59e0b | |
Border | --crystal-border-default | rgba(30, 64, 175, 0.2) | |
Cool | --crystal-brand-cool | #7dd3fc | |
Warm | --crystal-brand-warm | #f59e0b |
Click any row to copy the CSS variable.
Usage
<html data-crystal="sapphire-dream">- Sapphire Dream + Dream — Full dreamy travel look (recommended)
- Sapphire Dream + Luxe — More polished luxury travel
When to Use
- Travel and hospitality platforms
- Lifestyle and aspiration-driven brands
- Applications where immersion and mood matter
- Creative content with a calm, blue-sky feel