States
Section titled “States”| State | Visual change | Tokens |
|---|---|---|
| Link default | Subtle label and icon | color-text-subtle, color-icon-subtle |
| Link hover | Light fill, strong label | color-action-subtle-hovered, color-text-default |
| Link pressed | Fill one step darker | color-action-subtle-pressed |
| Current page | Selected fill, medium-weight label, brand icon and a 2 px indicator bar (tab.indicator.thickness) |
color-surface-selected, color-icon-brand, color-action-primary-default |
| Focus | 2 px inner focus ring | color-focus-ring, border-width-focus |
| Collapsed | Icons only, centred | None |
| Drawer open | Raised panel and dimmed backdrop | color-surface-raised, shadow-overlay, color-surface-scrim |
Measurements
Section titled “Measurements”| Part | Size |
|---|---|
| Sidebar | 256 px (app-shell-sidebar-width); collapsed 48 px (app-shell-sidebar-width-collapsed) |
| Drawer | At most 288 px (app-shell-drawer-width) or 85 % of the screen |
| Top bar | At least 56 px tall |
| Link | 32 px tall (app-shell-item-height), 8 px inline padding and gap, text-body-md (14/400), 16 px icon |
| Group heading | At least 32 px tall, text-label-sm; a folding group’s items hang from a 1 px rail (color-border-subtle) |
| Navigation padding | 8 px (space-md) |
| Edge rail | 16 px hit zone (app-shell-rail-width) centred on the sidebar edge; a 2 px line shows on hover |
| Indicator bar | 2 px wide (tab.indicator.thickness), as tall as the link |
| Content padding | 24 px (space-lg); 12 px (space-md) below 640 px |
Inset panel (inset) |
From 1024 px, 8 px (space-md) in from the top, bottom and end, 14 px corners (radius-xl), shadow-raised; the shell fill is surface-layer-1 |
Ctrl+B (Cmd+B on macOS) narrows or widens the sidebar and, below 1024 px, opens or closes the drawer. The shortcut does nothing while focus is in a text field, a select or editable content; shortcut={false} turns it off. The shell stores nothing and writes no cookie: to keep the state, save it in onCollapsedChange under the app’s own preference and consent rules and pass it back as defaultCollapsed.
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-default | #f7f7f7#f7f7f7#f7f7f7 | #1e1e1e#1e1e1e#1e1e1e | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--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-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--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-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-app-shell-sidebar-width | 256px256px256px | 256px256px256px | |
--bigbang-app-shell-sidebar-width-collapsed | 48px48px48px | 48px48px48px | |
--bigbang-app-shell-drawer-width | 288px288px288px | 288px288px288px | |
--bigbang-app-shell-item-height | 32px32px32px | 32px32px32px | |
--bigbang-app-shell-rail-width | 16px16px16px | 16px16px16px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Indicator slides to the current page | translate, height |
motion-indicator-duration (310 ms) |
easing-spring-productive-base |
Moves at once. |
| Drawer opens | translate full width, opacity (motion.drawer) |
motion-drawer-enter-duration |
easing-spring-productive-slow |
No slide; only fades. |
| Drawer closes | translate, opacity back |
motion-drawer-exit-duration |
motion-drawer-exit-easing |
Only fades. |
| Backdrop | opacity (motion.scrim) |
motion-dialog-enter-duration |
motion-dialog-enter-easing |
Unchanged. |
| Group opens | Content fades and drops 4 px (motion.collapsible) |
motion-collapsible-duration |
motion-collapsible-easing |
Only fades. |
| Labels return | opacity (motion.reveal) |
motion-skeleton-reveal-duration |
easing-productive-enter |
Unchanged. |
| Link hover | Background colour (motion.hover) |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged. |
The indicator height animates only because the bar is absolutely positioned (MOT-02 exception). The sidebar width changes without animation. See Motion for the values.