Introduction

...

Typography

Typography is used to communicate information in the most efficient way possible through legibility and visual hierarchy. It's a crucial tool to guide users on their tasks. It should be used in a clear and delightful way.

...

• Use buttons to emphasise a call to action

Accessibility guidelines

• The button text and background colour must meet the minimum contrast requirement.
• If an icon button is used, an accessible label must be provided that indicates the purpose of the control. Avoid using the words “image” or “icon” in the description label.
• If an icon is used alongside the text button, the icon should not provide any text alternative for screen readers. The button’s text will serve as the accessible name, and the icon may be considered redundant or decorative.
• Use an aria-controls prop to add the aria-controls attribute to build the relationship between button and element which is managed by it. Aria-controls runs only with a single ID of an element.
• Use area expands prop to add aria-expands to indicate to screenreaders, that element controlled by button-through aria-controls is expanded or not.
• Use a disabled prop to indicate to users that a button is inactive and they can’t interact with it.
• Use the title to add aria-label when you need to add extra information to screen readers, or there are no children presented to be used as a label.

Cards

Cards are a UI component that display content and actions on a single subject.

...

Icon sizes used based on screen resolutions:

• @1x - 24/24 px
• @2x - 48/48 px
• @3x - 72/72 px

...