Links
Links come in two sub-patterns. Inline links appear within prose and always carry an underline to signal interactivity without relying on color alone. Nav links appear in sidebars, TOC panels, and settings lists — they use no underline, relying instead on positioning and an active-state left border to communicate location.
Token source: tokens/component/link.json
Showcase
Section titled “Showcase”Tinnitus affects how we process sound. Learn about auditory pathways and how perception changes over time. Explore sound therapy options for daily relief. View your session history to track progress.
Inline Links
Section titled “Inline Links”Inline links sit inside flowing text. The underline is non-negotiable: removing it would rely on color alone to distinguish links from body copy, which fails WCAG SC 1.4.1 (Use of Color) and creates confusion for users whose attention is already taxed.
| State | Token | Role |
|---|---|---|
| Default color | component.link.inline.color | Burnt sienna — warm, readable |
| Hover color | component.link.inline.color-hover | Slightly darker sienna |
| Active color | component.link.inline.color-active | Deepest sienna, pressed state |
All three resolve through semantic.color.action.* — they will automatically track any future rebrand of the primary action color.
Nav Links
Section titled “Nav Links”Nav links replicate the TOC pattern used in the WordPress Article Sidebar component. They are designed to be quiet in their default state and unambiguous in their active state.
| Property | Token | Role |
|---|---|---|
| Default color | component.link.nav.color | Secondary text — low visual weight |
| Active color | component.link.nav.color-active | Primary action color — draws the eye |
| Active font weight | component.link.nav.font-weight-active | Semibold (600) — reinforces position without layout shift |
| Indicator width | component.link.nav.indicator-width | 4px left border |
| Indicator color | component.link.nav.indicator-color | Matches active link color |
The left border indicator provides a spatial anchor. Users scanning a long TOC can find their position at a glance without needing to read every item — important for users who find concentrated reading effortful.
Usage Guidelines
Section titled “Usage Guidelines”Inline links: Use in body text, footnotes, and body-level navigation. Always underlined. Avoid using more than two or three per paragraph — dense link text fragments reading flow, which is especially disruptive for anxious users.
Nav links: Use in sidebars, TOC panels, and settings navigation. No underline. Active state is communicated through color and the left border indicator. The nav link pattern is used in the WordPress Article Sidebar TOC.
Accessibility note:
Inline links must never remove the underline in production. The text-decoration: underline is load-bearing for WCAG compliance. Nav links are exempt because they exist in a dedicated navigation region where their role is already established by context.