Colors
This page describes colors frequently used across Platform of Trust web services and materials
Colors displayed 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.
Swatches
Hex: #8F71FF
RGB: 143,113,255
CMYK: 53,67,0,0
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.)
Hex: #281C55
RGB: 40,28,85
CMYK: 53,67,0,0
Statuses
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:
Hex: #C9EFCA
RGB: 201,239,202
CMYK: 16,0,15,6
Hex: #79D67B
RGB: 121,214,123
CMYK: 43,0,43,16
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).
Swatches:
Hex: #FFEAAA
RGB: 255,234,170
CMYK: 0,8,33,0
Hex: #FFD555
RGB: 255,213,85
CMYK: 0,16,67,0
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)
Swatches:
Hex: #FFE5ED
RGB: 255,229,237
CMYK: 0,10,7,0
Hex: #FFBFD3
RGB: 255,191,211
CMYK: 0,25,17,0
Typography
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.
Swatches
Hex: #C8D8E6
RGB: 200,216,230
CMYK: 13,6,0,10
Usage: fto use as fill to a disabled UI element.
Hex: #D9D9D9
RGB: 217,217,217
CMYK: 0,0,0,15
Usage: Use this color as border to a UI element that is disabled.
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.
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.
Others
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 updated
