States
Section titled “States”Heading is not interactive; it sits in flow as a heading element.
| State | Support | Visual change |
|---|---|---|
| Default | Yes | Size from the level, color-text-default colour |
| Hover, pressed, focus, disabled, selected | No | None; Heading is not interactive |
| Long text | Yes | The line wraps and balances with text-balance; it is not cut |
Measurements
Section titled “Measurements”size |
Font / line height | Type style | Default level |
|---|---|---|---|
xl |
32 px / 40 px | heading-xl |
h1 |
lg |
24 px / 32 px | heading-lg |
h2 |
md |
20 px / 28 px | heading-md |
h3 |
sm |
16 px / 24 px | heading-sm |
h4, h5, h6 |
All sizes are semibold. Margin is zero.
Tokens
Section titled “Tokens”Values show for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa |
Motion and interaction
Section titled “Motion and interaction”| Interaction | Motion | Reduced motion |
|---|---|---|
| Enter, exit, state change | None: Heading does not move; it only sets layout and typography | Nothing to reduce |
See the Motion page for motion details.