Links
Principle-level guidance for link colors and states. Implementation details live in the in-app styleguide and global CSS.
Principles
- Backgrounds: white (#ffffff) or any color family at tones 50, 100, or 200 (default family: grey).
- Static text: tone 1200 of the same color family as the background.
- Purpose-based link color:
- Same-space/page actions: neutral (same family as background)
- Navigation/external: blue
- Destructive: red
- Base tones by background:
- White: tone 600
- Tone 50: tone 700
- Tone 100: tone 800
- Tone 200: tone 900
- States: Hover/Focus = tone 1000 (+ underline for inline text links). Active = black (#040404), no underline.
Examples on White
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Grey 50
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Grey 100
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Grey 200
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Blue 50/100/200
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Green 50/100/200
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Red 50/100/200
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Examples on Yellow 50/100/200
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Neutral inline link: View details
Navigation inline link (blue): Open settings
Destructive inline link (red): Delete item
Final Tones Matrix
Applies to whichever link family is chosen by purpose (neutral, blue, red).
| Background | Base | Hover/Focus | Active |
|---|---|---|---|
| White (#ffffff) | tone 600 | tone 1000 | #040404 |
| Tone 50 | tone 700 | tone 1000 | #040404 |
| Tone 100 | tone 800 | tone 1000 | #040404 |
| Tone 200 | tone 900 | tone 1000 | #040404 |
Inline text links add an underline on hover and focus-visible. Buttons and icon-only links do not use underlines but share the same color states.
Accessibility
- Inline links show underline on hover and keyboard focus (focus-visible), removed on active.
- Ensure sufficient contrast between background and chosen link family at all states.
- Use meaningful link text; avoid "click here".