| State |
Visual change |
Tokens |
| Default |
Muted label |
color-fg-subtle |
| Hover |
Label darkens, background one step darker |
color-fg-default, color-action-subtle-hovered |
| Pressed |
Background one more step darker |
color-action-subtle-pressed |
Selected (line) |
Dark label, a 2 px indicator below in the primary colour |
color-fg-default, color-action-primary-default, tab-indicator-thickness |
Selected (contained) |
Dark label, raised pill on a layer track |
color-surface-layer-2, color-surface-raised, shadow-raised |
| Focus |
2 px inner focus ring (drawn inside because the list scrolls) |
color-focus-ring, border-width-focus |
| Disabled |
Muted label, not-allowed cursor |
color-fg-disabled |
| Size |
Height |
Inline padding |
Text |
Icon |
sm |
32 px (tab-height-sm) |
6 px (tab-padding-inline-sm) |
text-label-md |
icon-size-sm |
md (default) |
36 px, 44 px on touch (tab-height-md) |
8 px (tab-padding-inline-md) |
text-label-md |
icon-size-md |
Tabs have no gap between them (line), and the line list has no track line: only the 2 px indicator marks the selected tab. In the contained look the track has the row height (32 or 36 px) with a 2 px gap and 2 px padding (space-xxs), so the tabs inside it are 4 px shorter. Corner radius is tab-radius (10 px). The list and panel are space-md (8 px) apart.
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-tab-height-sm | | 32px32px32px | 32px32px32px |
--bigbang-tab-height-md | | 36px36px36px | 36px36px36px |
--bigbang-tab-padding-inline-sm | | 6px6px6px | 6px6px6px |
--bigbang-tab-padding-inline-md | | 8px8px8px | 8px8px8px |
--bigbang-tab-radius | | 10px10px10px | 10px10px10px |
--bigbang-tab-indicator-thickness | | 2px2px2px | 2px2px2px |
--bigbang-color-line-selected | | | |
--bigbang-color-surface-sunken | | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 |
--bigbang-color-surface-raised | | #ffffff#ffffff#ffffff | #262626#262626#262626 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Indicator slides to the selected tab |
translate, width (height when vertical) |
motion-indicator-duration (310 ms) |
easing-spring-productive-base |
Moves at once (1 ms). |
| Panel appears |
opacity 0 → 1 |
motion-skeleton-reveal-duration |
easing-productive-enter |
A short fade stays; nothing moves. |
| Hover and pressed colour |
color, background-color |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; colour only. |
| Focus |
The ring appears at once |
None |
None |
Unchanged. |
The indicator width animates only because it is absolutely positioned (MOT-02 exception); the page layout does not shift. See Motion for the values.