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
Use orange when you want to show a transition of state for a component
Use orange as a decorative colour within pictos and illustrations
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
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.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
Body copy
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
CTA
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.
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
White on orange
Dark Orange on lightest orange
Grey on lightest orange
White on darkest blue
White on blue
Darkest blue on lightest blue
Grey on lightest blue
White on darkest green
White on green
Grey on light green
White on darkest red
White on red
Grey on light red
White on darkest maya blue
Grey on maya blue
Grey on lightest maya blue
Grey on yellow
Grey on lightest yellow
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
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
Font Family
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
~!@#$%^&*(){}:;''""< >?,./
<- -> => >> << /= == !! ||
Typescale
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