Links

Colors

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

Colors displayed in Figma

Platform of Trust color schemes 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.
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