Colors

This page describes colors frequently used across Platform of Trust web services and materials

Colors displayed in Figma

Primary or Brand

Hex: #7955ff

RGB: 121,85,255

CMYK: 53,67,0,0

Usage:

All Primary CTA, Link default state, UI label, etc.
Use swatches of this color to bring contrast to other UI elements.

Swatches

PoT brand 2
- Hex: #8F71FF
- RGB: 143,113,255
- CMYK: 53,67,0,0
PoT hover
- Hex: #5A39AA
- RGB: 91,58,171
- CMYK: 47,66,0,33
- Usage:
  - Indicate hover state of an UI element (text field, radio buttons, link text, etc.)
PoT brand 4
- Hex: #281C55
- RGB: 40,28,85
- CMYK: 53,67,0,0

Statuses

Success

Hex: #5ECE60

RGB: 94,206,96

CMYK: 54,0,53,19

Usage:

Use this color on OK, Yes button, success popup alert, etc.
Different tints of this shade can be used in similar scenarios (e.g. success text on a lighter background)

Swatches:

PoT success 1
- Hex: #C9EFCA
- RGB: 201,239,202
- CMYK: 16,0,15,6
PoT success 2
- Hex: #79D67B
- RGB: 121,214,123
- CMYK: 43,0,43,16
PoT success 3
- Hex: #3F8940
- RGB: 63,137,64
- CMYK: 54,0,53,46

Warning

Hex: #FFC000

RGB: 255,192,0

CMYK: 0,25,100,0

Usage:

to indicate UIs and messages for actions that affects data or states of a service. E.g. modifying quality attribute values. The color is meant to imply warnings for users.
Different tints of this shade can be used in similar scenarios (e.g. Warning text on a lighter background).

Swatches:

PoT warning 1
- Hex: #FFEAAA
- RGB: 255,234,170
- CMYK: 0,8,33,0
PoT warning 2
- Hex: #FFD555
- RGB: 255,213,85
- CMYK: 0,16,67,0
PoT warning 3
- Hex: #D5A000
- RGB: 213,160,0
- CMYK: 0,25,100,16

Danger

Hex: #FFB2CA

RGB: 255,178,202

CMYK: 0,30,21,0

Usage:

to indicate UIs and messages for actions that are irreversible and can't be undone. E.g. Delete action.
Different tints of this shade can be used in similar scenarios (e.g. Danger text on a lighter background)

Swatches:

PoT danger 1
- Hex: #FFE5ED
- RGB: 255,229,237
- CMYK: 0,10,7,0
PoT danger 2
- Hex: #FFBFD3
- RGB: 255,191,211
- CMYK: 0,25,17,0

Typography

PoT primary blue

Hex: #1E1540

RGB: 30,21,64

CMYK: 53,67,0,75

Usage: to write down any style of text in light background and also to show input text in text field, text area, labels in radio button, etc.

PoT grey

Hex: #555555

RGB: 85,85,85

CMYK: 0,0,0,67

Usage: This secondary color is used to show placeholder text within text fields, text area, drop menu, etc. Shades of grey is also used to indicate different UI and message status.

Swatches

PoT disable
- Hex: #C8D8E6
- RGB: 200,216,230
- CMYK: 13,6,0,10
- Usage: fto use as fill to a disabled UI element.
PoT disable border
- Hex: #D9D9D9
- RGB: 217,217,217
- CMYK: 0,0,0,15
- Usage: Use this color as border to a UI element that is disabled.
PoT cursor
- Hex: #979797
- RGB: 151,151,151
- CMYK: 0,0,0,41
- Usage: In Figma, this color has been used to indicate the cursor in an active text field/area. If needed, this can be used to bring constrast within UI elements.
PoT grey 4
- Hex: #2B2B2B
- RGB: 43,43,43
- CMYK: 0,0,0,83