Experience
Experience
Assets
Illustrations · Graphics · Images · Video
A media ladder from cheapest (SVG illustrations) to heaviest (video). Pair with bandwidth modes so immersive content never blocks core tasks.
Current bandwidth
Mode
balanced
— video off, heavy FX on. Change under Bandwidth.| Kind | When | Format | Lite |
|---|---|---|---|
| Illustrations | Empty states, onboarding, conceptual docs | SVG / CSS composition, monochrome + primary tint | Keep; they are already cheap |
| Graphics | Diagrams, system maps, brand marks | SVG preferred; PNG @2x fallback | Inline SVG only |
| Images | Photography, product shots, avatars | WebP/AVIF + width srcset; LQIP blur | 1x width, aggressive compression, or omit |
| Video | Product tours, immersive heroes | Muted loop MP4/WebM + poster; no auto sound | Poster still only; play on tap |
Illustrations
Empty
Search
Success
System
Graphics
Token map
Component tree
Motion curve
Images
img · slot 1 · srcset
img · slot 2 · srcset
img · slot 3 · srcset
Prefer WebP/AVIF, width-based srcset, and blur-up LQIP. Always set width/height to avoid CLS.
Video
Poster only (balanced)
Tap-to-play when network allows