Themes
Opal
Iridescent, adaptive, multi-faceted — a warm light theme with shifting pink/blue accents.
Opal is Crystal's iridescent light theme. Warm pearl backgrounds with dual fuchsia and indigo accents create a multi-faceted, premium feel. Designed for adaptive brands, lifestyle products, and fashion-adjacent interfaces.
Mode: Light | Primary Accent: Fuchsia #d946ef | Secondary Accent: Indigo #6366f1
Color Palette
Opal 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.
Opal Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #faf9f7 | |
Surface | --crystal-surface-primary | #f5f0eb | |
Text | --crystal-fg-primary | #1c1917 | |
Text Secondary | --crystal-fg-secondary | #57534e | |
Primary | --crystal-accent-primary | #d946ef | |
Accent | --crystal-accent-primary | #6366f1 | |
Border | --crystal-border-default | #e7e0d8 |
Click any row to copy the CSS variable.
Usage
<html data-crystal="opal">Recommended pairings:
- Opal + Dream — Soft, editorial, fashion-forward
- Opal + Luxe — Premium lifestyle, beauty brands
- Opal + Clean — Everyday elegance
When to Use
- Fashion and lifestyle brands
- Beauty and wellness applications
- Personal finance with a softer aesthetic (Modolla)
- Interfaces requiring warmth without darkness