Themes
Tanzanite
Dark violet luxury — dual violet/fuchsia accents with glass morphism.
Tanzanite is Crystal's luxury dark theme. Near-black backgrounds with dual violet and fuchsia accents create a premium, editorial feel. Designed for high-end brands, creative portfolios, and luxury e-commerce.
Mode: Dark | Primary Accent: Violet #8b5cf6 | Secondary Accent: Fuchsia #ec4899
Color Palette
Tanzanite 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.
Tanzanite Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #050505 | |
Surface | --crystal-surface-primary | #0d0d0d | |
Text | --crystal-fg-primary | #fafafa | |
Text Secondary | --crystal-fg-secondary | #999999 | |
Primary | --crystal-accent-primary | #8b5cf6 | |
Accent | --crystal-accent-primary | #ec4899 | |
Border | --crystal-border-default | rgba(255,255,255,0.1) |
Click any row to copy the CSS variable.
Usage
<html data-crystal="tanzanite">Recommended pairings:
- Tanzanite + Dream — Soft luxury, editorial feel
- Tanzanite + Luxe — Premium brand, polished elegance
- Tanzanite + Clean — Subtle dark luxury, understated
When to Use
- Luxury and premium brand experiences
- Creative portfolios and agency showcases
- Fashion and editorial layouts
- High-end e-commerce with dark aesthetics
- Applications requiring a sophisticated, violet-forward identity
Unique Characteristics
Tanzanite is the only Crystal theme with dual accent colors (violet + fuchsia). This enables richer gradient treatments and more expressive UI without breaking the single-theme constraint. The glass morphism crystallization uses a subtle violet glow shadow (rgba(139, 92, 246, 0.2)).