Link

An inline text link. Since ADR 0034 the appearance is not this component's — it is the base layer's :where(a[href]) element default, which every anchor on the site gets, including the ones nobody styled: CMS rich text, the accessibility statement, whatever an editor writes next. The primitive is the seam, so a block imports Link instead of hand-writing an <a> and inventing a treatment for it.

The hover is the swell: underlined at rest always, because the underline is the non-colour cue, so hover moves it rather than supplying it. It thickens and drops away from the baseline while the text deepens to--text-strong, over --duration-fast. Because it animates the decoration itself and not a pseudo-element, it survives a line wrap — see the second example.

A component opts out by declaring its own text-decoration: an Astro scoped style is unlayered and beats the base layer whatever the specificity. The header nav, the skip link and every card-as-link already do. Chrome opts out; prose does not.

A link-styled affordance stays this primitive's job — Button has no third "link" variant. Re-tone the previews: the link reads the semantic text tokens, so it follows the surface it lands on.

In running text

Across a line wrap

Both line boxes swell together. An underline built from a background gradient, which is the usual way to animate one, would restart per line here.

An anchor nobody styled

A raw <a>, no component, no class. This is what the CMS will emit, and before ADR 0034 it was browser blue on a yellow-50 page.