Styleguide

Colors

Principles

The Primary Colors and Cool Grays are the defining colors of the Hired brand. They are used throughout the product to establish brand recognition.
The remaining palettes have specific uses detailed within each section. (ex- forms, utility, alerts, infographics)

The design team has a .sketch file referencing these exact colors using the same names. Shared language FTW.

Palettes & SASS Variables

Primary

Red and Blue are used sparingly in elements that highlight functionality and/or active states.
Black and White are used more generously throughout the product.

Red
#E82F3A
$color-red
Primary button
Blue
#2AA3DD
$color-blue
Links
Black
#323141
$color-black
White
#FFFFFF
$color-white

Secondary: Cool Grays

Cool Greys serve as the secondary colors and is a palette derived from Hired Black.
Use this palette for text headers and functional, active or graphical elements.

Deep Black
#191821
$color-deep-black
Cool Gray 6
#404C60
$color-cool-gray-6
Primary button Headers
Cool Gray 5
#5F6E86
$color-cool-gray-5
Cool Gray 4
#9DAEC3
$color-cool-gray-4
Secondary button Form field outline
Cool Gray 3
#C7D3E3
$color-cool-gray-3
Cool Gray 2
#E9EEF7
$color-cool-gray-2
Cool Gray 1
#F0F3F9
$color-cool-gray-1
Cool Gray 0
#F7F8FB
$color-cool-gray-0

Neutral Grays

Neutral Greys are used for section backgrounds, general utility elements and UI controls such as hairline dividers, form fields and body text.

Dark Gray 2
#222222
$color-dark-gray-2
Dark Gray 1
#333333
$color-dark-gray-1
Medium Gray 2
#616161
$color-medium-gray-2
Medium Gray 1
#9D9D9D
$color-medium-gray-1
Secondary button
Gray 3
#C9CBCE
$color-gray-3
Ghost Text
Gray 2
#E3E4E6
$color-gray-2
Hairline Form fields Inactive button
Gray 1
#E9EAEC
$color-gray-1
Hovered Tabs
Gray 0
#F4F5F7
$color-gray-0
Section background

Status

A palette reserved only for specific alerts and notifications.

Success
#00D981
$color-success
Alert
#FCE200
$color-alert
Error
#DD046C
$color-error
Info
#3BC6F6
$color-info