Link

CI export — body links use --ci-color-text-link (#155dfc), distinct from slate primary buttons.

In Nuxt / PLAI use Tailwind text-plai-text-link, the plai-text-link class, or scoped link styles — not ci-link markup.

Element	Source
Link colour	CI --ci-color-text-link → --color-plai-text-link
Hover colour	PLAI --plai-link-hover in theme.css
Focus ring	CI link blue
Muted meta links	Nuxt UI --ci-color-text-muted (docs reference)

Live examples

Read the design tokens overview before integrating the preset.

Body link CI

Last updated · Getting started

Muted meta link Nuxt UI muted · CI link hue

HTML

<a href="/reference/tokens/" class="ci-link">Design tokens overview</a>
<a href="/guides/getting-started/" class="ci-link ci-link--muted">Getting started</a>

External links should indicate they open a new context when appropriate:

<a href="https://anwalt.de" class="ci-link" target="_blank" rel="noopener noreferrer">
  anwalt.de
  <span class="sr-only">(opens in new tab)</span>
</a>

Accessibility

• Link text must describe the destination (“Design tokens overview”, not “click here”).
• :focus-visible ring for keyboard users.
• Underline + colour change on hover — two distinguishable cues.
• Muted variant (.ci-link--muted) for secondary meta links; still underlined for recognition.

In PLAI

Use Tailwind text-plai-text-link or class="plai-text-link" — colour from --color-plai-text-link (alias to CI --ci-color-text-link).