Themes
Diamond Clean
Crisp white light theme with sky-blue accents — professional and precise.
Diamond Clean pairs the diamond gemstone with clean crystallization for a precise, enterprise-grade light theme. Sky-blue accents on a pure white background create an approachable yet professional feel.
Mode: Light | Gemstone: Diamond | Personality: Clean | Portfolio: Ascend
Color Palette
Diamond 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.
Diamond Clean Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #ffffff | |
Surface | --crystal-surface-primary | #ffffff | |
Text | --crystal-fg-primary | #0f172a | |
Text Secondary | --crystal-fg-secondary | #475569 | |
Primary | --crystal-accent-primary | #0ea5e9 | |
Accent | --crystal-accent-primary | #0ea5e9 | |
Border | --crystal-border-default | rgba(14, 165, 233, 0.15) | |
Cool | --crystal-brand-cool | #e0f2fe | |
Warm | --crystal-brand-warm | #f97316 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="diamond-clean">- Diamond Clean + Clean — Default professional look (recommended)
- Diamond Clean + Edge — Sharper, more technical
When to Use
- Enterprise dashboards and SaaS products
- Client-facing applications requiring trust and clarity
- Documentation and knowledge bases
- Light-mode-first products