We should always strive for consistency in how we present links.

  • The link should be noticeably different from other content, considering our accessibility guidelines for links ↗ (i.e. don't rely on only color to identify a link, hence why Rivendell's links are a different font-weight as well as color).
  • Use a bold font-weight, Aperçu-Medium to be specific.
  • Use the $blue50 color.
  • No underline (text-decoration) in a normal state.
  • On-hover and focus state should have a simple $blue50 1px border-bottom.

Link example 1

Different product scenarios may require a different treatment for a link or action. Consider the following guidelines in these cases:

  • Bold font-weight (Aperçu-Medium), using the $black50 color.
  • Use a simple $black50 1px border-bottom on-hover for $black50 color links.
  • Avoid using $yelllow50 on a light background as it won't be legible.
  • When using smaller font sizes (e.g. Copy 3 or Copy 4, perhaps a bold font-weight may draw too much attention to itself. If the intention of the smaller text is be subtle, maintain a regular font-weight (Aperçu-Light) and use a simple underline (text-decoration), or a $black50 1px border-bottom, on-hover.
  • $blue50 is overkill when aligned with the WeWork logo. $black50 is more appropriate for navigation patterns. Reserve $blue50 for links in copy.

Link example 2

results matching ""

    No results matching ""