SVG
1. Colour System
1.1 Primary Palette
These are the core colours that represent the brand across digital and print applications.
| Colour Name | Hex | Use Case |
|---|---|---|
| Primary Blue | #1A73E8 | Brand recognition, buttons, highlights, links |
| Deep Navy | #0B1B34 | Backgrounds, headers, strong contrast areas |
| Bright White | #FFFFFF | Text on dark backgrounds, clean layouts |
1.2 Secondary Palette
Used to support the primary palette and create visual hierarchy.
| Colour Name | Hex | Use Case |
|---|---|---|
| Cool Grey | #ECEFF1 | Panels, cards, dividers, subtle UI elements |
| Graphite | #4A4A4A | Body text on light backgrounds |
| Accent Green | #34C759 | Success states, notifications, highlight elements |
1.3 Neutral Palette
Used for background shades, borders, and muted content.
| Shade | Hex | Purpose |
|---|---|---|
| Neutral Light | #F7F8FA | Clean sections, spacing zones |
| Neutral Mid | #B0B9C3 | Secondary text, icons |
| Neutral Dark | #2E3A47 | Strong text, emphasis |
2. Colour Usage Guidelines
Contrast & Accessibility
- Ensure 4.5:1 contrast for normal text and 3:1 for large text.
- Primary buttons should always use Primary Blue with white text.
- Avoid using too many accent colours in a single layout to maintain cohesion.
Brand Feel
The palette is designed to feel:
- Modern
- Clean
- Professional
- Tech-forward
3. Typography Guidelines
3.1 Primary Font
ubuntu (bold)
- Clean, geometric sans-serif
- Excellent for interfaces and digital platforms