Crystallizations
Dream
Soft, rounded, ethereal — for creative and spiritual brands.
Dream creates soft, cloud-like interfaces with generous radius, diffused shadows, heavy blur, and slow motion. Designed for creative, fashion, and lifestyle applications.
Token Values
Dream Crystallization
| Token | Variable | Value |
|---|---|---|
Radius | --crystal-radius | 16px |
Shadow | --crystal-shadow | 0 8px 32px rgba(0, 0, 0, 0.12) |
Border Width | --crystal-border-width | 1px |
Blur | --crystal-blur | 24px |
Motion Easing | --crystal-motion-easing | cubic-bezier(0, 0, 0.2, 1) |
Motion Duration | --crystal-motion-duration | 300ms |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="amethyst" data-crystallization="dream">Best Pairings
- Amethyst + Dream — Luxury fashion (Mademoiselle)
- Opal + Dream — Iridescent, playful
- Quartz + Dream — Warm, inviting
- Diamond + Dream — Soft professional
When to Use
- Fashion and luxury brands
- Creative portfolios
- Lifestyle and wellness apps
- Music and entertainment platforms