Linking language
Arc's linking language communicates to our users what is and isn't an interactive element.
Visual Indicators
Arc uses one or more visual indicators to show that an element is interactive:
- Rounded corners, with an 8px border radius
- Text underline
- Indigo or pink brand colours
- Indigo or pink brand gradients
- An icon
- Context (for example, the link is part of a navigation menu)
Accessibility
Combining colours (and gradients) with a second visual indicator is generally necessary for compliance with WCAG 2.1 — since Arc's interactive colours do not have 3:1 contrast with its text colours — and also to differentiate indigo links from indigo headers in the light pathway.
In Practice
Inline text link
Inline text links use the brand indigo and text underline to indicate they are a link.
Button
Buttons use rounded corners and the brand gradient to indicate they are interactive.
Buttons with icons
Buttons may also use an icon as a third visual indicator.
Flat buttons
Flat buttons are buttons without a background. They are visually similar to text links, but use an icon instead of an underline as a second visual indicator. The icon is normally a chevron.
Context
In certain special cases, such as site navigation, the context of the visual design may be sufficient to clearly indicate that an element is interactive.
Components
Card
Use Card as a clickable link that contains a snapshot of content from the target page.
Usage guidelines
Always pair colour with a second visual indicator
In order to be WCAG 2.1 compliant, interactive elements should not rely on colour alone.
Only use border radius for interactive elements
Avoid using border radius for non-interactive elements.
Only use 8px for border radius
Use 8px for border radius to ensure consistency with all Arc products.