Crystallizations
Bold
Strong, confident, action-oriented — for energetic and sports brands.
Bold creates impactful interfaces with standard radius, prominent shadows, thicker borders, minimal blur, and bouncy motion. Designed for energetic, action-oriented applications.
Token Values
Bold Crystallization
| Token | Variable | Value |
|---|---|---|
Radius | --crystal-radius | 8px |
Shadow | --crystal-shadow | 0 6px 20px rgba(0, 0, 0, 0.2) |
Border Width | --crystal-border-width | 2px |
Blur | --crystal-blur | 4px |
Motion Easing | --crystal-motion-easing | cubic-bezier(0.175, 0.885, 0.32, 1.275) |
Motion Duration | --crystal-motion-duration | 100ms |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="ruby" data-crystallization="bold">Best Pairings
- Ruby + Bold — Maximum energy (ACModels)
- Onyx + Bold — High contrast tech
- Garnet + Bold — High-stakes enterprise
- Citrine + Bold — Playful and energetic
When to Use
- Talent and modeling agencies
- Sports and fitness brands
- Gaming interfaces
- Call-to-action heavy pages
- Applications requiring confidence