| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
The term in the subtle colour, the value in the default colour |
color-text-subtle, color-text-default |
Dividers (dividers) |
Yes |
A 1 px line between rows |
color-border-subtle, border-width-default |
| Empty value |
Yes |
— and a screen reader reason |
- |
| Long value |
Yes |
Wraps |
- |
| Hover, pressed |
No |
Static; a row is not interactive |
- |
| Focus |
On the action |
The action control carries its own ring |
color-focus-ring, border-width-focus |
| Disabled |
No |
It has no disabled state; the action control carries its own |
- |
| Loading, error |
Composition |
Use with Skeleton and error components |
- |
| Property |
Value |
Token |
| Term to value (side by side) |
16 px |
space-xl |
| Term to value (stacked) |
2 px |
space-xxs |
Row vertical padding, sm |
4 px |
space-xs |
Row vertical padding, md |
6 px |
space-sm |
| Column gap in a grid |
24 px |
space-3xl |
| Divider |
1 px |
border-width-default |
Term column (inline) |
a third of the row; the value gets two thirds |
- |
Term style, md |
14 px / 20 px, medium weight |
label-md |
Term style, sm |
12 px / 16 px, medium weight |
label-sm |
Value style, md |
14 px / 20 px |
body-md |
Value style, sm |
12 px / 16 px |
body-sm |
| Switch to side by side |
1024 px |
- |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-text-subtle | | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 |
--bigbang-color-border-subtle | | #ededed#ededed#ededed | #303030#303030#303030 |
--bigbang-border-width-default | | 1px1px1px | 1px1px1px |
--bigbang-space-xxs | | 2px2px2px | 2px2px2px |
--bigbang-space-xs | | 4px4px4px | 4px4px4px |
--bigbang-space-sm | | 6px6px6px | 6px6px6px |
--bigbang-space-xl | | 16px16px16px | 16px16px16px |
--bigbang-space-3xl | | 24px24px24px | 24px24px24px |
| Interaction |
Motion |
Reduced motion |
| List appears |
No motion; it is static |
Nothing to reduce |
| A row is added or removed |
No motion |
Same |
| Action control |
The control’s own press and hover motion (Button) |
The control’s own reduced motion |
Values come from tokens; see Motion for details.