States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Default | Raised surface without a border; the search is a field on a sunken fill | color-surface-raised, color-surface-sunken |
| Highlighted command | Light background | color-action-subtle-hovered |
| Disabled command | Dimmed text | color-text-disabled |
| Shortcut key | Sunken background, thin border | color-surface-sunken, color-border-subtle |
| Dialog open | 1 px overlay hairline and the shadow-overlay shadow; lightly dimmed backdrop blurred by 4 px |
color-border-overlay, shadow-overlay, color-surface-scrim, blur-surface-scrim |
Measurements
Section titled “Measurements”The search is a field inset 8 px from the edges, 32 px tall, on a sunken fill with 8 px corners (command-search-height). Commands sit 8 px from the edge, with 8 px inline padding and an 8 px gap to the icon. The list grows to at most 448 px or 80 % of the screen and then scrolls with a thin scrollbar. The dialog is at most 560 px wide (command-width, the same as dialog-width-md), keeps a 16 px gutter on each side and opens 12 % down from the top of the screen (command-offset-top). The corner radius is radius-lg.
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-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-scrim | rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804) | rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963) | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-dialog-backdrop-blur | 4px4px4px | 4px4px4px | |
--bigbang-command-width | 560px560px560px | 560px560px560px | |
--bigbang-command-offset-top | 12dvh12dvh12dvh | 12dvh12dvh12dvh | |
--bigbang-command-search-height | 32px32px32px | 32px32px32px | |
--bigbang-radius-lg | 10px10px10px | 10px10px10px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Dialog opens | opacity, scale 0.96 → 1, rises 8 px (motion.dialog) |
motion-dialog-enter-duration |
motion-dialog-enter-easing |
No scale or shift; the dialog only appears. |
| Dialog closes | opacity, scale back |
motion-dialog-exit-duration |
motion-dialog-exit-easing |
Only fades. |
| Backdrop | opacity (motion.scrim) |
Same as the dialog | Same as the dialog | Unchanged. |
| Highlighted command | Background colour (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged. |
See Motion for the values.