| State |
Visual change |
Tokens |
| Loading |
Layer background, a light highlight crossing three times |
color-surface-layer-2, color-surface-raised, period-shimmer |
| Reduced motion |
A still background |
color-surface-layer-2 |
| Loaded |
The content fades in |
motion-skeleton-reveal-duration |
| Shape |
Value |
Token |
| Text line |
1em tall, 8 px corners |
radius-md |
| Gap between lines |
6 px |
space-sm |
| Last line |
60 % of the width |
None |
| Block |
Full width, 16:9, 8 px corners |
radius-md |
| Circle |
32 px |
icon-size-xl |
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-surface-layer-2 | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-icon-size-xl | | 32px32px32px | 32px32px32px |
--bigbang-space-sm | | 6px6px6px | 6px6px6px |
--bigbang-period-shimmer | | 1.5s1.5s1.5s | 1.5s1.5s1.5s |
--bigbang-motion-skeleton-reveal-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Highlight |
A translate loop, three times (motion.skeleton) |
period-shimmer (1500 ms, 4.5 s in all) |
easing-linear |
The highlight does not cross (reduce-motion:after:animate-none). |
| Content arrival |
opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration (110 ms) |
easing-productive-enter |
Unchanged; a short fade. |
See Motion for the values.