Skip to content

Design System

The purpose of the design system is to help create rapid and consistent front end UIs for the main app. This system uses a combination of standard and customized Material UI components. The design system repo is in Figma and will be viewable in Storybook using the Figma links.

Demo City Setup

Engineers please use the below colors and logo in you local city setup. This will help us in QA to clearly identify elements that are primary or secondary colors and show a more consistant product when demoing to clients and in the sprint update videos.

Genrerl UX Rules of the thumb

Buttons

Button Color Strategy:

  • If it clicks or taps, it’s the primary color.
  • Primary color is only used for interactive elements like buttons, icon buttons or text links.
  • Secondary color is used for hover states and non-interactive elements like section dividers, color bars, chips, other decorative elements.
  • By using the colors this way, the user will know at-a-glance what is clickable and move the interface towards being intuitive.

Button Type — Primary Button

Usually used to help the user know what they need to do to complete the primary purpose of the page, modal or form.

Usage example:

  • Call to Action (CAT) - Sign up now or Go to Task
  • Next in a widget
  • Save in edit mode
  • Submit in a form
  • Record Payment on payments page

Elements used for this button type:

  • Contained (solid filled)
  • Floating Action Button (FAB)

Button Type — Secondary Button

Usually used for the alternative to the primary button when the user is trying to complete the primary purpose of the page, modal or form.

Usage examples:

  • Edit
  • Cancel in a form or modal
  • Back in a widget
  • Export Data on payments page

Elements used for this button type:

  • Outline (ghost)
  • Icon buttons

Button Type — Tertiary Buttons

Usually used for miscellaneous actions. Something that is useful for the user to be able to do but not necessary to complete the primary purpose of the page, modal or form.

Usage examples:

  • Additional actions on cards
  • Additional actions for a page

Elements used for this button type:

  • Kabab with menu
  • Text link
  • Speed Dial

Button Combinations

  • If 2 buttons are in line. Primary goes on the right and secondary on the left.
  • If more than 2 buttons in line, then please submit the page, modal or section for UX review.
  • If an input or selector has a button, then the element goes on the left and button goes on the right.

Grid

Figma link : Grids

XL (Extra Large) for screens 1536 and above

  • Columns: 12
  • Gutter: 32px
  • Side margins: 88px (includes the 56px for the collasped left navigation bar icons with a 32px gutter)

LG (Large)for screens 1535-1200

  • Columns: 12
  • Gutter: 24px
  • Side margins: 88px (includes the 56px for the collasped left navigation bar icons with a 32px gutter)

MD (Medium) for screens 1199-900

  • Columns: 6
  • Gutter: 24px
  • Side margins: 72px (includes the 56px for the collasped left navigation bar icons with a 16px gutter)

SM (Small) for screens 899-600

  • Columns: 4
  • Gutter: 24px
  • Side margins: 56px (left menu collapsed into hamburger with 24px icon and 16px margins on right and left)

XS (Extra Small) for screens 599-0

  • Columns: 2
  • Gutter: 24px
  • Side margins: 40px (left menu collapsed into hamburger with 24px icon and 16px margin on left)

Colors

Figma link : Colors

Colors usuage values for MUI components:

  • 100 = Branded color
  • 80 = visually 80% of branded color
  • 60 = visually 60% of branded color
  • 120 = alt dark
  • Button hover = color used for buttons on hover state
  • Button Outline Link = color used for secondary buttons (outline variant) resting state
  • Button Outline hover = color used for secondary buttons (outline variant) active state

Alert Colors

  • Sucess: #67b388
  • Warning: #f3d158
  • Error: #d15249
  • info: #598ec1

If a hover state is required for these colors:

  • Sucess hover: #a84f22
  • Warning hover: #a98b1f
  • Error hover: #8a1b13
  • info hover: #20507d

Typography

Figma link : Typography

  • Font: Roboto
  • Styles, sizing and spacing are in the Figma link

Buttons

Primary Button

Figma link : Primary Buttons

  • Variant: Contained
  • Color: Primary
  • Size Props: Medium for most usage
  • Usage: For the primary action like save on a form
  • MUI Reference: Buttons

Secondary Button

Figma link : Secondary Button

  • Variant: Outlined
  • Color: Primary
  • Size Props: Medium for most usage
  • Usage: For the secodnary action like cancel on a form
  • MUI Reference: Buttons

Icon Button

Figma link : Icon Button

  • Font: Material icons
  • Theme: Filled
  • Padding: Medium
  • Size: Small, Medium and Large usages
  • MUI Reference: Icons

Split Button

Figma link : Split Button

  • Variant: Outlined
  • Color: Primary
  • Size Props: Medium for most usage
  • Usage: When a button has a list of options like on the Tasks page for Quick Links
  • MUI Reference: Split Button

Page Titles

All pages should have a page title.

Figma link : Page Titles

  • H4 in text color.
  • If a link, then it should be in the primary color like all links.
  • Location is 16px below the breadcrumbs (see next section and figma link for more details).

REQUIRED for most pages. If page has a parent it must have a breadcrumb.

Figma link : Breadcrumbs

  • 16px space between top nav and breadcrumbs
  • Margin left from left gutter for Grid / xl (above 1536px) = 32px
  • Margin left from left gutter for Grid / lg (1535-1200px) = 32px
  • Margin left from left gutter for Grid / md (1199-900) = 24px
  • Margin left from left gutter for Grid / sm (899-600) = 0px
  • Margin left from left gutter for Grid / sm (899-600) = 0px
  • MUI Reference: Breadcrumbs

FAB (floating action button)

Figma link : FAB

  • Variant: Round
  • Color: Primary
  • 32px space between top nav and FAB
  • For spacing and placement see the Figma link
  • FAB size for Grid / xl (above 1536px) = Large
  • FAB size for Grid / lg (1535-1200px) = Large
  • FAB size for Grid / md (1199-900) = Medium
  • FAB size for Grid / sm (899-600) = Small
  • FAB size for for Grid / sm (899-600) = Small
  • MUI Reference: FAB

Speed Dial

Figma link : Speed Dial

  • Usage: For when a page has more than one action for the page
  • Position: Upper right
  • Tooltip color: Text grey
  • FAB: color: Primary and Variant: Round (See FAB section for more details)
  • 32px space between top nav and FAB
  • FAB size for Grid / xl (above 1536px) = Large
  • FAB size for Grid / lg (1535-1200px) = Large
  • FAB size for Grid / md (1199-900) = Medium
  • FAB size for Grid / sm (899-600) = Small
  • FAB size for for Grid / sm (899-600) = Small
  • MUI Reference: Speed Dial

PageWrapper

Link : Link

  • Usage: All new page or screen added should be wrapped with the PageWrapper component
  • pageTitle prop: Title for the page
  • oneCol prop: For single column page
  • showAvatar prop: if set to true, it will show the avatar
  • breadCrumbObj: if passed will set breadcrumb for the page
  • avatarObj: if passed will add user avatar, name and role to the page
  • rightPanelObj: if passed will add the rightPanelObj components to the top right side of the page
  • hideWrapper: if set to true it will render just the children component with a div around it

Snackbar

Link : Link

  • Usage: Message alert within the app will be triggered through a centralised snackbar. The snackbar exposes a single api through which this is achieved. Currently it exposes two items namely:
  • messageType: object => { error: 'error', success: 'success', warn: 'warning' }
  • showSnackbar: method

    • args: {object}
    • type: String
    • message: String
    • style: Object (optional)
  • Example: To use the snackbar invoke the showSnackbar method and pass down arguments as object. Example Link.

  • Jest Tests: Wrap test components within the <MockedSnackbarProvider> for related test files. Example Test