All studies

Navigation

Ink link

An inline link whose hairline underline springs up into a full highlight while the text inverts, on every line the link wraps across.

24 / 74

Where it earns its place

Links inside long-form copy, where they must be quiet at rest and unmistakable on intent: case studies, articles, documentation.

What we changed

  • Rebuilt the fill as a cloned inline background instead of an absolutely positioned bar, so links can wrap inside running copy and fill on each line. The original was inline-block and could not wrap.
  • Text inverts only once the fill passes the x-height, so there is never dark text on a thin line.
  • Keyboard focus fills the link exactly like hover, with a visible focus ring; reduced motion switches instantly.
  • Kept the core idea: the underline you see at rest is the thing that grows, on one stiff spring, from the baseline up.