Style Guide

Modular Components

Control the style of components from one easy place.
Colors
A conveniently prepared palette to easily adjust all colors.
Targeted Primary
Targeted Mid
Targeted Lte
Discovery Prmry
Discovery Mid
Discovery Lte
Dark Blue
Dark Blue Mid
Dark Blue Lte
Accent Green
Green Mid
Green Lte
Accent Yellow
Yellow Mid
Yellow Lte
Gray 0
Gray 1
Gray 2
Gray 3
White
Notice/Info
Success
Warning
Error
Typography
Headings, body and other common text elements.

Display 1

Display 2

Heading One

Large Heading

Heading Two

Medium Heading

Heading Three

Heading Four

Heading Five
Heading Six
Large Text  Large Link 
Body Text  Body Link
Small Text  Small Link
Icons - Interface
Common interface iconography
Icons - Social
Common social network icons
Buttons
Component, text style and size variations
Primary coloured buttons
Used for brand alignment
Form Inputs
Size and state variations for text inputs
Text Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Dark Text Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Areas
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Selectables
Checkboxes and Radios
Checkboxes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radios
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Selects
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Switches
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Badges
Combine with other components to display metadata
Badge
Badge
Badge
Badge
Text Pill
Text Pill
Text Pill
Text Pill
Text Pill
Cards
Structural component for displaying boxed content

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Alerts
Display supplemental information
Ping users with important alerts!
Avatars
Represent portraits of users around the interface.
Utility Classes
Alignment and other combo classes