Color System
An organized approach to apply colors to our UI and marketing assets.
Last updated
An organized approach to apply colors to our UI and marketing assets.
Last updated
Color helps distinguishes our brand and helps us to create consistent experiences across the Handy platform
Color | Name | Hex Code | RGB |
Blue-Light |
| 238, 246, 249 | |
Blue-Medium-Light |
| 205, 233, 248 | |
Blue-Medium |
| 11, 184, 227 | |
Blue-Medium-Dark |
| 3, 109, 161 | |
Blue-Dark |
| 7, 53, 86 |
Color | Name | Hex Code | RGB |
Green-Light |
| 237, 247, 214 | |
Green-Medium-Light |
| 103, 189, 36 | |
Green-Medium |
| 103, 189, 36 | |
Green-Medium-Dark |
| 74, 138, 24 | |
Green-Dark |
| 33, 89, 19 |
Color | Name | Hex Code | RGB |
Teal-Light |
| 224, 246, 242 | |
Teal-Medium-Light |
| 166, 233, 221 | |
Teal-Medium |
| 61, 202, 177 | |
Teal-Medium-Dark |
| 61, 175, 136 | |
Teal-Dark |
| 4, 104, 86 |
Color | Name | Hex Code | RGB |
Yellow-Light |
| 252, 235, 198 | |
Yellow-Medium-Light |
| 255, 219, 141 | |
Yellow-Medium |
| 255, 182, 0 | |
Yellow-Medium-Dark |
| 239, 144, 0 | |
Yellow-Dark |
| 218, 117, 0 |
Color | Name | Hex Code | RGB |
Purple-Light |
| 237, 209, 235 | |
Purple-Medium-Light |
| 184, 125, 180 | |
Purple-Medium |
| 137, 51, 131 | |
Yellow-Medium-Dark |
| 112, 12, 106 | |
Purple-Dark |
| 76, 11, 71 |
Color | Name | Hex Code | RGB |
Red-Light |
| 255, 216, 216 | |
Red-Medium-Light |
| 252, 154, 154 | |
Red-Medium |
| 231, 67, 67 | |
Red-Medium-Dark |
| 184, 25, 25 | |
Red-Dark |
| 133, 25, 25 |
Color | Name | Hex Code | RGB |
Slate-Light |
| 232, 239, 242 | |
Slate-Medium-Light |
| 218, 226, 230 | |
Slate-Medium |
| 194, 206, 211 | |
Slate-Medium-Dark |
| 156, 171, 181 | |
Slate-Dark |
| 102, 120, 132 |
Color | Name | Hex Code | RGB |
Off-White |
| 251, 251, 251 | |
Dark-White |
| 244, 244, 244 | |
Text-Black |
| 67, 67, 67 |
Blue | Green | Slate | Yellow | Red | Teal | Purple | |
Light |
|
|
|
|
|
|
|
Medium-Light |
|
|
|
|
|
|
|
Medium |
|
|
|
|
|
|
|
Medium-Dark |
|
|
|
|
|
|
|
Dark |
|
|
|
|
|
|
|
