Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
Link
Links are used for navigation and low-emphasis inline actions. They use the semantic link color token and underline on hover to clearly communicate interactivity.
Default Link
Standard text links for navigation or low-emphasis actions.
Specifications
Padding
0
Font Size
14px
Font Weight
Regular 400
Gap With Icon
6px
Hover Decoration
Underline
Theming
Property
Token
Light
Dark
Text
--link
brand.600
brand.400
Text Disabled
--text-disabled
gray.500
gray.400
Focus Ring
--focus-ring
brand.600
brand.600
Best Practices
Do
Use links for navigation between pages or sections
Use descriptive text that makes sense out of context
Add an external icon when linking to another domain
Use the semantic link color token for consistency
Don't
Don't use links for primary actions — use a button instead
Don't use generic text like "click here" or "read more"
Don't use link color for non-interactive text
Don't open same-domain links in a new tab
Accessibility
Distinguishable Links
Links must be visually distinguishable from surrounding text. The link color token provides sufficient contrast. Underline on hover reinforces interactivity.
Keyboard & Screen Reader
Links are focusable via Tab and activated with Enter. Use descriptive link text — screen readers often list links out of context. External links should indicate they open in a new window.