Don't see what you need?
Let the Design Team know by creating a card and adding it to our queue!
Logo
Logo
Primary Logo
The horizontal logo is our primary logo, leading with GO as the brand wherever possible. The full colour version must be used in most placements.
Powered By Logo
Designed exclusively for our products. The full colour version must be used in most placements.
Other Branding
Co-Branding
When co-branding with partners, these guidelines should be followed, regardless of brand dominance:
- Use primary logo when possible
- Use logos in a horizontal position when possible
- Make both logos the same visual size
- Separate the logos with a minimum width of two(2) of the 'C' from 'cxm'.
- Vertically middle-align logos for the best balance
Name In Text
In copy, it is written out as 'GOcxm'.
Name Usage:
- 'GO' must be in all caps at all times. It is not 'Go' nor 'go'.
- Text following GO is in lowercase. ie. GOcxm
Protecting Our Logo
Clear Space
The space displayed around the logo should remain free to avoid conflict with other content.
This is generally determined by the height and width of the 'C' in 'cxm' placed around the logo.
Minimum Size Requirement
The minimum width of the logo is 100px. Though clean and minimal, please refrain from shrinking it too much.
Primary Palette
All of our assets and collateral will primarily be using these colours as its branding.
Loyal Blue
The dominant colour that is used throughout our designs and assets. We'll see this colour the most alongside the white and black. This is generally used for titles/headings.
Variable: --brand-color-blue-800
Hex: #0C3490
RGB: rgb(12, 52, 144)
OKLCH: oklch(36.62% 0.1580 263.12)
Black
The primary body text colour.
Variable: --greyscale-color-gray-900
Hex: #000000
RGB: rgb(0, 0, 0)
OKLCH: oklch(0.00% 0.0000 0.00)
White
For tiles/cards, accompanied by a 1px Greyzoned 400 border.
Variable: --greyscale-color-gray-50
Hex: #FFFFFF
RGB: rgb(255, 255, 255)
OKLCH: oklch(100.00% 0.0000 0.00)
Greyzoned 400
Any border, primarily for the border around the white tiles/cards.
Variable: --greyscale-color-gray-400
Hex: #BCBCBC
RGB: rgb(188, 188, 188)
OKLCH: oklch(79.52% 0.0000 0.00)
Off-White
Main background.
Variable: --greyscale-color-gray-100
Hex: #F4F4F4
RGB: rgb(244, 244, 244)
OKLCH: oklch(96.72% 0.0000 0.00)
Greyzoned 600
Secondary or muted text - text that is still readable but not the primary focus.
Variable: --greyscale-color-gray-600
Hex: #757575
RGB: rgb(117, 117, 117)
OKLCH: oklch(56.24% 0.0000 0.00)
Unique Uses
These colours are used occasionally in our assets. They each have their unique purposes.
Soft Blue
Though it is used in the logo, this blue is used sparingly, mainly as an accent colour or if the background is dark.
Variable: --brand-color-blue-300
Hex: #3B99D4
RGB: rgb(59, 153, 212)
OKLCH: oklch(65.37% 0.1238 240.30)
Subtle Blue
Used very sparingly for decorative purposes only (for example, a background shape to accompany a photo).
Variable: --brand-color-blue-50
Hex: #DEF2FF
RGB: rgb(222, 242, 255)
OKLCH: oklch(95.03% 0.0275 236.17)
Dark Denim
Used as a background colour to provide the audience with a brief respite from the light theme, or to emphasize a particular section or slide.
Variable: --brand-color-blue-900
Hex: #08175C
RGB: rgb(8, 23, 92)
OKLCH: oklch(25.26% 0.1233 266.47)
Deck Background
Rare case: Instead of Off-White, please use Greyzoned 200 (#E9E9E9).
Variable: --greyscale-color-gray-200
Hex: #E9E9E9
RGB: rgb(233, 233, 233)
OKLCH: oklch(93.40% 0.0000 89.88)
Secondary Palette
These colours complement the primary palette while adding energy and variety to the brand's visual identity.
Check Contrast First
Do not use the secondary palette without checking the contrast level.
Use With Restraint
These colors should never dominate a design but rather enhance specific elements.
Be Purposeful
Use very sparingly. Ideal for small details like icons, CTAs (calls to action), or to draw attention to key areas.
Maintain Harmony
Avoid using multiple secondary colors together in a single composition to prevent visual clutter.
Purple
Accent only. Use selectively to support emphasis without overpowering the composition.
Variable: --functional-color-purple-600
Hex: #5C34B2
RGB: rgb(92, 52, 178)
OKLCH: oklch(45.06% 0.1871 291.63)
Green
Best for concise highlights or status/confirmation accents where contrast is validated.
Variable: --functional-color-green-600
Hex: #2CA96E
RGB: rgb(44, 169, 110)
OKLCH: oklch(65.33% 0.1392 157.64)
Yellow
Use for focused highlights in small doses; avoid large fill areas to keep hierarchy stable.
Variable: --functional-color-yellow-600
Hex: #FFD500
RGB: rgb(255, 213, 0)
OKLCH: oklch(88.28% 0.1811 94.46)
Red
Reserve for high-priority attention cues and critical emphasis, with careful contrast checks.
Variable: --functional-color-red-600
Hex: #E04643
RGB: rgb(224, 70, 67)
OKLCH: oklch(61.38% 0.1913 25.73)
Full Colour Palette
Most work should still rely on Primary, Unique Uses, and Secondary palettes above. Below is our entire material palette primarily used in our UI/UX designs.
Blue
Green
Yellow
Red
Purple
Orange
Gray
Typography
Our primary font is Inter from Google Fonts.
In our brand framework, typography is much more than text on a page. It is the visual tone of voice for our brand communications. It establishes clarity, hierarchy, and personality across every touchpoint, ensuring that our messaging remains recognizable, accessible, and structured. By maintaining consistent font pairings, weights, and intentional spatial formatting (bolding, underling, and strict structural alignment), our typography reinforces brand authority while delivering a clean, direct user experience.
Primary Font Weights
| Font Weight | Description | Example |
|---|---|---|
| Black (900) | For titles, headings, and bolded text. | abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ !@#$%^&*() |
| Light (300) | For body/default text. | abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ !@#$%^&*() |
Small Size Font Weights
For any text smaller than 8px, switch to Bold (700) and Regular (400) to ensure optimal legibility at micro-sizes.
| Font Weight | Description | Example |
|---|---|---|
| Bold (700) | For titles, headings, and bolded text. | abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ !@#$%^&*() |
| Regular (400) | For body/default text. | abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ !@#$%^&*() |