Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Essentials
  4. Color

Color

Our colours make up our brand, applications and be used to provide indicators to our users.

Brand colors

Plum

HEX: #6F5CA7
RGB: 111, 92, 167
$primary

Midnight sky

HEX: #191C26
RGB: 25, 28, 38
$secondary

Tangerine

HEX: #F65F18
RGB: 246, 95, 24
$tertiary

Sky blue

HEX: #F4F7FE
RGB: 244, 247, 254
$light-bg

Light navy

HEX: #2A2F3C
RGB: 42, 47, 60
$light-secondary

Dark navy

HEX: #222734
RGB: 34, 39, 52
$dark-secondary

Greyscale

Dark grey

HEX: #636363
RGB: 99, 99, 99
$dark-grey

Mid grey

HEX: #C4C4C4
RGB: 196, 196, 196
$mid-grey

Light grey

HEX: #E5E5E5
RGB: 229, 229, 229
$light-grey

Lightest grey

HEX: #F5F5F5
RGB: 245, 245, 245
$lightest-grey

White

HEX: #FFFFFF
RGB: 255, 255, 255
$white

Status colors

Green

HEX: #19A070
RGB: 25, 160, 112
$green

Light green

HEX: #CBE2C8
RGB: 203, 226, 200
$light-green

Red

HEX: #D93737
RGB: 217, 55, 55
$red

Light red

HEX: #E8CACA
RGB: 232, 202, 202
$light-red

Amber

HEX: #FF924B
RGB: 255, 146, 75
$amber

Light amber

HEX: #FFEED4
RGB: 234, 216, 188
$light-amber

Blue

HEX: #2A6CDF
RGB: 42, 108, 223
$blue

Light blue

HEX: #BFCDE4
RGB: 191, 205, 228
$light-blue

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns