Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Color System
  • Blue
  • Green
  • Teal
  • Yellow
  • Purple
  • Red
  • Slate
  • Supporting Colors
  • Color Table

Was this helpful?

  1. Brand Guidelines

Color System

An organized approach to apply colors to our UI and marketing assets.

PreviousLogoNextLine Icons

Last updated 5 years ago

Was this helpful?

Color System

Color helps distinguishes our brand and helps us to create consistent experiences across the Handy platform

Blue

Color

Name

Hex Code

RGB

Blue-Light

#EEF6F9

238, 246, 249

Blue-Medium-Light

#CDE9F8

205, 233, 248

Blue-Medium

#0BB8E3

11, 184, 227

Blue-Medium-Dark

#036DA1

3, 109, 161

Blue-Dark

#073556

7, 53, 86

Green

Color

Name

Hex Code

RGB

Green-Light

#EDF7D6

237, 247, 214

Green-Medium-Light

#D5EBBF

103, 189, 36

Green-Medium

#67BD24

103, 189, 36

Green-Medium-Dark

#4A8A18

74, 138, 24

Green-Dark

#215913

33, 89, 19

Teal

Color

Name

Hex Code

RGB

Teal-Light

#E0F6F2

224, 246, 242

Teal-Medium-Light

#A6E9DD

166, 233, 221

Teal-Medium

#3DCAB1

61, 202, 177

Teal-Medium-Dark

#3DAF88

61, 175, 136

Teal-Dark

#046856

4, 104, 86

Yellow

Color

Name

Hex Code

RGB

Yellow-Light

#FCEBC6

252, 235, 198

Yellow-Medium-Light

#FFDB8D

255, 219, 141

Yellow-Medium

#FFB600

255, 182, 0

Yellow-Medium-Dark

#EF9000

239, 144, 0

Yellow-Dark

#DA7500

218, 117, 0

Purple

Color

Name

Hex Code

RGB

Purple-Light

#EDD1EB

237, 209, 235

Purple-Medium-Light

#B87DB4

184, 125, 180

Purple-Medium

#893383

137, 51, 131

Yellow-Medium-Dark

#700C6A

112, 12, 106

Purple-Dark

#4C0B47

76, 11, 71

Red

Color

Name

Hex Code

RGB

Red-Light

#FFD8D8

255, 216, 216

Red-Medium-Light

#FC9A9A

252, 154, 154

Red-Medium

#E74343

231, 67, 67

Red-Medium-Dark

#B81919

184, 25, 25

Red-Dark

#851919

133, 25, 25

Slate

Color

Name

Hex Code

RGB

Slate-Light

#E8EFF2

232, 239, 242

Slate-Medium-Light

#DAE2E6

218, 226, 230

Slate-Medium

#C2CED3

194, 206, 211

Slate-Medium-Dark

#9CABB5

156, 171, 181

Slate-Dark

#667884

102, 120, 132

Supporting Colors

Color

Name

Hex Code

RGB

Off-White

#FBFBFB

251, 251, 251

Dark-White

#F4F4F4

244, 244, 244

Text-Black

#434343

67, 67, 67

Color Table

Blue

Green

Slate

Yellow

Red

Teal

Purple

Light

#EEF6F9

#EDF7D6

#E8EFF2

#FCEBC6

#FFD8D8

#E0F6F2

#EDD1EB

Medium-Light

#CDE9F8

#D5EBBF

#DAE2E6

#FFDB8D

#FC9A9A

#A6E9DD

#B87DB4

Medium

#0BB8E3

#67BD24

#C2CED3

#FFB600

#E74343

#3DCAB1

#893383

Medium-Dark

#036DA1

#4A8A18

#9CABB5

#EF9000

#B81919

#3DAF88

#700C6A

Dark

#073556

#215913

#667884

#DA7500

#851919

#046856

#4C0B47

Medium-Light-Handy-Blue: #CDE9F8
Light-Handy-Blue: #EEF6F9
Medium-Handy-Blue: #0BB8E3
Medium-Dark-Handy-Blue: #036DA1
Dark-Handy-Blue: #073556
Medium-Pro-Green: #67BD24
Light-Pro-Green: #EDF7D6
Medium-Light-Pro-Green: #D5EBBF
Medium-Dark-Pro-Green: #4A8A18
Dark-Pro-Green: #215913
Light-Teal: #E0F6F2
Medium-Light-Teal: #A6E9DD
Medium-Teal: #3DCAB1
Medium-Dark-Teal: #3DAF88
Light-Yellow: #FCEBC6
Medium-Yellow: #FFB600
Medium-Light-Yellow: #FFDB8D
Light-Purple: #EDD1EB
Medium-Light-Purple: #B87DB4
Medium-Dark-Purple: #700C6A
Medium-Light-Red: #FC9A9A
Light-Red: #FFD8D8
Dark-Purple: #4C0B47
Medium-Red: #E74343
Dark-Red: #851919
Medium-Dark-Red: #B81919
Light-Slate: #E8EFF2
Medium-Purple: #893383
Medium-Light-Slate: #DAE2E6
Medium-Slate: #C2CED3
Dark-Slate: #667884
Medium-Dark-Slate: #9CABB5