Visual Language

The building blocks that define our website personality. Guidelines for establishing consistency across colour, typography, and our unique iconography.

Colour

Colours are used to complement Safe's product and logo branding. They help to direct attention, express personality, and strengthen brand identity across the site.

The Core Palette make up our most basic and prominent colours and are central to Safe’s identity.
The Semantic Palette offer colours that come attached with familiar convention and meaning, common across the web.
The Neutral Palette is comprised of our whites, greys, and blacks and are our primary text and icon colours.
The Secondary Palette offers breadth and flexibility, used sparsly throughout safe.com, it offers small bursts of colours.

We aim to be accessible for a large audience by following the WCAG 2.1 for contrast and colour usage. With some exceptions for brand consistency, we are committed to Level AA standards. Visit the Accessibility section for more details.

Guidelines Coming Soon!

We’ve recently updated our colours ensuring every team across Safe is using the same palette. We’ll update the colour palettes below and will introduce more robust usage guidelines over time. Use the colours below with some caution and don’t hesitate to reach out to the Digital Marketing team if you have any questions.

Notes on Use

When using colours, stay within the bounds of the palettes below. Don’t create new colours that are similar and don’t modify the colours below e.g. change opacity to create a new colour.

Core Palette

Our core colour palette serves as the foundation of our web pages. These are the colours you will usually see on every page across the website. Any component, at the very least requires one or more of these colours.

Dynamic Orange

$orange

#F55215

Primarly used to signal areas of interaction such as CTA buttons and links. Orange elements give the user control and allow the user to navigate the interface. Orangle traditionally evokes a feeling of energy, dynamism, and action. We use it sparingly to not overwhelm the page with a visually bright and glaring colour.

Dynamic Blue

$blue

#0153D1

We use the blue to signify trust and dependability, and to cement our dedication to providing the best customer support out there. It forms the basis of the Picto icons. It’s used to balance out the vividness of orange.

Core Palette Extended

The extended palette allows for added flexibility when designing components. These are shades or tints inclusive of and branching from our core colours. When the core palette does not offer enough choices, use the extended palette as support.

Dynamic Orange

$orange-dark-20

#8D3F00

$orange-dark-10

#C05500

$orange

#F55215

$orange-light-10

#FF8727

$orange-light-20

#FFA35A

$orange-light-30

#FFC08D

$orange-light-40

#FFDCC0

$orange-light-50

#FFF8F3

Dynamic Blue

$blue-dark-20

#002A6C

$blue-dark-20

#013F9E

$blue

#0153D1

$blue-light-10

#0768FE

$blue-light-20

#3A87FE

$blue-light-30

#6DA6FE

$blue-light-40

#9FC5FF

$blue-light-50

#D2E4FF

$blue-light-60

#F6F9FF

Semantic Palette

Semantic colours have inherent meaning assigned to them and are common across many applications and products. These colours are used for feedback states such as errors, success, or warnings. The largest colour swatch in each palette represents the primary colour to use. Aim to stick with the primary colour as much as possible.

Red

For critical information or error feedback (i.e. form field errors) that require user action

$red-dark-20

#870400

$red-dark-10

#BA0500

$red

#ED0700

$red-light-10

#FF2821

$red-light-20

#FF5954

$red-light-30

#FF8B87

$red-light-40

#FFBCBA

$red-light-50

#FFEEED

Green

For confirmation messages and success feedback for when an action is completed

$green-dark-20

#125428

$green-dark-10

#1C7D3D

$green

#25A751

$green-light-10

#2ED165

$green-light-20

#58DA84

$green-light-30

#82E3A3

$green-light-40

#ABEDC1

$green-light-50

#D5F6E0

Yellow

For warnings or to draw attention to important information, also used decoratively

$yellow-dark-20

#997800

$yellow-dark-10

#CCA000

$yellow

#FFC800

$yellow-light-20

#FFD333

$yellow-light-30

#FFDE66

$yellow-light-40

#FFE999

$yellow-light-50

#FFF4CC

Maya Blue

For informational elements that require no action, also used decoratively.

$maya-blue-dark-60

#00141C

$maya-blue-dark-50

#00394F

$maya-blue-dark-40

#005D82

$maya-blue-dark-30

#0082B5

$maya-blue-dark-20

#00A6E8

$maya-blue-dark-10

#1CBFFF

$maya-blue

#4FCDFF

$maya-blue-light-30

#82DBFF

$maya-blue-light-40

#B5EAFF

$maya-blue-light-50

#E8F8FF

Neutral Palette

The neutral palette is primarily used for text elements such as headers and body copy, anything the user has to read. Additionally, the neutral palette is used for iconography, disabled states, and the base colour for some components (form fields).

White

Used for backgrounds (page and cards) and hover states (for some elements)

$off-white

#F5F5F5

$white

#FFFFFF

Grey

Used for text (primary text, hint, sub-headings), disabled states, and borders

$grey

#2C2C2B

$grey-light-10

#4D4D4D

$grey-light-20

#666666

$grey-light-30

#808080

$grey-light-40

#999999

$grey-light-50

#B3B3B3

$grey-light-60

#CCCCCC

$grey-light-70

#E0E0E0

$grey-light-80

#EBEBEB

Black

Used sparingly and for visual decoration in illustrations

$black

#000000

$off-black

#1A1A1A

Accent Palette

The accent palette contains colours which provide flexibility and breadth in the interface. Use accent colours sparingly. Accent colours should not be used for anything the user relies on to accomplish their goal. Accent colours can be used for decorative elements such as illustrations.

Blue Grey

$blue-grey-dark-20

#14191E

$blue-grey-dark-10

#28333D

$blue-grey

#3C4D5C

$blue-grey-light-10

#50677

$blue-grey-light-20

#64819A

$blue-grey-light-30

#839AAE

$blue-grey-light-40

#A2B3C2

$blue-grey-light-50

#C1CCD6

$blue-grey-light-60

#E0E5EA

$blue-grey-light-70

#FEFEFF

Infra Red

$infra-red-dark-60

#040001

$infra-red-dark-50

#33040F

$infra-red-dark-40

#61081E

$infra-red-dark-30

#900D2C

$infra-red-dark-20

#BF113A

$infra-red-dark-10

#EB184A

$infra-red

#EF476F

$infra-red-light-30

#F37694

$infra-red-light-40

#F7A5B8

$infra-red-light-50

#FBD4DD

Brown

$brown-dark-50

#160C07

$brown-dark-40

#3B2115

$brown-dark-30

#613622

$brown-dark-20

#874C2F

$brown-dark-10

#AD613C

$brown

#C57B57

$brown-light-10

#D2997D

$brown-light-20

#DFB7A3

$brown-light-30

#ECD4C9

$brown-light-40

#F9F2EF

Purple

$purple-dark-30

#28074D

$purple-dark-20

#410C7B

$purple-dark-10

#5910AA

$purple

#7215D8

$purple-light-10

#8C35EB

$purple-light-20

#A663F0

$purple-light-30

#C192F4

$purple-light-40

#DBC0F9

$purple-light-50

#F6EFFD

Guidelines

Common scenarios and important guidelines to adhere to, for a consistent experience across the website.

Dynamic Orange

Use $orange to draw the user’s attention to important interactive elements such as buttons, links, tabs, and more.

Use orange for elements users can interact with

Primary Secondary

Link text

Use orange when you want to show a transition of state for a component

Use orange as a decorative colour within pictos and illustrations

Don't

Use orange for headings and body copy

Welcome to Safe's Design System, Liz!

Use orange when a nearby element is in orange (e.g. orange arrow)

Airports and Aviation

Dynamic Blue

Use $blue primarly as a decorative colour in our pictos, banner images, and as background colours to offset the vibrancy of our orange.

Use blue and it’s shades as the primary colour in pictos

Use the lightest shade of blue as a background colour to divide content sections

Page section 1

This is the first content section on the page...

Page section 2

...This is the second one, to divide the sections we use colour...

Page section 3

...Orange however, is not the right colour to use.

Don't

Use blue for headers or body copy

Welcome to Safe's Design System, Liz!

All text should be using the neutral palette.

Use blue for informational elements such as info banners and callouts

Wrong colour for info messages

Maya blue is the right colour!

Neutral Palette

Use $grey as the primary text colour, with various shades to create contrast and legibility. Use $white as the primary page colour and to provide breathability and space. Use $black sparingly and cautiously.

Use grey for the primary text on the page

Headers

$grey

Body copy

$grey-light-10

Subtext

$grey-light-20

Use grey for icons that aren’t part of a coloured component i.e. Icon Buttons

Use grey for disabled states, borders for components, dividers, and shadows

Disabled form field

CTA

Don't

Use grey for pictos, illustrations, or gradients

Use grey for page colours

Page section 1

Page section 2

Page section 3

Page section 1

Page section 2

Page section 3

Accent Palette

Use $blue-grey $infra-red $brown $purple as decorative colours to complement the core palette and semantic palette.

Use accent colours for decorative imagery such as gradients and illustrations

Don't

Use accent colours for any primary interactions or functions

This is a bad form field... Wrong Colour

Colour Combinations

Visual contrast is the cornerstone in ensuring that our interfaces are accessible and easily usable by all, regardless if they may have a visual impairment. Below, we’ve highlighted text and background colour combinations that are common and acceptable, as well as those that are prohibited.

Common Combinations

The colour combinations featured below are recommended for text and backgrounds. These combinations meet accessibility criteria and are common across safe.com and other domains. General guidelines include:

Pair white (#FFFFFF) text with a background colour from a pallete, using the primary shade or darker shades
Pair grey (#2C2C2B) text with background from white or lighter shades of the core and semantic palette
Pair the darkest shade of a palette with it’s lighest shade, for components such as chips and tags
Avoid mixing shades from different palettes with the exception of the neutral palette

White on darkest orange

#FFFFFF on #8D3F00

7.39

White on orange

#FFFFFF on #F55215

3.02

Dark Orange on lightest orange

#8D3F00 on #FFF8F3

7.02

Grey on lightest orange

#2C2C2B on #FFF8F3

12.02

White on darkest blue

#FFFFFF on #002A6C

13.57

White on blue

#FFFFFF on #0153D1

6.65

Darkest blue on lightest blue

#002A6C on #F6F9FF

12.87

Grey on lightest blue

#2C2C2B on #F6F9FF

11.98

White on darkest green

#FFFFFF on #1C7D3D

5.18

White on green

#FFFFFF on #25A751

3.12

Grey on light green

#2C2C2B on #D5F6E0

10.88

White on darkest red

#FFFFFF on #BA0500

6.75

White on red

#FFFFFF on #ED0700

4.53

Grey on light red

#2C2C2B on #FFEEED

11.25

White on darkest maya blue

#FFFFFF on #005D82

7.27

Grey on maya blue

#2C2C2B on #00A6E8

4.58

Grey on lightest maya blue

#2C2C2B on #E8F8FF

11.61

Grey on yellow

#2C2C2B on #FFC800

8.13

Grey on lightest yellow

#2C2C2B on #FFF4CC

11.47

Prohibited Combinations

Similar to our common combinations, the prohibited combinations pertain to using coloured text on a coloured background. Any functional element vital for the user to accomplish their goal, should not use the combinations below because:

The combinations below fail having an appropriate contrast ratio, making reading and viewing difficult
Users with visual impairments such as colour blindness may not be able to differentiate certain combinations
Certain combinations look off-brand and create too strong of a visual contrast, making prolonged viewing difficult

Red & Green

Red & Orange

Red & Brown

Blue & Purple

Green & Orange

Green & Brown

Yellow & White

Orange & Blue

Iconography

We offer 2 sets of icons, each with a distinct visual style to serve different purposes. You can right click an icon to download the SVG, or check the Team Drive folder for more formats (e.g. PNG).

Pictos. Pictographs that are illustration-icon hybrids with limited colours and used to accompany content sections (usually serving no interaction purpose).
Tokens. Tiny, flat, line-drawing icons that indicate affordances or actions, but can be used as visual cues too.

Pictos

Pictos are designed with a size of 150 x 150 px, so using them at larger sizes will show their details better. They are predominantly blue and rely on orange accents for highlights. See the requirements for creating Pictos to style.

@function  sc-icon-size($name)
@function  sc-icon-path($name)
@mixin  sc-icon-bg-image($name)
@mixin  sc-icon-sizes($size)

components.icons.picto
</>
* name => name of icon (see styleguide reference)
  size => [small, medium, large]

2d-to-3d

3d

3d-datashare

add-users

aec

airports

analytics

augmented-reality

automate

big-data

bim

bim-validate

blog

budgeting

business

cad

calculator

calendar

checklist

cloud

commercial

connect

contact-us

data-conversion

data-conversion-2

data-exchange

data-integration

data-integration-2

data-migration

data-migration-2

data-transformation

data-validation

data-warehouse

databases

defense-aerospace

desktop

discuss-question

discuss-question-2

drinks

edit-contents

education-nonprofit

energy

energy-2

federal-gov

first-responder

food

fun-games

gis

graduate

group

gym

handshake

health-tech

high-tier

home

innovation

integration

knowledge

leader

lidar

local-gov

localization

locating

low-tier

manage

merge-contract

mri

natural-resources

network

new-features

nonprofit

nosql

paid-time-off

price-down

pricing

profit-share

protect-the-planet

ps-tickets

public-service

raster-imagery

raster-imagery-2

real-estate

real-estate-2

remodel-data

report-problem

report-problem-2

satellite

sensors

sensors-2

sent

server

share

social-resp

software-update

software-update-2

spatial-analysis

spatial-etl

spatial-etl-2

sports

state-gov

story

student

style-data

support

teacher

telecommunications

time-trial

trade-in

training

transformation

transportation

uav

unlimited-usage

utilities

virtual-reality

web-services

webinar

write-program

Sizing

Sizing of pictos can be done using the size-nouns.

jumbo

xxlarge

xlarge

large

medium

small

xsmall

xxsmall

tiny

mini

Tokens

Used generally to provide users with visual feedback to indicate interactions on a page, or for compact visual cues (such as warning symbols or label icons).

We use the blade-ui-kit/blade-icons package to include these SVGs inline in our pages, allowing us to style them using CSS. However, they can also be rendered with CSS classes.

Note (July 2021): Neither the x-icon component nor the legacy @svg directive work with pages rendered outside of Laravel. Instead, the token component will fallback to using a CSS class to show the token as a background image. In this case, the icon colour cannot be changed.

@function  sc-icon-size($name)
        @function  sc-icon-path($name)
        @mixin  sc-icon-bg-image($name)
        @mixin  sc-icon-sizes($size)

<x-icon-{$icon_name}/>

components.icons.token
</>
* name  => name of token (see styleguide reference)
  size  => [
              mini, tiny, xxsmall, xsmall, small, medium, large, xlarge, xxlarge, jumbo,
              p, h6, h5, h4, h3, h2, h1
           ]
  color => colour of the token (see colour palette)

Common utilities

search

hamburger

send

error

error-filled

x

checkmark

plus

minus

question

x-circle

x-circle-filled

check-circle

check-circle-filled

plus-circle

minus-circle

question-circle

exclamation-circle

Arrows

left-arrow

right-arrow

up-arrow

down-arrow

switch-arrows

up-v

down-v

left-v

right-v

refresh

up-circle

down-circle

Other

play-media

download

calendar

map

grid-view

list-view

comment

paper

slides

hierarchy

form

filter

preview

edit

lock

copy

Social

like

fcb

twt

insta

lkin

lkin-bg

ytb

blog

Mascots

liz

Try

Using tokens in buttons to help indicate useful actions.

Filter Download

Using tokens inline as labels and compact visual cues.

New Feature

Surrey, Canada

Avoid

Using tokens to help illustrate content sections (use Pictos instead).

Eliminate Time Lag on Projects

Easily add new licenses as needed, never again letting your projects get delayed waiting on necessary licenses.

Sizing

Sizing of tokens are named in two manners: one using size-nouns and one corresponding to text sizes.

jumbo

xxlarge

xlarge

large

medium

small

xsmall

xxsmall

tiny

mini

h1

h2

h3

h4

h5

h6

paragraph

Typography

The sans-serif typeface Open Sans is used in headings and large display sizes, while Source Sans Pro is used in regular text. For the Liz Design System and code snippets, we include Hasklig (a Source Code Pro fork with ligatures.)

Open Sans 600 / 400

H1 Powering the Flow of Data

H2 How it Works

Source Sans Pro 600 / 400

Regular paragraph text uses a font-weight of 400 and strong text uses a font-weight of 600. Save time by using FME to turn manual tasks into repeatable or event-based workflows.

Hasklig

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
~!@#$%^&*(){}:;''""< >?,./
<- -> => >> << /= == !! ||

A modularly scaled system of font sizes, with line heights adjusted to follow the vertical rhythm.

Type	Size	Line Height	Weight
Heading H1	48px	56px	600
Heading H2	32px	44px	400
Heading H3	28px	40px	600
Heading H4	21px	32px	600
Heading H5	18px	24px	600
Heading H6	14px	16px	600
Paragraph text	18px	28px	400
Small	14px	inherit	400

Todo / Ideas

[Colour] Button states (active, disabled, hover etc.)
[Colour] Alternative colour systems - CMYK, RGB, Pantone codes
[Colour] Better way of listing colour name aliases
[Colour] Distinction between $primary and $orange / $orange-80
[Colour] update $gray set
[Colour] add gradients
[Colour Combinations] update chips, old grays
[Icon] Responsive Icons

Visual Language

Colour

Guidelines Coming Soon!

Notes on Use

Core Palette

Core Palette Extended

Dynamic Orange

Dynamic Blue

Semantic Palette

Red

Green

Yellow

Maya Blue

Neutral Palette

White

Grey

Black

Accent Palette

Blue Grey

Infra Red

Brown

Purple

Guidelines

Dynamic Orange

Welcome to Safe's Design System, Liz!

Dynamic Blue

Welcome to Safe's Design System, Liz!

Neutral Palette

Headers

Accent Palette

Colour Combinations

Common Combinations

Prohibited Combinations

Red & Green

Red & Orange

Red & Brown

Blue & Purple

Green & Orange

Green & Brown

Yellow & White

Orange & Blue

Iconography

Pictos

Sizing

Tokens

Common utilities

Arrows

Other

Social

Mascots

Eliminate Time Lag on Projects

Sizing

calendar h1

calendar h2

calendar h3

calendar h4

calendar h5

calendar h6

Typography

Font Family

H1 Powering the Flow of Data

H2 How it Works

Typescale

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Todo / Ideas

h1

h2

h3

h4

h5

h6