Colors

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

Background

--crystal-bg

Background Subtle

--crystal-bg-subtle

Background Muted

--crystal-bg-muted

Surface

--crystal-surface

Surface Elevated

--crystal-surface-elevated

Border

--crystal-border

Border Subtle

--crystal-border-subtle

Text

--crystal-text

Text Secondary

--crystal-text-secondary

Text Muted

--crystal-text-muted

Primary

--crystal-primary

Primary Hover

--crystal-primary-hover

Accent

--crystal-accent

Accent Subtle

--crystal-accent-subtle

Cool

--crystal-cool

Warm

--crystal-warm

Click 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	Description
`Background`	`--crystal-bg`	...	Page background
`Background Subtle`	`--crystal-bg-subtle`	...	Offset sections
`Background Muted`	`--crystal-bg-muted`	...	Badges, chips
`Surface`	`--crystal-surface`	...	Card backgrounds
`Surface Elevated`	`--crystal-surface-elevated`	...	Popovers, dropdowns
`Border`	`--crystal-border`	...	Default borders
`Border Subtle`	`--crystal-border-subtle`	...	Subtle separators
`Text`	`--crystal-text`	...	Primary text
`Text Secondary`	`--crystal-text-secondary`	...	Descriptions
`Text Muted`	`--crystal-text-muted`	...	Placeholders
`Primary`	`--crystal-primary`	...	Primary actions
`Primary Hover`	`--crystal-primary-hover`	...	Hover states
`Accent`	`--crystal-accent`	...	Highlights, links
`Accent Subtle`	`--crystal-accent-subtle`	...	Accent backgrounds
`Cool`	`--crystal-cool`	...	Cool accent
`Warm`	`--crystal-warm`	...	Warm accent

Values update live with theme changes. Click any row to copy the CSS variable.

Usage

.my-card {
  background: var(--crystal-surface);
  border: 1px solid var(--crystal-border);
  color: var(--crystal-text);
}

.my-card h3 {
  color: var(--crystal-primary);
}

.my-card p {
  color: var(--crystal-text-secondary);
}

Theme Comparison

diamond

Primary

Accent

onyx

Primary

Accent

garnet

Primary

Accent

Available Themes

Crystal ships with 13 themes 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 (5)

Theme	Character	Mode
Opal	Iridescent, playful	Light
Quartz	Rose/pink, warm	Light
Topaz	Amber/orange, bold	Dark
Obsidian	Deep black, minimal	Dark
Amethyst Dream	Signature Artasce palette	Dark

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>

Current Theme Colors

Color Tokens

Theme Comparison

On this page