Link

Inline text links carry the violet accent and an arrow that nudges right on hover, for in-context navigation, not primary actions.

Examples

The link renders live from tokens.css. On dark surfaces, add --light so the link reads against the ink background.

Read the case study →

On a dark surface →

<a href="#" class="text-link">
  Read the case study <span class="text-link-arrow">&rarr;</span>
</a>

<a href="#" class="text-link text-link--light">
  On a dark surface <span class="text-link-arrow">&rarr;</span>
</a>

Usage

Links read as part of the text flow, so reach for them when you want to guide, not command.

Use text links for in-context navigation, never as a primary CTA. When the action is the point, reach for a button instead.
Always include the arrow as <span class="text-link-arrow">→</span>, never a raw > or →, so it animates consistently.
Use --light on dark surfaces so the link stays legible against the ink background.

States

The link rests in violet-700. On hover it drops to opacity: 0.85 and the arrow slides translateX(3px) to the right, giving a quiet nudge toward the destination. Focus is handled by the global focus ring, no per-link override needed.

Code

The styles ship with tokens.css, so no extra stylesheet is needed, just compose the markup.

<a href="#" class="text-link">
  Read the case study <span class="text-link-arrow">&rarr;</span>
</a>

<!-- On a dark surface -->
<a href="#" class="text-link text-link--light">
  On a dark surface <span class="text-link-arrow">&rarr;</span>
</a>