The type system

Use typography to present your design and content as clearly and efficiently as possible.

Type scale

The type scale includes a range of contrasting styles that support the needs of your product and its content.

The type scale is a combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

Headline 1

 Font Weight Size Letter spacing Default color
Arial 500 2.375rem / 36px 0 #58595B

Headline 2

 Font Weight Size Letter spacing Default color
Arial 500 1.875rem / 30px 0 #58595B

Headline 3

 Font Weight Size Letter spacing Default color
Arial 500 1.165rem / 26px 0 #58595B

Headline 4

 Font Weight Size Letter spacing Default color
Arial 400 1.375rem / 22px 0 #58595B
Headline 5
 Font Weight Size Letter spacing Default color
Arial 400 1.125rem / 18px 0 #58595B
Headline 6
 Font Weight Size Letter spacing Default color
Arial 400 0.875rem / 14px 0 #58595B

Type scape example:

This example type scale uses the Arial typeface for all headlines, subtitles, body, and captions, creating a cohesive typography experience. Hierarchy is communicated through differences in font weight (Light, Medium, Regular), size, letter spacing, and case.

Display type scale

Traditional heading elements are designed to work best in the meat of our page content. But sometimes we need a larger, slightly more opinionated heading style. Then we consider using the display heading.

Display 1
 Font Weight Size Letter spacing
Arial 300 5rem / 36px 0
Display 2
 Font Weight Size Letter spacing
Arial 300 4.5rem / 30px 0
Display 3
 Font Weight Size Letter spacing
Arial 300 4rem / 26px 0
Display 4
 Font Weight Size Letter spacing
Arial 300 3.5rem / 22px 0

Font size units:

The following units are used to express font size on the web.

Font size [px] Font size [rem]
10px 0.625rem
12px 0.75rem
14px 0.875rem
16px 1rem
18px 1.125rem
20px 1.25rem
22px 1.375rem
24px 1.5rem
26px 1.625rem
28px 1.75rem
30px 1.875rem
32px 2rem
34px 2.125
36px 2.25
38px 2.375
40px 2.5rem
42px 2.625rem
44px 2.75rem
46px 2.875rem
48px 3rem
50px 3.125rem
52px 3.25rem
54px 3.375rem
56px 3.5rem
58px 3.625rem
60px 3.75rem
62px 3.875rem
64px 4rem
66px 4.125rem
68px 4.25rem
72px 4.5rem

Sizing: px vs em vs rem

When building accessible websites, we need to consider inclusion. When we use px, we don't put user preferences at the forefront. When the user zooms in or change the browser font setting, websites need to adjust to fit the user's setting. px do not scale but em and rem scales.

Sequel to this, setting the font size of the html element in percentage is recommended. Assuming the browser font size is set to 14px (i.e. the default), setting the font size of the html (root) element to 62.5% will default 0.875rem to 10px.

The Difference

Pixel (px) is a commonly used CSS unit on websites. px is not scalable, it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting.

Element (em) and Root element (rem) are responsive units interpreted into equivalent px unit by the browser. They are relative units. Change in the value of the parent or root element affects the value of relative units. They scale with the device. The computed pixel value of em unit is relative to the font size of the element being styled. This is also affected by inherited values from the parent elements unless it is explicitly overridden by a px unit which is not subject to inheritance.

The color system

The Material Design color system can help you create a color theme that reflects your brand or style.

Usages and palettes

The color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand. Dark and light variants of each color can then be applied to your UI in different ways.

Theming

Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.

Primary Color Shade - Hex Color: #0054a6
Value 50 100 200 300 400 Primary 600 700 800 900
Hex Color #E6EEF6 #ccdded #99bbdb #6698ca #3376b8 #0054a6 #003f7d #002a53 #001529 #000811
Color #58595b #58595b #58595b #58595b #58595b #ffffff #ffffff #ffffff #ffffff #ffffff
Secondary Color Shade - Hex Color: #58595b
Value 50 100 200 300 400 500 600 700 800 900
Hex Color #EEEEEF #dedede #bcbdbd #9b9b9d #797a7c #58595b #424344 #2c2d2e #161617 #000000
Color #58595b #58595b #58595b #58595b #58595b #ffffff #ffffff #ffffff #ffffff #ffffff

Headers

Headers are compositions that extend standard navbar functionalities. They contain additional components like sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.

Navigation bar

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

      1. Header container -
      • Background color: #0054a6
        • Primary: #0054a6
        • Light: #bcbec0
        • Brand Gradient: #00aeef & #0054a6
      • Border radius: 0
      • Height: 56px
      2. Logo
      • Height: 32px
      • Width: Auto
      3. Navigation items
      • Font size: 14px
      • Color: #58595b
      4. Padding
      • Left & right padding: .5rem / 8px
      • Top & bottom padding: 1rem / 16px
      5. User icon
      6. Dropdown menu icon

The width of the dropdown menu should be according to the size of the menu item. And the required tabbing should have Padding Top and Bottom as 0.5rem or 8px and the Padding Right and Left as 1rem or 16px which ever is applicable.

      1. Heigh and width of dropdown menu
      • Height and width will adust with the dropdown items
      2. Dropdown items padding
      • Left & right padding: .5rem / 8px
      • Top & bottom padding: 1rem / 16px

Text fields

Text fields let users enter and edit text. Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Types

Text fields come in two types:

  • Filled text fields

Both types of text fields use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.

Filled text fields

Both types of text fields provide the same functionality, so the type of text field you use can depend on style alone.

Anatomy - Filled text field

Filled text field
      1. Input container -
      • Border color: #bdbdbd
      • Border radius: 2px
      2. Input text
      • Font size: 14px
      • Color: #bcbec0
      3. Label text
      • Font size: 14px
      • Color: #58595b
      4. Padding
      • Left & right padding: .75rem
      • Top & bottom padding: .45rem
Filled text field - focus
      1. Input container focus -
      • Border color: #0054a6
      2. Input label text -
      • Font size: 10px
      • Color: #58595b

Buttons

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Usage

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Dialogs
  • Modal Windows
  • Forms
  • Cards
  • Toolbars
When to use?

Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

When not to use?

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.

Types of button

  • Contained button (High emphasis)
  • Outlined button (Medium emphasis)
  • Text button (Low emphasis)
  • Toggle button

Any software or application can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium-emphasis and low-emphasis buttons that perform less important actions. When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.

A button’s level of emphasis helps determine its appearance, typography, and placement.

Contained button

Contained buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to the application. For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel). This high-emphasis button commands the most attention.

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy.

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only group together calls to action that have a relationship to one another.

Do use high-emphasis and medium-emphasis buttons in a button group.

Do not use two high-emphasis buttons in a button group.

Anatomy

      1. Primary button container -
      • Background color: #0054a6
        • Font color: #FFFFFF
      2. Border radius
      • Border radius: 0
      1. Buttons padding -
      • Padding top and Padding bottom: 0.5rem
      • Padding left and Padding right: 1rem
      2. Buttons font size
      • Font size: default font size of root
      1. Primary buttons hover -
      • Background color: #003f7d
      2. Buttons font size
      • Font size: default font size of root
      • Font color: #FFFFFF

Outlined button

Outlined buttons are medium-emphasis button. These are used for more emphasis than text buttons due to the stroke. For less prominent, and sometimes independent, actions. Outlined buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Outlined buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.

The outline button style removes all background images or colors from a button and gives it a lighter look.

The outline style buttons can be used for various purposes, for example:

  • Indicating the secondary action complementing the primary action.
  • If you have many buttons then it may help in reducing the “noise”
Anatomy
      1. Primary outline container -
      • Container border color: #0054a6
      2. Outline buttons font size
      • Font size: default font size of root
      • Font color: #0054a6
      1. Primary outline container -
      • Container border color: #0054a6
      2. Outline buttons padding
      • Padding top and Padding bottom: 0.5rem
      • Padding left and Padding right: 1rem
      1. Primary outline hover container -
      • Background color: #0054a6
      2. Outline buttons hover font -
      • Font size: default font size of root
      • Font color: #FFFFFF

Text button

Text buttons are typically used for less important actions. This tpe of buttons should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

Text buttons or links should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

Text buttons hurt mobile usability

The usability standards for buttons are higher for mobile apps than desktop apps. With a smaller screen and finger navigation, mobile buttons must be easy to tap, read, and recognize. Most solid buttons meet this standard, but text buttons rarely do. Before you use text buttons on your app, here’s what you should know.

A finger is larger than a mouse cursor. Placing it over a smaller target feels awkward for users. Their finger covers the button’s text with no visual cue to confirm if the action registered.

Anatomy
      1. Text button -
      • Font color: #0054a6
      1. Text buttons container.
      2. Text button padding -
      • Padding top and Padding bottom: 0.5rem
      • Padding left and Padding right: 1rem
      1. Text buttons hover.
      • Font size: default font size of root
      • Font color: #003f7d

Radio buttons

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Usage

Use radio buttons to:

  • Select a single option from a list
  • Expose all available options
When to use radio buttons?

Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

Do use radio buttons when only one item can be selected from a list.

Do not use checkboxes when only one item can be selected from a list. Use radio buttons instead.

Checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. A stand-alone checkbox, or a toggle can be used for a single option that the user can turn on or off.

Usage

Use checkboxes to:

  • Select one or more options from a list
  • Present a list containing sub-selections
  • Turn an item on or off in a desktop environment

When to use checkboxes

Checkboxes should be used instead of switches if multiple options can be selected from a list.

Do: Checkboxes let users select one or more options from a list. A parent checkbox allows for easy selection or deselection of all items.

Do not: If a list consists of multiple options, don't use switches. Instead, use checkboxes. Checkboxes imply the items are related, and take up less visual space.