| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
The Card surface, value and change |
color-surface-raised, color-text-default |
| Change, positive |
Yes |
The change text and arrow in the positive colour |
color-data-positive |
| Change, negative |
Yes |
In the negative colour |
color-data-negative |
| Change, neutral |
Yes |
In the subtle text colour |
color-text-subtle |
| Loading |
Yes |
Value and change are placeholders; a highlight crosses; the root is aria-busy |
color-surface-sunken, radius-sm |
| No data |
Yes |
— in place of the value, with a screen reader reason |
- |
| Hidden |
Yes |
The value shows •••• |
- |
| Hover, pressed, focus |
No |
Static; it has no interactive part |
- |
| Disabled |
No |
It has no disabled state |
- |
| Error |
Composition |
StatCard does not show errors; replace the tile with an error component |
- |
| Property |
Value |
Token |
| Corner radius |
16 px |
radius-lg |
| Padding |
16 px |
space-xl |
| Gap, label to value and to the line below |
label-value 6 px, value-line 4 px |
space-sm, space-xs |
| Value to trend |
at least 16 px |
space-xl |
| Change, arrow to text |
2 px |
space-xxs |
| Arrow size |
12 px |
icon-size-xs |
| Label style |
14 px / 20 px, medium weight |
label-md |
| Value style |
24 px / 32 px, semibold, tabular figures |
heading-lg |
| Change style |
14 px / 20 px, medium weight, tabular figures |
label-md |
| Period and info style |
12 px / 16 px |
body-sm |
| Placeholder, value |
96 × 32 px |
- |
| Placeholder, change |
64 × 20 px |
- |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-data-positive | | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 |
--bigbang-color-data-negative | | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
--bigbang-radius-lg | | 10px10px10px | 10px10px10px |
--bigbang-radius-sm | | 6px6px6px | 6px6px6px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-icon-size-xs | | 12px12px12px | 12px12px12px |
--bigbang-motion-skeleton-reveal-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
--bigbang-period-shimmer | | 1.5s1.5s1.5s | 1.5s1.5s1.5s |
| Interaction |
Motion |
Reduced motion |
| Value changes |
The new value fades opacity 0 → 1 over motion-skeleton-reveal-duration (110 ms) (motion.reveal); the number never counts |
The same short fade |
| Loading |
A highlight crosses the placeholder three times, then stops (period-shimmer, motion.skeleton) |
The highlight stops; the placeholder stays still |
| Placeholder to value |
The value fades in over 110 ms |
Same |
| Static tile |
No motion |
Nothing to reduce |
Values come from tokens; see Motion for details.