Themes
Amethyst
Purple, luxury/creative — Crystal's most expressive dark theme.
Amethyst uses deep purple backgrounds with violet primaries and pink accents. Designed for creative, luxury, and fashion-forward applications.
Mode: Dark | Accent: Pink #ec4899 | Portfolio: Mademoiselle
Color Palette
Amethyst 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.
Amethyst Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0f0720 | |
Surface | --crystal-surface-primary | #1a0f2e | |
Text | --crystal-fg-primary | #faf5ff | |
Text Secondary | --crystal-fg-secondary | #d8b4fe | |
Primary | --crystal-accent-primary | #a855f7 | |
Accent | --crystal-accent-primary | #ec4899 | |
Border | --crystal-border-default | #4c3a6e |
Click any row to copy the CSS variable.
Usage
<html data-crystal="amethyst">Recommended pairings:
- Amethyst + Dream — Soft, ethereal, luxury (Mademoiselle uses this)
- Amethyst + Luxe — Premium, refined
- Amethyst + Bold — Vibrant, energetic
When to Use
- Fashion and luxury brands
- Creative portfolios
- Entertainment and lifestyle apps
- Applications requiring elegance and expressiveness