Platform of Trust Platform Design Guide
Developer PortalAPI DocsOntology
  • Purpose and scope
  • Developer eXperience Strategy
  • Suggest changes
  • API Requests
    • Request validation
    • Response codes used
    • Error handling
  • General API guidelines
    • Performance
    • Documentation
    • Data models used
    • Use HATEOAS
    • Use HTTP Methods
    • Dates and time
    • Naming conventions
    • Pagination, partial response and sorting
    • API Testing
  • API Headers
    • Mandatory elements & behaviour
    • Rate limiting information
  • API Security
    • Authentication and authorization
    • SSL everywhere - all the time
  • API versioning guidelines
    • Versioning Rules
    • Breaking changes
    • Non-breaking changes example
    • Retirement process
    • Add new API to documentation
    • Add new endpoint
  • API Migration Policies
    • Deprecating API
    • Sunsetting API
    • Blackout Testing
    • Migration Email Template
    • API Blackout Test Email Template
    • API Deprecation Email
    • Deprecating an older API
  • Ontologies
    • About ontologies
    • Web Ontology Language, OWL
    • Ontology editor
    • Edit ontology
    • Add new subclass
    • Naming convention logic
    • Extending the ontology
  • Design Guideline
    • Colors
    • Typography
    • Grids and Space
    • Input forms - Text field
    • Input forms - Text area
    • Buttons
    • Checkbox
    • Radio buttons
    • Date picker
    • Form control - Single select
    • Toggle
    • Pagination
    • Status pills
    • Tables
    • Effects
    • Dialogues
Powered by GitBook
On this page
  • Colors displayed in Figma
  • Primary or Brand
  • Statuses
  • Typography
  • Others

Was this helpful?

  1. Design Guideline

Colors

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

PreviousExtending the ontologyNextTypography

Last updated 3 years ago

Was this helpful?

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

    • 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

PoT brand 2

PoT hover

PoT brand 4

Success

PoT success 1

PoT success 2

PoT success 3

Warning

PoT warning 1

PoT warning 2

PoT warning 3

Danger

PoT danger 1

PoT danger 2

PoT primary blue

PoT grey

PoT disable

PoT disable border

PoT cursor

PoT grey 4

PoT White

PoT disabled text

PoT success text

PoT warning text

PoT danger text

PoT error text

PoT visited link

PoT light blue

PoT secondary blue

Platform of Trust color schemes in Figma