Themes
Rose Luxe
Elegant refined pink — romantic sophistication for photography brands.
Rose Luxe pairs the rose gemstone with luxe crystallization for an elegant, romantic dark-pink theme. Wide radii, slow motion, and ultra-soft borders create a refined, feminine identity.
Mode: Dark | Gemstone: Rose | Personality: Luxe | Portfolio: Delightful Portraits
Color Palette
Rose Luxe 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.
Rose Luxe Token Values
| Token | Variable | Value | Preview |
|---|---|---|---|
Background | --crystal-bg-primary | #0d0208 | |
Surface | --crystal-surface-primary | #1a0510 | |
Text | --crystal-fg-primary | #fdf2f8 | |
Text Secondary | --crystal-fg-secondary | #fbcfe8 | |
Primary | --crystal-accent-primary | #be185d | |
Accent | --crystal-accent-primary | #fb923c | |
Border | --crystal-border-default | rgba(190, 24, 93, 0.15) | |
Cool | --crystal-brand-cool | #fbcfe8 | |
Warm | --crystal-brand-warm | #fb923c |
Click any row to copy the CSS variable.
Usage
<html data-crystal="rose-luxe">- Rose Luxe + Luxe — Full romantic luxury look (recommended)
- Rose Luxe + Dream — Softer, more ethereal
When to Use
- Photography portfolios and booking sites
- Beauty and skincare brands
- Wedding and event platforms
- Brands requiring romantic elegance