Usage

Links are controlled by a small set of state tokens. Start with:

--link-color, --link-color-visited, and --link-color-hover for state colors

--link-decoration and --link-decoration-hover for underline behavior

--link-focus-ring-* tokens to align focus styling with your theme

--link-transition-duration for interaction timing

These tokens inherit semantic color and focus-ring defaults, so overriding them preserves dark-mode variants automatically.

Tokens

Link Color Tokens

Control the visual appearance of links in different states. These tokens automatically inherit dark mode behavior from semantic tokens.

Token	Description	Default Value
`--link-color`	Default link color	`var(--color-accent)`
`--link-color-dark`	Default link color in dark mode	`var(--color-accent-dark)`
`--link-color-visited`	Color for visited links	`var(--color-purple-700)`
`--link-color-visited-dark`	Visited link color in dark mode	`var(--color-purple-400)`
`--link-color-hover`	Color when hovering or focused	`var(--color-blue-700)`
`--link-color-hover-dark`	Hover/focus color in dark mode	`var(--color-blue-300)`

Link Decoration Tokens

Control underline visibility and behavior across different link states.

Token	Description	Default Value
`--link-decoration`	Default text decoration (underline visibility)	`none`
`--link-decoration-hover`	Text decoration on hover/focus	`underline`

Link Interaction Tokens

Control transitions and focus ring styling for enhanced user experience.

Token	Description	Default Value
`--link-transition-duration`	Duration of color transitions	`var(--transition-duration-base)`
`--link-focus-ring-width`	Focus ring outline width	`var(--focus-ring-width)`
`--link-focus-ring-color`	Focus ring outline color	`var(--focus-ring-color)`
`--link-focus-ring-offset`	Focus ring offset from link	`var(--focus-ring-offset)`
`--link-focus-border-radius`	Focus ring border radius	`var(--radius-xs)`

Examples

Default Links

Clean, modern link styling with hover underlines:

:root {
  /* No design token overrides */
}

This is a paragraph with a default link that shows underline on hover. Links maintain clean appearance while providing clear interaction feedback.

Always Underlined Links

Traditional web styling with persistent underlines:

:root {
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --link-color: var(--color-blue-700);
}

Traditional underlined links maintain the classic web convention where all links are visually distinct through persistent underlines, making them immediately identifiable as clickable elements.

Subtle Links

Reduced contrast for secondary content areas:

:root {
  --link-color: var(--color-gray-600);
  --link-color-hover: var(--color-gray-900);
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-transition-duration: var(--transition-duration-slow);
}

For sidebars, footnotes, or secondary content, subtle links use muted colors that don't compete with primary content while still providing clear interaction feedback through slower, more deliberate transitions.

High Contrast Links

Bold, accessible styling for maximum visibility:

:root {
  --link-color: var(--color-blue-800);
  --link-color-visited: var(--color-purple-800);
  --link-color-hover: var(--color-blue-900);
  --link-decoration: underline;
  --link-decoration-hover: underline;
}

For accessibility-focused designs, high-contrast links use strong colors and persistent underlines to ensure maximum visibility. Previously visited links show distinct purple coloring to help users track their navigation history.

Tips

State colors: Set --link-color, --link-color-visited, and --link-color-hover for predictable state changes without per-link CSS.

Decoration: Use --link-decoration and --link-decoration-hover to control underlines across all link states.

Focus ring: Align link focus styling with the global focus system via --link-focus-ring-*.

Global accent: Override --color-accent to shift the default link color everywhere, then fine-tune with specific --link-* tokens.