Themes Overview
Crystal's gemstone-inspired theming system — 25 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
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 standalone themes for specialized use cases:
| Theme | Mode | Character |
|---|---|---|
| Tanzanite | Dark | Dual violet/fuchsia, glass morphism luxury |
| 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 |
Variant Themes
Variant themes combine a gemstone (color) with a personality (crystallization) into a single pre-configured theme. Each variant bakes in its crystallization parameters alongside colors, providing a complete brand identity in one selector.
| Variant | Gemstone | Personality | Mode | Portfolio |
|---|---|---|---|---|
| Diamond Clean | Diamond | Clean | Light | Ascend |
| Onyx Edge | Onyx | Edge | Dark | SyncFocus |
| Onyx Luxe | Onyx | Luxe | Dark | artasce.com |
| Garnet Edge | Garnet | Edge | Dark | Halliburton |
| Sapphire Clean | Sapphire | Clean | Dark | Dr. C App |
| Sapphire Dream | Sapphire | Dream | Dark | VoyaVacations |
| Amethyst Dream | Amethyst | Dream | Dark | caitoy.com |
| Citrine Bold | Citrine | Bold | Dark | Hashlands |
| Ruby Bold | Ruby | Bold | Dark | Artasce Creative |
| Ruby Edge | Ruby | Edge | Dark | AC Models |
| Ruby Luxe | Ruby | Luxe | Dark | Mademoiselle |
| Emerald Clean | Emerald | Clean | Dark | Modolla |
| Rose Luxe | Rose | Luxe | Dark | Delightful Portraits |
Portfolio Mapping
Each portfolio brand is assigned a Crystal theme (base or variant):
| Brand | Theme | Crystallization | Status |
|---|---|---|---|
| OpsCenter | Onyx | Edge | Production |
| artasce.com | Onyx Luxe | Luxe | Mapped |
| caitoy.com | Amethyst Dream | Dream | Mapped |
| Mademoiselle | Ruby Luxe | Luxe | Mapped |
| AC Models | Ruby Edge | Edge | Mapped |
| Artasce Creative | Ruby Bold | Bold | Mapped |
| VoyaVacations | Sapphire Dream | Dream | Mapped |
| SyncFocus | Onyx Edge | Edge | Mapped |
| Modolla | Emerald Clean | Clean | Mapped |
| Hashlands | Citrine Bold | Bold | Mapped |
| Delightful Portraits | Rose Luxe | Luxe | Mapped |
| Dr. C App | Sapphire Clean | Clean | Mapped |
| Ascend | Diamond Clean | Clean | Mapped |
Applying a Theme
<!-- HTML attribute -->
<html data-crystal="sapphire-dream">// React component
import { CrystalProvider } from '@artasce/crystal-ui';
<CrystalProvider theme="sapphire-dream">
<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-primary: #your-bg;
--crystal-bg-tertiary: #your-bg-subtle;
--crystal-bg-secondary: #your-bg-muted;
--crystal-surface-primary: #your-surface;
--crystal-surface-elevated: #your-surface-elevated;
--crystal-border-default: #your-border;
--crystal-border-subtle: #your-border-subtle;
--crystal-fg-primary: #your-text;
--crystal-fg-secondary: #your-text-secondary;
--crystal-fg-tertiary: #your-text-muted;
--crystal-fg-primary: #your-text-primary;
--crystal-accent-primary: #your-primary;
--crystal-accent-secondary: #your-primary-hover;
--crystal-accent-primary: #your-accent;
--crystal-accent-subtle: #your-accent-subtle;
--crystal-brand-cool: #your-cool;
--crystal-brand-cool-hover: #your-cool-hover;
--crystal-brand-warm: #your-warm;
}All 18 tokens must be defined for a complete theme. See individual theme pages for value references.