We should always strive for consistency in how we present links.
Guidelines for Navigational 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
- No underline (text-decoration) in a normal state.
- On-hover and focus state should have a simple
Alternative Styles for Links
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
- Use a simple
$black501px border-bottom on-hover for
- Avoid using
$yelllow50on 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
$black501px border-bottom, on-hover.
$blue50is overkill when aligned with the WeWork logo.
$black50is more appropriate for navigation patterns. Reserve
$blue50for links in copy.