Text Links
Last updated: September 10, 2015 at 21:02 pm

The format and colors for all text links. Shows default treatment, plus hover, active and visited states. Should also show disabled text links.

Visual example of the element:

What problem does this element or pattern solve?
Text links must be obviously clickable page elements. A user needs to always be able to effortlessly identify when a link appears, therefore links must consistently signal clickability to the user.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Your default text link color.
  • Alternative link colors for use against secondary background colors, particularly in areas requiring reversed text (white text on dark backgrounds).
  • Visual changes for all states. Do your links underline on hover only? Change color only? Or do both? Be sure to include mobile specs where there is no hover state.
  • Define a distinctive visual style for disabled text links. This is particularly important if your website or application uses gray in your primary palette.
  • Is hyphenation within a text link allowed?
  • If possible, address content strategy and SEO concerns: Are text links permitted to be non-specific calls to action such as “click here” or “learn more”? Or should they always be descriptive?
  • Do your links distinguish between targets? In other words, are anchor text links (which link to content on the same page) styled differently than off-page text links?

Sample Content

  • Link Color: YourCompany Blue
  • Link On Hover: YourCompany Light Blue, Underline
  • Active Link: YourCompany Dark Blue, Underline
  • Visited Link: YourCompany Purple

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Best practices indicate that text links should move a user to different content areas, but not used to trigger interactions. In those instances, use a button or another visual affordance.

This element or pattern may also be known as:
links, inline links, hyperlinks
Related elements within this Style Framework:

Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions

Leave a Reply