States
Section titled “States”| Tone | Colour | data-sign |
|---|---|---|
default |
color-text-default |
— |
subtle |
color-text-subtle |
— |
sign, positive |
color-text-success, with “+” |
positive |
sign, negative |
color-text-danger, with “-” |
negative |
sign, zero |
color-text-default |
zero |
Measurements
Section titled “Measurements”| Size | Text style |
|---|---|
sm |
type-body-sm |
md |
type-body-md |
lg |
type-heading-sm |
xl |
type-heading-xl |
fraction="subtle" |
0.7 em |
Tokens
Section titled “Tokens”Values are shown for the selected brand; switch brands from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-motion-value-duration | 0.11s0.11s0.11s | 0.11s0.11s0.11s | |
--bigbang-motion-list-distance | 4px4px4px | 4px4px4px |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Property | Duration token | Easing token | Reduced motion |
|---|---|---|---|---|
| Amount change | The new value rises 4 px and fades in | motion-value-duration |
easing-spring-productive-fast |
It only fades. |