| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Transparent surface, default text |
color-text-default, color-text-subtle |
| Hover |
With render only |
The current colour overlays at 8 % opacity |
state-layer-hovered |
| Pressed |
With render only |
The layer is at 10 % opacity |
state-layer-pressed |
| Focus |
With render only |
A 2 px ring, 2 px away; layer at 10 % |
color-focus-ring, border-width-focus, state-layer-focused |
| Selected |
Yes |
A selected surface and a 2 px bar at the inline start |
color-surface-selected, color-border-selected |
| Disabled |
Yes |
Faded text; an interactive row leaves focus and ignores clicks |
color-text-disabled |
| Loading, empty, error |
Composition |
With Skeleton and EmptyState inside the list |
- |
| Property |
Value |
Token |
| Corner radius |
8 px |
radius-md |
Block padding, sm |
8 px |
space-md |
Block padding, md |
12 px |
space-lg |
Block padding, lg |
16 px |
space-xl |
| Inline padding |
sm 8 px, md 12 px, lg 16 px |
space-md, space-lg, space-xl |
| Gap between slots |
sm 8 px, md and lg 10 px |
list-item-gap-sm, list-item-gap-md, list-item-gap-lg |
| Border |
1 px; transparent by default, color-border-default in outline |
color-border-default |
muted surface |
Tinted row |
color-surface-layer-1 |
| Leading image |
A direct img in leading: sm 32 px, md 40 px, lg 48 px, 6 px corners; the slot moves to the first line when there is a subtitle |
list-item-media-size-*, radius-sm |
| Title to subtitle |
2 px |
space-xxs |
| Selected bar |
2 px wide, inset 4 px from the ends |
space-xxs, space-xs |
| Divider |
1 px |
color-border-subtle |
| Title style |
Medium weight, one line then an ellipsis; sm and md 14 px / 20 px, lg 16 px / 24 px |
label-md, body-lg |
| Subtitle style |
14 px / 20 px, two lines then an ellipsis |
body-md |
| Meta style |
12 px / 16 px |
body-sm |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-surface-selected | | #edf5f8#ededed#ededed | #092932#404040#404040 |
--bigbang-color-border-selected | | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-text-disabled | | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-state-layer-hovered | | 0.080.080.08 | 0.080.080.08 |
--bigbang-state-layer-focused | | 0.10.10.1 | 0.10.10.1 |
--bigbang-state-layer-pressed | | 0.10.10.1 | 0.10.10.1 |
--bigbang-radius-md | | 8px8px8px | 8px8px8px |
--bigbang-space-md | | 8px8px8px | 8px8px8px |
--bigbang-space-lg | | 12px12px12px | 12px12px12px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-motion-hover-duration | | 0.11s0.11s0.11s | 0.11s0.11s0.11s |
--bigbang-motion-list-enter-duration | | 0.15s0.15s0.15s | 0.15s0.15s0.15s |
--bigbang-motion-list-stagger | | 0.03s0.03s0.03s | 0.03s0.03s0.03s |
--bigbang-motion-list-distance | | 4px4px4px | 4px4px4px |
| Interaction |
Motion |
Reduced motion |
Hover, press, focus (render) |
Layer opacity changes over motion-hover-duration (110 ms) (motion.stateLayer) |
Same; nothing moves |
| Becoming selected |
Surface colour and bar opacity change over 110 ms (motion.hover) |
Same |
Entrance (animate) |
Opacity 0 → 1 and a 4 px rise, 150 ms, 30 ms delay per row, up to the 8th row (motion.listItem) |
Rise is 0 px; only a short fade |
| Focus ring |
Appears at once (0 ms) |
Same |
| Static row |
No motion |
Nothing to reduce |
Values come from tokens; see Motion for details.