States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Hidden | Not drawn while count is 0 |
None |
Visible (floating) |
Raised surface and overlay shadow | color-surface-raised, shadow-overlay |
Visible (inline) |
Raised surface and thin border, no shadow | color-surface-raised, color-border-subtle |
| Button hover | Light fill | color-action-subtle-hovered |
| Focus | 2 px outer focus ring | color-focus-ring, border-width-focus |
Measurements
Section titled “Measurements”Buttons are 32 px tall (button-height-sm). The bar padding is 4 px (space-xs), the gap between parts 8 px (space-sm) and the corner radius radius-lg. A floating bar sits 24 px (space-lg) above the bottom of the screen and is at most the screen width minus 12 px on each side.
Tokens
Section titled “Tokens”Values follow the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c | |
--bigbang-shadow-overlay | 0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549)0px 20px 25px -5px rgba(0, 0, 0, 0.10196078431372549), 0px 8px 10px -6px rgba(0, 0, 0, 0.10196078431372549) | 0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963)0px 8px 24px 0px rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-button-height-sm | 32px32px32px | 32px32px32px | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Bar appears | opacity 0 → 1, rises 8 px (motion.toast) |
motion-toast-enter-duration |
motion-toast-enter-easing; the rise on easing-spring-productive-base |
No rise; the bar only appears. |
| Count changes | opacity 0 → 1 (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Unchanged; it is an opacity change. |
| Button press | scale 1 → 0.97 |
motion-press-duration (70 ms) |
motion-press-easing |
Scale stays 1. |
The bar is removed at once when it goes away; there is no exit motion. See Motion for the values.