Themes
Sapphire Clean
Professional balanced blue — calm authority for wellness brands.
Sapphire Clean pairs the sapphire gemstone with clean crystallization for a professional, balanced dark-blue theme. Standard radii and understated shadows create a trustworthy, calm interface.
Mode: Dark | Gemstone: Sapphire | Personality: Clean | Portfolio: Dr. C App
Color Palette
Sapphire Clean 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 Clean 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.25) | |
Cool | --crystal-brand-cool | #7dd3fc | |
Warm | --crystal-brand-warm | #f59e0b |
Click any row to copy the CSS variable.
Usage
<html data-crystal="sapphire-clean">- Sapphire Clean + Clean — Default professional look (recommended)
- Sapphire Clean + Edge — Sharper, data-focused
When to Use
- Health and wellness applications
- Professional services and consulting
- Data-driven products requiring calm authority
- Blue-chip brand experiences