Primary
Phocas' primary palette of Feel-Good Cyan, Deep Purple and light neutral is a key foundational element that serves as a consistent and memorable signature of our brand. This confident combination communicates our innovation and boldness – conveying the personality of our brand in all executions.
Use confidently – our primary palette is the foundation of our brand consistency.
Feel-Good Cyan – Cyan 500
RGB 7 184 214
CMYK 72 3 13 0
PMS 638 C
#07B8D6
Deep Purple – Purple 900
RGB 48 32 66
CMYK 84 99 27 16
PMS 2695 C
#302042
Light Neutral – Neutral 200
RGB 231 235 237
CMYK 8 4 4 0
PMS 649 C
#E7EBED
Secondary
Phocas' vibrant secondary color palette brings a dynamic strength and fun personality to our brand. When combined with our primary cyan in overlapping compositions, they craft an unforgettable visual identity and are the secret to making a lasting impression in the market. Make sure to note the application ratios and approved color combinations to ensure succesfull use.
Keep it light – they work their magic and are most effective in moderation.
Confident Purple – Purple 500
RGB 144 84 198
CMYK 56 75 0 0
PMS 2587 C
#9054C6
Empowered Yellow – Yellow 500
RGB 250 192 38
CMYK 0 27 100 0
PMS 123 C
#FAC026
Energized Orange – Orange 500
RGB 249 119 13
CMYK 0 66 100 0
PMS 151 C
#F9770D
Extended palette
Bring in depth – utilize the extended palette to create range and improve accessibility when needed.
Always provide sufficient contrast between foreground and background1 and not use color alone to convey information2.
White
RGB 255 255 255
CMYK 0 0 0 0
#FFFFFF
Neutral 100
RGB 246 247 248
CMYK 2 1 1 0
#F6F7F8
Neutral 400
RGB 174 189 201
CMYK 0 0 0 33
#AEBDC9
Neutral 600
RGB 96 121 143
CMYK 0 0 0 65
#60798F
Neutral 800
RGB 28 51 74
CMYK 0 0 0 95
#1C334A
Neutral 900
RGB 15 29 42
CMYK 0 0 0 100
#0F1D2A
Cyan 400
RGB 78 198 224
CMYK 60 0 10 0
#4EC6E0
Cyan 600
RGB 9 162 190
CMYK 77 17 20 0
#09A2BE
Purple 700
RGB 105 55 149
CMYK 65 90 0 0
#693795
Purple 800
RGB 75 39 104
CMYK 72 94 0 0
#4B2768
Color ratio
- White or light neutrals – Neutral 100 and 200
Used generously, creating a modern, clutter-free balance that keeps our content super clear. - Deep Purple – Purple 900
Used in contrast to the white, bringing contrast and confidence to our designs. It adds depth and character, all while maintaining consistency. - Feel-Good Cyan – Cyan 500
Used purposefully, making it pop where it counts. It’s our focal point, sparking attention to what matters most. - Secondary colors – Purple, orange and yellow 500
Used sparingly, creating vibrant highlights and forming our signature dynamic overlaps.
Feel-good balance
Feel-Good Cyan (Cyan 500) is the main highlight color for Phocas, and it’s an important part of our visual system – however application is only to be for areas of highlight and key graphics. As shown here, it is important to recognize the ratio of use – for example, we don’t ever use the Cyan 500 – or any other secondary colour – as a flat background.
To keep things consistent, use Feel-Good Cyan as the highlight color in partnership with our Deep Purple or white as the background color, serving as a thread to clearly tie Phocas visuals together.
Keep it consistent – make sure to get the color balance right to achieve the Phocas look and feel.
- Foreground text needs to have sufficient contrast with background colors. This includes text on images, background gradients, buttons, and other elements. This does not apply for logos, or incidental text, such as text that happens to be in a photograph. For more information on the minimum contrast ratio as required by the WCAG, visit the W3 Designing for Web Accessibility page.
- While color can be useful to convey information, color should not be the only way information is conveyed. When using color to differentiate elements, also provide additional identification that does not rely on color perception. For example, use an asterisk in addition to color to indicate required form fields, and use labels to distinguish areas on graphs.