| State |
Visual change |
Tokens |
| Default |
Link colour and an underline that is always there, in a muted colour |
color-text-link, color-border-strong |
| Hover |
The colour darkens one step; the underline takes the text colour |
color-text-link-hovered |
| Focus |
2 px outer focus ring with a 2 px gap and 4 px corners |
color-focus-ring, border-width-focus, radius-xs |
| No destination |
When an unsafe href is removed, the link cannot be followed |
- |
Link has no pressed or disabled state.
| Property |
Value |
Token |
| Inline text style |
The style of the surrounding text |
- |
Standalone md text style |
label-md (14 px) |
text.label-md |
Standalone sm text style |
label-sm (12 px) |
text.label-sm |
| Underline offset |
0.2 em |
- |
| Icon size |
12 px inline, 16 px standalone |
icon-size-xs, icon-size-sm |
| Gap between text and icon |
2 px |
space-xxs |
Values are shown for the selected brand; change the brand from the top bar.
| Token | Sample | Light mode | Dark mode |
|---|
--bigbang-color-text-link | | #125768#171717#171717 | #77bacf#fafafa#fafafa |
--bigbang-color-text-link-hovered | | #0e414f#404040#404040 | #a4d0df#d4d4d4#d4d4d4 |
--bigbang-color-focus-ring | | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
--bigbang-border-width-focus | | 2px2px2px | 2px2px2px |
--bigbang-radius-xs | | 4px4px4px | 4px4px4px |
--bigbang-icon-size-xs | | 12px12px12px | 12px12px12px |
--bigbang-icon-size-sm | | 16px16px16px | 16px16px16px |
--bigbang-space-xxs | | 2px2px2px | 2px2px2px |
| Interaction |
Property |
Duration token |
Easing token |
Reduced motion |
| Hover |
color → color-text-link-hovered (motion.hover); the underline takes the text colour |
motion-hover-duration (110 ms) |
motion-hover-easing |
Unchanged; it is a colour transition without movement. |
| Focus |
The focus ring appears at once, without a transition |
None |
None |
Unchanged. |
| Enter and exit |
None |
None |
None |
Not applicable. |
Link does not move or scale; it uses a colour transition only. See Motion for the values.