Colors
This page describes colors frequently used across Platform of Trust web services and materials
Platform of Trust color schemes in Figma
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.
- 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
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)
- 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
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).
- 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
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)
- 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
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.
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.
- 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
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.
Hex: #E4DDFF
RGB: 228,221,255
CMYK: 11,13,0,0
Usage: Use this color display text on a UI element that is disabled.
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.
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.
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.
Hex: #D594A8
RGB: 213,148,168
CMYK: 0,31,21,16
Usage: Use this color to show alert texts or mandatory requirement texts.
Hex: #B5A9FF
RGB: 181,169,255
CMYK: 29,34,0,0
Usage: Use this color to visualize a link that has been visited.
Hex: #EAF5FF
RGB: 234,245,255
CMYK: 8,4,0,0
Usage: Use this color to illustrate graphical elements.
Hex: #2ABFF0
RGB: 42,191,240
CMYK: 83,20,0,6
Usage: Use this color to design graphical illustration
Last modified 1yr ago