Gradients
Four gradient tiers with increasing step spread. Choose your tier based on the target component size — small elements need wider spreads to be perceptible.
All Tiers
subtle Gradients
Steps 1 → 3 — Soft surface tint for backgrounds and cards
accent Gradients
Steps 8 → 10 — Bold 2-step strip for top bars and dividers
deep Gradients
Steps 7 → 10 — Rich 3-step fill for stat cards and panels
vivid Gradients
Steps 5 → 10 — Dramatic 5-step sweep for hero areas and large surfaces
Wash
Step 3 as a flat color wash on card backgrounds
Size vs Perceptibility
The same gradient tier renders differently depending on the element's size. Small elements compress the gradient into fewer physical pixels, making subtle transitions invisible. Choose your tier based on the target component size.
| Size | subtle | accent | deep | vivid | Recommendation |
|---|---|---|---|---|---|
| 4px strip | Use vivid or deep | ||||
| 16px bar | Use deep or accent | ||||
| 64px panel | Accent works well | ||||
| 128px card | Deep is perceptible | ||||
| 192px hero | Even subtle is visible |
Large Panel Showcase
subtle
Steps 1 → 3 — Soft surface tint for backgrounds and cards
accent
Steps 8 → 10 — Bold 2-step strip for top bars and dividers
deep
Steps 7 → 10 — Rich 3-step fill for stat cards and panels
vivid
Steps 5 → 10 — Dramatic 5-step sweep for hero areas and large surfaces