Themes
Diamond
Clean, bright, and professional — Crystal's default light theme.
Diamond is Crystal's default theme. A light palette with neutral grays and cyan accents, suitable for professional and general-purpose applications.
Mode: Light | Accent: Cyan #06b6d4 | Portfolio: artasce.com
Color Palette
Diamond 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 Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #fafafa | |
Surface | --crystal-surface-primary | #ffffff | |
Text | --crystal-fg-primary | #09090b | |
Text Secondary | --crystal-fg-secondary | #52525b | |
Primary | --crystal-accent-primary | #18181b | |
Accent | --crystal-accent-primary | #06b6d4 | |
Border | --crystal-border-default | #e4e4e7 | |
Cool | --crystal-brand-cool | #06b6d4 | |
Warm | --crystal-brand-warm | #f97316 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="diamond">Diamond works well with all crystallizations. Recommended pairings:
- Diamond + Clean — Default professional look
- Diamond + Luxe — Elevated premium feel
- Diamond + Dream — Soft, approachable
When to Use
- Default light mode for any application
- Professional and enterprise dashboards
- Documentation and content-heavy sites
- Client-facing marketing pages