Skip to main content

Visual Design

Work In Progress
This page is a work in progress, accuracy of the content is not guaranteed and is subject to change at any time.

Consistent and intuitive visual design will improve the user's experience by enabling them to build familiarity with the placement and appearance of text, buttons and other elements.

Sizing​

Dimensions scale as necessary depending on the contents of the modal body:

  • Small modals occupy 60% of the viewport and are designed for brief messages
  • Medium (default) modals occupy 70% and are intended for most tasks
  • Large modals occupy at most 90% and are designed for detailed forms

Each modal size has both a minimum and maximum width. Once maximum height has been reached, the content area begins to scroll.

  • Both the header and the footer are always visible, even when scrolling occurs
  • Where a modal is intended to convey progress, its header contents should begin with a verb
  • The contents of the header and the primary action's label are consistent with one another
    • e.g. if the header title is Add to Hotlist, the primary action button should be labelled Add

  • The Brand button (variant=”brand”) should be used at most once per modal, at any one time, for the primary action (e.g. Save) on the right side of the footer

  • The Neutral button (variant=”neutral”) should be used for secondary actions (e.g. Cancel) and exists immediately to the left of the primary action button

  • The Destructive button (variant=”destructive”) should be used for destructive actions (e.g. Remove)

    • It should exist on the left side of the footer if any Brand and Neutral buttons already exist
    • If there is no secondary action, the Destructive button should go immediately to the left of the Brand button
    • If the destructive action is the primary action, its button should exist on the right side of the footer

  • Where a modal requires navigation, the actionable buttons in its footer live on the left and right, rather than all on the right

    • i.e. Back on the left, Next on the right

  • Buttons should be disabled when the modal is loading or saving, but not at any other time

Content body​

  • Where the primary action is a destructive action, the text inside the body should be centre-aligned
info

Use sufficient white space for padding between modal sections (header, content, footer). This ensures modals are not cluttered and are easy to navigate.