Text links are simple but important to get right. Every link inside a .ds-page is the inline text link, with no class to add, and appears in Link Blue, a special blue reserved only for this purpose. Do not override link styles, the colors are carefully chosen to maintain accessibility contrasts in light and dark modes and on tinted and shaded backgrounds.
One link, four states. At rest it is Link Blue with a 1px underline set 2px below the text. On hover the colour deepens and the underline thickens. Once followed it turns Visited Purple. When reached by keyboard it shows a 3px Link Blue ring. The four colours are in the tokens table, read live from the stylesheet.
Try the states here: point at the link, press Tab to reach it, follow it once and it keeps the visited colour.
Read the Endorsement policy before you ask a colleague to endorse you.
<p>Read the <a href="/help/endorsement">Endorsement policy</a> before you ask a colleague to endorse you.</p>href inside a .ds-page takes the link
treatment: the colour, the underline, and the hover, visited and focus states. There is no
class to add, and the dark values arrive through the same token flip as everything else.Inline within body text and within muted-grey secondary text.
The visited state matters most for inline references in long articles, where it helps a reader scan papers they have already followed up on.
Submissions that include figures must reference each in the article body. Co-authors are added on the author management page before finalisation. Follow the submission guidelines link once and it takes the visited colour.
Submitted 14 Jan 2024 · Updated 22 Feb 2024 · view revision history · category cs.CV, cs.LG
<p>
Submissions that include figures must reference each in the
<a href="/help/submit">article body</a>. Co-authors are added on the
<a href="/auth/authorship">author management page</a> before finalisation.
</p>
<!-- Secondary text: the link keeps its own colour -->
<p class="ds-section-desc">
Submitted 14 Jan 2024 · Updated 22 Feb 2024 ·
<a href="/abs/2401.00001v2">view revision history</a> ·
category <a href="/list/cs.CV/recent">cs.CV</a>,
<a href="/list/cs.LG/recent">cs.LG</a>
</p>Inline body links must be underlined
Color contrast against body text is only 3.0:1 in light mode — too marginal to rely on alone. Underlines are mandatory for inline links per DESIGN-POLICIES.md and WCAG 1.4.1 (use of color). Standalone navigation links (header, footer, button-like surfaces) may omit the underline.
A link goes somewhere: it has an href, it is underlined, and
it remembers being visited. A text-only button does something on this page, such as opening a panel
or copying a value: it is Link Blue too, but has no underline and no visited state. Use the one that
matches what happens when it is pressed. Text-only buttons are described on
Buttons.
Submitted 14 Jan 2024 · view revision history ·
<p>
Submitted 14 Jan 2024 · <a href="/abs/2401.00001v2">view revision history</a> ·
<button class="ds-btn ds-btn-text" type="button" aria-expanded="false">Show all versions</button>
</p>aria-expanded.<a>, not beside it.href. Without one the element is not
focusable, has no visited state, and does not announce as a link. Something that acts on this
page rather than going somewhere is a button, not a link with a
click handler.text-decoration: none on an inline link. The underline is the only cue that
survives forced-colors mode and a reader who cannot see the colour difference. Only a
standalone link, such as one in navigation, may drop it.:visited
on links to papers, listings or references. Suppress it only where “where have I been”
carries no meaning, such as a breadcrumb or a menu.:focus-visible, so it appears for keyboard users and not on mouse click. An
outline: none on a link takes it away for everyone.docs/icons/external-link.svg)
after its text, with aria-hidden="true" on the icon and “(opens in a new tab)” in an
.is-sr-only span, so the change is announced and survives page translation.Use --ds-text-disabled (#aeaaa4) for the disabled color and set
pointer-events: none. The underline stays so it is still recognisable as a
(currently-unavailable) link. The disabled state falls below AA on contrast — WCAG exempts
disabled controls from contrast requirements.
A list of author names, a navigation bar, a footer column: these are lists in which every item is a link, and none of them is underlined. The underline exists to tell a link apart from the text around it, and in a list of links there is no such text; underlining every item would add visual noise and tell the reader nothing. WCAG asks for the underline only where colour alone would have to separate a link from ordinary text, which is the case for an inline link and not for a list. The links keep Link Blue, the hover and focus states, and the visited colour where it means something.
The Visited Purple is intentionally strong, not a faint after-state. Researchers reading long
bibliographies and listings benefit from seeing what they have already followed up on; a
too-subtle visited treatment defeats the purpose. If a specific surface (e.g., a navigation
breadcrumb) needs to suppress visited styling, override :visited { color: inherit }
locally.
Four interactive states — default, hover, visited, focus — driven by
--ds-link, --ds-link-hover and --ds-link-visited, with the
dark values arriving through the same token flip as everything else. Per
DESIGN-POLICIES: an inline body link is
underlined; a standalone link, such as one in navigation, may omit it.
Read at runtime from design-system.css via
getComputedStyle, so the values and ratios are those of the mode that is active. Use
the theme control in the header to see the other mode. Contrast is measured on
--ds-surface: 4.5:1 AA for the three text colours, and the 3:1 floor for the focus
ring, which is a non-text cue.
| Token | Value | Contrast on the surface |
|---|