Link

Atom

Inline text hyperlink. Mirrors Figma node 140-7864 (light) + 5940-2868 (dark) 1:1. Three colour variants — Default (neutral black / white), Brand (`#9B8B5D` tan), Blue (`#3156DF` / `#4675EB`) — each with its own hover colour. Disabled is shared across variants (one --link-disabled-text token). Four sizes step through Body 1 (16/24) · Body 3 (14/20) · Caption 1 (12/16) · Caption 2 (10/12), all Semi Bold. Inline-flex layout means the link works equally well as a standalone Text Title or wrapped around an icon + label.

When to use

✅ Do
  • Use for navigation — linking to another page, section, or external resource
  • Use descriptive link text that makes sense out of context ("View case details", not "click here")
  • Use .link-underline when the link must always be visually distinct from surrounding text
  • Use Blue variant for standard hyperlinks within body text
❌ Don't
  • Use for actions that change state — use a Button (Ghost or Tertiary) instead
  • Use vague link text like "here", "click here", or "read more"
  • Use Link for submitting forms — use a Button
  • Use the disabled HTML attribute — use pointer-events:none + aria-disabled instead

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Link is an inline-flex anchor element with an optional leading icon. Underline shows on hover by default.

View document
  1. 1Anchor — .link. Inline-flex element. Add colour + size modifier.
  2. 2Colour variant — .link-default / .link-blue / .link-brand.
  3. 3Size — .link-xl / .link-lg / .link-md (default) / .link-sm.
  4. 4Icon — .link-icon. Optional leading icon, scales with size.
  5. 5Underline — Shown on hover. .link-underline forces it always visible.

Default

A bare .link on an <a> — neutral Default colour, Body 1 Semi Bold, no underline at rest. Hover swaps to --link-hover-text and adds an underline.

Title

Variants

Three colour modifiers. The base .link is the neutral Default; add .link-brand for the tan accent or .link-blue for the system blue. Each variant ships its own hover colour — Brand stays at the resting tan in light (no hover shift) and lifts to a brighter tan in dark; Blue and Default both step to a deeper / lighter shade on hover.

Default
Hover
Disabled
Default
Title Title Title
Brand
Title Title Title
Blue
Title Title Title

Sizes

Four size modifiers map 1:1 to Figma's text-style names. Default (no class) is Body 1 (16/24); .link-sm is Body 3 (14/20); .link-xs is Caption 1 (12/16); .link-xxs is Caption 2 (10/12). All sizes ship at Semi Bold so the link reads as an interactive element regardless of typography weight.

Title — Body 1 (16/24) Title — Body 3 (14/20) Title — Caption 1 (12/16) Title — Caption 2 (10/12)

States

Three states. Default renders the variant's colour, no underline. Hover swaps to the matching -hover token and adds an underline (use .is-hover in static demos to force this; :hover handles it live). Disabled drops to --link-disabled-text and removes the underline (set aria-disabled="true" or class .is-disabled; use the native disabled attribute when the link sits on a <button>). Add .link-underline to pin the underline at rest — useful when the link is the only interactive on the surface.

Default — hover me to see the live state Hover (forced via .is-hover) Underline pinned at rest Disabled

With icons

Wrap an inline SVG in .link-icon to add a leading or trailing affordance. Icon size auto-scales per .link-{size}: 16 px on default, 14 / 12 / 10 px on sm / xs / xxs. The icon inherits currentColor, so it flips through every variant + state automatically.

Title Title Title Title

Full matrix

3 variants × 4 sizes × 3 states. Toggle the theme switch in the global header to see every cell under dark tokens — Default text flips white, Default-hover lifts to #D1D1D1, Brand-hover steps from `#9B8B5D` (no change in light) to `#BAB28A` (brighter tan in dark), Blue steps to `#4675EB` resting / `#6999F1` hover.

Accessibility

Attribute / BehaviourValueNotes
Element<a href="...">Always use a real <a> with a valid href — never a <button> styled as a link for navigation
Descriptive textMeaningful labelLink text must make sense out of context. Screen reader users often navigate by link text alone.
External linkstarget="_blank" + rel="noopener"Warn users when a link opens in a new tab — add aria-label="...(opens in new tab)"
Disabled statearia-disabled="true" + tabindex="-1"Remove from tab order and block clicks without using the HTML disabled attribute (which doesn't work on <a>)
KeyboardEnterActivates the link when focused

API

Class / attrOnDescription
.link<a> (or <button>)Base. Inline-flex, Body 1 (16/24) Semi Bold, neutral Default colour, no underline. Hover adds underline + swaps to --link-hover-text. Use <a href> for navigation, <button> for in-page actions styled as links.
.link-brand.linkBrand (tan) variant. Resting + hover both at #9B8B5D in light; dark mode lifts hover to #BAB28A.
.link-blue.linkBlue variant. #3156DF / #4675EB resting; #2739A6 / #6999F1 hover (light / dark).
.link-sm.linkSmall. Body 3 (14/20) Semi Bold. Icon scales to 14 × 14.
.link-xs.linkExtra small. Caption 1 (12/16) Semi Bold. Icon scales to 12 × 12.
.link-xxs.linkSmallest. Caption 2 (10/12) Semi Bold. Icon scales to 10 × 10.
.link-underline.linkPin the underline at rest (no hover required). Use when the link is the only interactive on its surface — saves users a hover-to-confirm beat.
.link-icon<span> inside .linkWrap an inline SVG to add a leading or trailing icon. Icon inherits currentColor + scales per parent .link-{size}.
.is-disabled / disabled / aria-disabled="true".linkDisabled state — drops to --link-disabled-text (`#5D5D5D` / `#E7E7E7`), removes underline, cursor: not-allowed. Use the native disabled attribute on a <button>; on an <a> use aria-disabled="true" (or .is-disabled for static demos).
.is-hover.linkDocumentation helper — forces the hover visual at rest for the matrix. :hover handles the live state.
--link-{variant}-text / -hoverTokenPer-variant colours. --link-default-text + --link-hover-text; --link-brand-text + --link-brand-hover; --link-blue-text + --link-blue-hover.
--link-disabled-textTokenShared disabled colour across all variants.