Themes
Sapphire
Cool blue, professional — a refined dark theme for business applications.
Sapphire uses slate-blue backgrounds with blue primaries and cyan accents. Professional and trustworthy, suitable for business and finance applications.
Mode: Dark | Accent: Cyan #06b6d4 | Portfolio: SyncFocus Media
Color Palette
Sapphire 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 Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0f172a | |
Surface | --crystal-surface-primary | #1e293b | |
Text | --crystal-fg-primary | #f8fafc | |
Primary | --crystal-accent-primary | #3b82f6 | |
Accent | --crystal-accent-primary | #06b6d4 | |
Border | --crystal-border-default | #475569 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="sapphire">Recommended pairings:
- Sapphire + Edge — Technical, precise (SyncFocus uses this)
- Sapphire + Clean — Standard professional
- Sapphire + Luxe — Premium business
When to Use
- Business and finance applications
- Professional SaaS dashboards
- Audio/media platforms
- Applications requiring trust and reliability