Distinct elements

The basic structure of elements available to designers and developers to create a web page or screen are base HTML or native app components. They are all equipped with visual characteristics and qualities by default. Our custom designs, copy, and code need to make the function of an element is obvious in comparison to other elements on the page or screen.  


Element examples

Element examples

Each element and their states have distinct looks that makes it obvious to know what they are at a glance:

  • Unordered lists
  • Ordered lists
  • Links
  • Buttons
  • Tables
  • Headers 
  • And more

These are the tools HTML5 and our native UI SDKs provide in our creative toolboxes.

Anything outside of our native toolboxes, like date pickers, layer many of these base components on top of each other.

As we customize or create beautiful designs to make our experience more visually appealing, we must retain certain visual affordances and signifiers to be sure a customer can figure out what the element is meant to do based on its design.

Each element and their states have distinct looks that makes it obvious to know what they are at a glance:

  • Unordered lists
  • Ordered lists
  • Links
  • Buttons
  • Tables
  • Headers 
  • And more

These are the tools HTML5 and our native UI SDKs provide in our creative toolboxes.

Anything outside of our native toolboxes, like date pickers, layer many of these base components on top of each other.

As we customize or create beautiful designs to make our experience more visually appealing, we must retain certain visual affordances and signifiers to be sure a customer can figure out what the element is meant to do based on its design.


Designing element type

Designing element type

For any visual design of an element match the semantic content structure and functionality with the visual design. 

For example (non-exhaustive):

  • Headings should be able to be put into grayscale and still all be easily discernible as different heading sizes
  • Unordered list to be obvious they are lists, enough so that a developer should know to code them as lists without instruction
  • Data tables and flexbox tables have different content requirements and different user experiences requirements of the content. For data tables, design the tables visually to support the functional requirement to be able to track horizontally in the table, or vertically in the table
  • A link or button should have a visual indicator to show it differs from paragraph content

Distinctive visual design and Semantic Structure Content work together to help people understand the function of the content, and how we are meant to engage with it.

Review the Structured content guide for more information.

For any visual design of an element match the semantic content structure and functionality with the visual design. 

For example (non-exhaustive):

  • Headings should be able to be put into grayscale and still all be easily discernible as different heading sizes
  • Unordered list to be obvious they are lists, enough so that a developer should know to code them as lists without instruction
  • Data tables and flexbox tables have different content requirements and different user experiences requirements of the content. For data tables, design the tables visually to support the functional requirement to be able to track horizontally in the table, or vertically in the table
  • A link or button should have a visual indicator to show it differs from paragraph content

Distinctive visual design and Semantic Structure Content work together to help people understand the function of the content, and how we are meant to engage with it.

Review the Structured content guide for more information.


Element identifiers

Element identifiers

Distinctive elements are also easily discernible from one another. We use visual treatments like colour, stroke weight, shapes, underlines, to make sure paragraph content looks different from link content. Different states should be distinctly obvious they are not the same.

A few guidelines to improve visual distinction between elements include:

  • Use shapes to make elements and states different, like a chevron, outlines, underlines 
  • If colour alone is used to denote distinction provide a 3:1 colour ratio from the base colour to the differing state

For example, a custom selected state to show which colour phone our customer would like to select will need to have a 3:1 ratio from the unselected state to be discernible

Review Colour contrast guide for how to do a colour contrast check.

Review the Communicating current states to learn more about states.

Distinctive elements are also easily discernible from one another. We use visual treatments like colour, stroke weight, shapes, underlines, to make sure paragraph content looks different from link content. Different states should be distinctly obvious they are not the same.

A few guidelines to improve visual distinction between elements include:

  • Use shapes to make elements and states different, like a chevron, outlines, underlines 
  • If colour alone is used to denote distinction provide a 3:1 colour ratio from the base colour to the differing state

For example, a custom selected state to show which colour phone our customer would like to select will need to have a 3:1 ratio from the unselected state to be discernible

Review Colour contrast guide for how to do a colour contrast check.

Review the Communicating current states to learn more about states.


Explore more

Explore more