Themes
Themes Overview
Crystal's gemstone-inspired theming system — 13 palettes, infinite personality.
Crystal's theming is built on Axis 1: Color Identity. Each theme is a complete color palette mapped to semantic tokens. Switch themes instantly by setting data-crystal on any container.
Core Themes
Theme Comparison
diamond
Primary
Accent
onyx
Primary
Accent
garnet
Primary
Accent
sapphire
Primary
Accent
Crystal ships with 8 core themes, each inspired by a gemstone:
| Theme | Accent | Mode | Character |
|---|---|---|---|
| Diamond | Cyan #06b6d4 | Light | Clean, bright, professional |
| Onyx | Cyan #22d3ee | Dark | Deep black, tech-forward |
| Garnet | Orange #f97316 | Dark | Warm red, enterprise |
| Sapphire | Cyan #06b6d4 | Dark | Cool blue, professional |
| Amethyst | Pink #ec4899 | Dark | Purple, luxury/creative |
| Citrine | Orange #ea580c | Light | Warm yellow, optimistic |
| Ruby | Gold #fbbf24 | Dark | Bold red, high-energy |
| Emerald | Cyan #06b6d4 | Dark | Green, growth/finance |
Extended Themes
Five additional themes for specialized use cases:
| Theme | Mode | Character |
|---|---|---|
| Opal | Light | Iridescent, playful (fuchsia/purple) |
| Quartz | Light | Rose/pink, warm and inviting |
| Topaz | Dark | Amber/orange, bold and warm |
| Obsidian | Dark | Deep black, ultraminimal |
| Amethyst Dream | Dark | Signature Artasce palette (deep purple + warm white) |
Portfolio Mapping
Each portfolio brand is assigned a Crystal theme:
| Brand | Theme | Crystallization | Status |
|---|---|---|---|
| OpsCenter | Onyx | Edge | Production |
| artasce.com | Diamond | Clean | Mapped |
| Mademoiselle | Amethyst | Dream | Mapped |
| ACModels | Ruby | Bold | Mapped |
| VoyaVacations | Citrine | Clean | Mapped |
| SyncFocus | Sapphire | Edge | Mapped |
| Modolla | Emerald | Clean | Mapped |
Applying a Theme
<!-- HTML attribute -->
<html data-crystal="sapphire">// React component
import { CrystalProvider } from '@artasce/crystal-ui';
<CrystalProvider theme="sapphire">
<App />
</CrystalProvider>Creating a Custom Theme
Define your own theme by providing values for all semantic tokens:
[data-crystal='custom'] {
--crystal-name: 'Custom';
--crystal-bg: #your-bg;
--crystal-bg-subtle: #your-bg-subtle;
--crystal-bg-muted: #your-bg-muted;
--crystal-surface: #your-surface;
--crystal-surface-elevated: #your-surface-elevated;
--crystal-border: #your-border;
--crystal-border-subtle: #your-border-subtle;
--crystal-text: #your-text;
--crystal-text-secondary: #your-text-secondary;
--crystal-text-muted: #your-text-muted;
--crystal-text-primary: #your-text-primary;
--crystal-primary: #your-primary;
--crystal-primary-hover: #your-primary-hover;
--crystal-accent: #your-accent;
--crystal-accent-subtle: #your-accent-subtle;
--crystal-cool: #your-cool;
--crystal-cool-hover: #your-cool-hover;
--crystal-warm: #your-warm;
}All 18 tokens must be defined for a complete theme. See individual theme pages for value references.