Components

Links

Standalone links carry the indigo link colour and gain a 2px-offset underline on hover. They are distinct from clickable record names in tables.

Links
A standalone link
Read our approach for detail.
External site 
<a className="ls-link" href="/color">the colour foundations</a>

Read <a className="ls-link" href="#">our approach</a> for detail.

<a className="ls-link" href="https://example.com" target="_blank" rel="noreferrer">
  External site
</a>

Guidelines

Do
  • Give standalone links the indigo link colour.
  • Reveal a 2px-offset underline on hover, not on the colour alone.
  • Mark external links with a small outward indicator.
Do not
  • Do not colour clickable record names in dense tables like links. They are primary text that underlines on hover.
  • Do not underline every link at rest in running interface text where it adds noise.