Visual guideline
Design token
Design tokens set the visual attributes of the design system, such as the colours, fonts and spacing. They are named entities (eg, … or …) that are used instead of hard-coding the corresponding values (eg, hex codes or font sizes) into a component. Using named design tokens rather than hard-coded values makes the design system scalable, consistent and easily adaptable. For example, if a change is made to a brand colour, only the design token corresponding to that colour needs to be updated; everywhere where that design token has been used will then be updated automatically. If design tokens were not used, such a change would involve searching for all instances of changing colour across all design elements and updating each individually. Naming colours intelligently also helps to create consistency across a site. When building a new component, colours are selected on the basis of their meaning rather than personal or design preference.
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for colour or pixel values for spacing) to maintain a scalable and consistent visual system for UI development.
Colors
We use a flexible colour palette that places emphasis on important elements.
Primary colors
Dark Blue 500 one of our core brand colours. Use Dark Blue 900 for primary actions and buttons, for links, for indicating progress and representing authentication.
Hex: #2E008B RGB: 46, 0, 139
Magenta 500 is another of our core brand colours. Use Magenta 500 for in-app text links and to highlight or draw attention to important information that has no interaction.
Hex: #EC008C RGB: 236, 0, 140
Cyan 500 is our third core brand colour. Use Cyan 300 for primary actions and buttons, links, for indicating progress and representing authentication.
Hex: #00B6ED RGB: 0, 182, 237
Color palette
Dark Blue
Dark Blue 100
Hex #EDEAF5
Sass $Color-dark-blue--100
JavaScript COLOR_DARK_BLUE_100
CSS --color-dark-blue--100
Dark Blue 200
Hex #DAD2EA
Sass $Color-dark-blue--200
JavaScript COLOR_DARK_BLUE_200
CSS --color-dark-blue--200
Dark Blue 300
Hex #A896CF
Sass $Color-dark-blue--300
JavaScript COLOR_DARK_BLUE_300
CSS --color-dark-blue--300
Dark Blue 500
Hex #2E008B
Sass $Color-dark-blue--500
JavaScript COLOR_DARK_BLUE_500
CSS --color-dark-blue--500
Dark Blue 800
Hex #22006C
Sass $Color-dark-blue--800
JavaScript COLOR_DARK_BLUE_800
CSS --color-dark-blue--800
Dark Blue 900
Hex #13003D
Sass $Color-dark-blue--900
JavaScript COLOR_DARK_BLUE_900
CSS --color-dark-blue--900
Magenta
Magenta 100
Hex #FDEAF5
Sass $Color-magenta--100
JavaScript COLOR_Magenta_100
CSS --color-magenta--100
Magenta 200
Hex #FBD3EB
Sass $Color-magenta--200
JavaScript COLOR_Magenta_200
CSS --color-magenta--200
Magenta 300
Hex #F796D0
Sass $Color-magenta--300
JavaScript COLOR_Magenta_300
CSS --color-magenta--300
Magenta 500
Hex #EC008C
Sass $Color-magenta--500
JavaScript COLOR_Magenta_500
CSS --color-magenta--500
Magenta 800
Hex #BB0071
Sass $Color-magenta--800
JavaScript COLOR_Magenta_800
CSS --color-magenta--800
Magenta 900
Hex #710044
Sass $Color-magenta--900
JavaScript COLOR_Magenta_900
CSS --color-magenta--900
Cyan
Cyan 100
Hex #E3F7FD
Sass $Color-cyan--100
JavaScript COLOR_CYAN_100
CSS --color-cyan--100
Cyan 200
Hex #C3EFFA
Sass $Color-cyan--200
JavaScript COLOR_CYAN_200
CSS --color-cyan--200
Cyan 300
Hex #77DAF5
Sass $Color-cyan--300
JavaScript COLOR_CYAN_300
CSS --color-cyan--300
Cyan 500
Hex #00B6ED
Sass $Color-cyan--500
JavaScript COLOR_CYAN_500
CSS --color-cyan--500
Cyan 800
Hex #0093BC
Sass $Color-cyan--800
JavaScript COLOR_CYAN_800
CSS --color-cyan--800
Cyan 900
Hex #005870
Sass $Color-cyan--800
JavaScript COLOR_CYAN_800
CSS --color-cyan--800
Spacing
Our spacing tokens make it easy to add padding, margins and position coordinates. We use with an 8px grid, so our spacing options are set in multiples of 8 (8, 16, 24, 32, etc.).
Usage
Spacing can be applied uniformly or individually to the sides of an element.
Spacing is flexible depending on viewport size. It can scale up or down proportionally to the root font size.
Responsive Type Scale
When working with different type styles it’s important to adhere to the type scale. Never introduce a new type size. Below are some standards for the web that we’ve defined to help you get started using the correct sizes for your content.
Example: resize the screen width to view the change
H1. Cras sed cursus lectus.
H2. Cras sed cursus lectus.
H3. Cras sed cursus lectus.
H4. Cras sed cursus lectus.
H5. Cras sed cursus lectus.
H6. Cras sed cursus lectus.