ComponentsShipped
Link
Inline links sit in --ink-2 over a 55% tint underline. On hover the text goes to ink and the underline darkens - the words never jump.
I run a daily component lab and keep my resume one click away.
Show code
<p class="prose">I run a <a class="link" href="#">daily component lab</a> and keep my <a class="link" href="#">resume</a> one click away.</p>The underline is a border-bottom struck from --tint with color-mix(), so it stays a tint over any surface. External links that leave the site may add arrow-up-right; internal ones never carry an icon.
Nav links
Navigation links are a separate idiom: ink at 65% opacity, full on hover, 44px tall. See Navigation bar.