Legal Text
Last updated: October 8, 2015 at 20:36 pm

Approved presentation of "fine print" that is legally required for your site or service.


Visual example of the element:


What problem does this element or pattern solve?
Although legal text could also logically appear in the “Displayed Content” section, I opted to place it here due to its unique nature , the inflexible rules that often surround it, and the need for your framework users to locate this information quickly. It is very important to clearly define the business and presentation rules for all legal text so that designers and QA teams always know precisely how and where to place it.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web, Desktop App, Tablet App, Smartphone App

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Will most of your full or multi-page legal text be displayed in a modal or on a separate page? Or will it be split? Modals will keep the user on their current page, and may work best if the user must agree before they are permitted to continue. Stand alone pages may work best if the same terms need to be accessed from many locations or printed.
  • Depending up on the use case and regulatory requirements for your industry, legal text might be displayed directly on the page, within a modal, within an accordion or other show-hide interaction. Define the rules and visual styling for all possible options.
  • Because the actual legal copy can change quickly, you should always provide reference links to your legal department’s most current approved text.


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:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
fine print, terms of service, terms & conditions, disclaimer, legalese
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



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