| State |
Support |
Visual change |
Tokens |
| Default |
Yes |
Neutral: transparent background, default border and text. Other tones: pastel fill, border and text; violet, teal and pink are category hues with no status meaning |
color-border-default, color-text-default, color-status-*-background, color-status-*-border, color-status-*-foreground, color-tag-*-background, color-tag-*-border, color-tag-*-foreground |
| Hover |
Selectable and remove button |
An 8 % layer in the current text colour |
state-layer-hovered |
| Pressed |
Selectable and remove button |
Scales to 97 %, 10 % layer |
motion-press-scale, state-layer-pressed |
| Focus |
Selectable and remove button |
2 px ring, 2 px away |
color-focus-ring, border-width-focus |
| Selected |
Selectable |
Brand background, border and text; check mark |
color-status-brand-background, color-status-brand-border, color-status-brand-foreground |
| Disabled |
Yes |
Muted border and text, not-allowed cursor |
color-border-disabled, color-text-disabled |
| Property |
Value |
Token |
Height, sm |
24 px |
tag-height-sm |
Height, md |
32 px |
tag-height-md |
Inline padding, sm |
8 px |
tag-padding-inline-sm |
Inline padding, md |
12 px |
tag-padding-inline-md |
| Corner radius |
8 px |
tag-radius |
| Border |
1 px |
border-width-default |
Icon, sm / md |
12 px / 16 px |
icon-size-xs, icon-size-sm |
| Remove button |
24 x 24 px (both sizes) |
tag-height-sm |
| Gap between parts |
4 px; 8 px between tags in a group |
space-xs, space-md |
| Text style |
14 px / 20 px, semibold |
label-md |
Values follow the selected brand; switch the brand in the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-tag-height-sm | | 24px24px24px | 24px24px24px |
--bigbang-tag-height-md | | 32px32px32px | 32px32px32px |
--bigbang-tag-padding-inline-sm | | 8px8px8px | 8px8px8px |
--bigbang-tag-padding-inline-md | | 12px12px12px | 12px12px12px |
--bigbang-tag-radius | | 8px8px8px | 8px8px8px |
--bigbang-color-border-default | | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 |
--bigbang-color-text-default | | #171717#171717#171717 | #fafafa#fafafa#fafafa |
--bigbang-color-status-brand-background | | #edf5f8#fcf1ec#f0f3ff | #092932#3c190a#1d2046 |
--bigbang-color-status-brand-border | | #cfe6ee#fad9cc#d9dfff | #0e414f#5e2911#2f336e |
--bigbang-color-status-brand-foreground | | #125768#7b3717#3e4490 | #a4d0df#f3b9a1#b9c4ff |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-motion-press-scale | | 0.970.970.97 | 0.970.970.97 |
| Interaction |
Motion |
Reduced motion |
| Press (selectable, remove) |
scale 1 → 0.97, motion-press-duration (70 ms); springs back over 230 ms on release (motion.press) |
Scale stays 1; no movement |
| Hover |
Layer opacity, motion-hover-duration (110 ms) (motion.stateLayer) |
Same; colour only |
| Check mark |
Opacity 0 → 1 and scale 60 % → 100 %, motion-selection-duration (110 ms) (motion.selectionMark) |
Short fade only |
| Added to a group |
Opacity 0 → 1 and a 4 px rise, motion-list-enter-duration (150 ms) (motion.listItem) |
Short fade only |
| Removal |
Immediate; no exit animation |
Same |
| Focus |
The ring appears at once (0 ms) |
Same |
Values come from tokens; see Motion for details.