Crystallizations
Crystallizations Overview
Crystal's 5 shape personality presets — the second axis of the design system.
Crystallizations are Crystal's Axis 2: Shape Personality. While themes control color (Axis 1), crystallizations control the physical characteristics of components — border radius, shadow depth, border width, backdrop blur, and motion timing.
The Five Presets
Crystallization Tokens
| Token | Variable | Value |
|---|---|---|
Radius | --crystal-radius | ... |
Shadow | --crystal-shadow | ... |
Border Width | --crystal-border-width | ... |
Blur | --crystal-blur | ... |
Motion Easing | --crystal-motion-easing | ... |
Motion Duration | --crystal-motion-duration | ... |
Values update live with theme changes. Click any row to copy the CSS variable.
| Preset | Radius | Shadow | Blur | Motion | Character |
|---|---|---|---|---|---|
| Clean | 8px | Subtle | 8px | 200ms ease-out | Professional, balanced |
| Dream | 16px | Diffused | 24px | 300ms ease-out | Soft, ethereal |
| Edge | 4px | Minimal | 0px | 100ms ease | Sharp, technical |
| Luxe | 12px | Deep | 16px | 500ms ease | Refined, premium |
| Bold | 8px | Prominent | 4px | 100ms bounce | Strong, confident |
Applying a Crystallization
<html data-crystal="sapphire" data-crystallization="edge">// In CSS
.my-card {
border-radius: var(--crystal-radius);
box-shadow: var(--crystal-shadow);
border-width: var(--crystal-border-width);
backdrop-filter: blur(var(--crystal-blur));
transition: all var(--crystal-motion-duration) var(--crystal-motion-easing);
}Combinatorial Range
Any theme works with any crystallization:
13 themes x 5 crystallizations = 65 visual combinations
Crystal components automatically read both data-crystal and data-crystallization to resolve their appearance.
Portfolio Pairings
| Brand | Theme | Crystallization | Why |
|---|---|---|---|
| OpsCenter | Onyx | Edge | Developer tool: sharp, precise, minimal |
| Mademoiselle | Amethyst | Dream | Fashion: soft, ethereal, luxurious |
| ACModels | Ruby | Bold | Talent: confident, energetic, impactful |
| artasce.com | Diamond | Clean | Agency: professional, balanced, trustworthy |
| VoyaVacations | Citrine | Clean | Travel: friendly, approachable |
| SyncFocus | Sapphire | Edge | Audio tech: precise, modern |