Colors
Crystal's gemstone-themed color system — 32 themes from 14 base gemstone palettes.
Crystal uses a semantic color system where each theme provides a complete palette mapped to functional roles. You never reference raw hex values — instead, use CSS custom properties that automatically adapt to the active theme.
Live Palette
Switch themes using the theme selector in the top nav to see these colors update in real-time.
Current Theme Colors
--crystal-bg-primary--crystal-bg-tertiary--crystal-bg-secondary--crystal-surface-primary--crystal-surface-elevated--crystal-border-default--crystal-border-subtle--crystal-fg-primary--crystal-fg-secondary--crystal-fg-tertiary--crystal-accent-primary--crystal-accent-secondary--crystal-accent-primary--crystal-accent-subtle--crystal-brand-cool--crystal-brand-warmClick any swatch to copy the CSS variable. Colors update live with theme changes.
Semantic Tokens
Every Crystal theme defines these tokens:
Color Tokens
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | ... | |
Background Subtle | --crystal-bg-tertiary | ... | |
Background Muted | --crystal-bg-secondary | ... | |
Surface | --crystal-surface-primary | ... | |
Surface Elevated | --crystal-surface-elevated | ... | |
Border | --crystal-border-default | ... | |
Border Subtle | --crystal-border-subtle | ... | |
Text | --crystal-fg-primary | ... | |
Text Secondary | --crystal-fg-secondary | ... | |
Text Muted | --crystal-fg-tertiary | ... | |
Primary | --crystal-accent-primary | ... | |
Primary Hover | --crystal-accent-secondary | ... | |
Accent | --crystal-accent-primary | ... | |
Accent Subtle | --crystal-accent-subtle | ... | |
Cool | --crystal-brand-cool | ... | |
Warm | --crystal-brand-warm | ... |
Click any row to copy the CSS variable.
Usage
.my-card {
background: var(--crystal-surface-primary);
border: 1px solid var(--crystal-border-default);
color: var(--crystal-fg-primary);
}
.my-card h3 {
color: var(--crystal-accent-primary);
}
.my-card p {
color: var(--crystal-fg-secondary);
}Theme Comparison
Theme Comparison
Available Themes
Crystal ships with 32 themes — 14 base gemstones plus 18 personality variants (like onyx-luxe and ruby-bold). The base gemstones, organized by character:
Core Themes (8)
| Theme | Character | Mode |
|---|---|---|
| Diamond | Clean, bright, professional | Light |
| Onyx | Deep black, tech-forward | Dark |
| Garnet | Warm red, enterprise | Dark |
| Sapphire | Cool blue, professional | Dark |
| Amethyst | Purple, luxury/creative | Dark |
| Citrine | Warm yellow, optimistic | Light |
| Ruby | Bold red, high-energy | Dark |
| Emerald | Green, growth/finance | Dark |
Extended Themes (6)
| Theme | Character | Mode |
|---|---|---|
| Opal | Iridescent, playful | Light |
| Quartz | Rose/pink, warm | Light |
| Topaz | Amber/orange, bold | Dark |
| Obsidian | Deep black, minimal | Dark |
| Sunstone | Warm orange/amber energy | Dark |
| Tanzanite | Violet luxury, glass morphism | Dark |
The 18 personality variants (e.g. Amethyst Dream, the signature Artasce palette) pair a base gemstone with a crystallization preset — see the full list in the theme registry.
Switching Themes
Set the data-crystal attribute on any container element:
<html data-crystal="onyx">
<!-- All Crystal tokens now resolve to Onyx values -->
</html>Or use CrystalProvider in React:
import { CrystalProvider } from '@artasce/crystal-ui';
<CrystalProvider theme="sapphire">
<App />
</CrystalProvider>