Crystallizations
Clean
Professional, balanced — the default crystallization for most applications.
Clean is Crystal's default crystallization. Balanced proportions with moderate radius, subtle shadows, and standard motion — suitable for any professional application.
Token Values
Clean Crystallization
| Token | Variable | Value |
|---|---|---|
Radius | --crystal-radius | 8px |
Shadow | --crystal-shadow | 0 4px 6px -1px rgb(0 0 0 / 0.1) |
Border Width | --crystal-border-width | 1px |
Blur | --crystal-blur | 8px |
Motion Easing | --crystal-motion-easing | cubic-bezier(0, 0, 0.2, 1) |
Motion Duration | --crystal-motion-duration | 200ms |
Values update live with theme changes. Click any row to copy the CSS variable.
Usage
<html data-crystal="diamond" data-crystallization="clean">Clean is the default — if no data-crystallization attribute is set, components render with Clean values.
Best Pairings
- Diamond + Clean — Default professional
- Citrine + Clean — Friendly consumer
- Emerald + Clean — Professional finance
- Sapphire + Clean — Standard business
When to Use
- Any general-purpose application
- Business and enterprise tools
- Documentation and content sites
- When no specific personality is needed