Crystallizations
Luxe
Elegant, refined, premium — for luxury and high-end brands.
Luxe creates elegant interfaces with moderate-to-large radius, deep shadows, medium blur, and slow, deliberate motion. Designed for premium, high-end applications.
Token Values
Luxe Crystallization
| Token | Variable | Value |
|---|---|---|
Radius | --crystal-radius | 12px |
Shadow | --crystal-shadow | 0 12px 40px rgba(0, 0, 0, 0.15) |
Border Width | --crystal-border-width | 1px |
Blur | --crystal-blur | 16px |
Motion Easing | --crystal-motion-easing | ease |
Motion Duration | --crystal-motion-duration | 500ms |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="amethyst" data-crystallization="luxe">Best Pairings
- Amethyst + Luxe — Premium creative
- Diamond + Luxe — Elevated professional
- Sapphire + Luxe — Premium business
- Emerald + Luxe — Premium finance
When to Use
- Premium and luxury product pages
- High-end portfolio showcases
- Subscription tier presentations
- Applications requiring sophistication