Link Variants
Primary Link - Default State
Main navigation links with Genentech blue styling across all sizes
Primary Link - Hover State
Hover state shows darker blue color with underline
Primary Link - Disabled State
Disabled links are not interactive and have muted styling
Secondary Link - Default State
Supporting navigation links with gray text that changes to blue on interaction
Secondary Link - Hover State
Hover state changes color from gray to blue with underline
Secondary Link - Disabled State
Disabled secondary links maintain consistent disabled styling
Link Sizes
Large Size (lg)
20px font size, 32px line height - for page headings and primary navigation
Medium Size (md) - Default
16px font size, 24px line height - for body text and standard navigation
Small Size (sm)
14px font size, 20px line height - for captions and compact UI elements
Link Types
External Links
External links open in new tabs with security attributes
Email and Phone Links
Email and phone links trigger system applications
Links with Icons
Icons on the Right
Icons positioned after text for directional navigation
Real-World Examples
Breadcrumb Navigation
Hierarchical navigation with secondary links for parents, primary for current
Footer Links
Small secondary links for footer navigation and legal pages
Call-to-Action Links
Primary large links for main actions, secondary for supporting information
Inline Content Links
For more information about our research, visit the research section or check out our latest publications.
Links within text content using primary variant for visibility