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
PoT White 

Hex: #FFFFFF
RGB: 255,255,255
CMYK: 0,0,0,0
Usage: Use as button text colors. Also Use this as general text color on dark backgrounds.
PoT disabled text 

Hex: #E4DDFF
RGB: 228,221,255
CMYK: 11,13,0,0
Usage: Use this color display text on a UI element that is disabled.
PoT success text 

Hex: #1F4520
RGB: 31,69,32
CMYK: 55,0,54,73
Usage: text color to be used on top of an UI elements with success colors.
PoT warning text 

Hex: #554000
RGB: 85,64,0
CMYK: 0,25,100,67
Usage: text color to be used on top of an UI elements with warning colors.
PoT danger text 

Hex: #805965
RGB: 128,89,101
CMYK: 0,30,21,50
Usage: as text color to on top of a UI elements with danger state.
PoT error text 

Hex: #D594A8
RGB: 213,148,168
CMYK: 0,31,21,16
Usage: Use this color to show alert texts or mandatory requirement texts.
PoT visited link 

Hex: #B5A9FF
RGB: 181,169,255
CMYK: 29,34,0,0
Usage: Use this color to visualize a link that has been visited.
Others
PoT light blue

Hex: #EAF5FF
RGB: 234,245,255
CMYK: 8,4,0,0
Usage: Use this color to illustrate graphical elements.
PoT secondary blue 

Hex: #2ABFF0
RGB: 42,191,240
CMYK: 83,20,0,6
Usage: Use this color to design graphical illustration
Last updated
Was this helpful?