Brand Guidelines
Colour Palette
Fifteen colours across three groups. Click any swatch to see approved pairings. All artwork should be created in sRGB IEC61966-2.1 for consistent rendering.
Keystone Colours
Primary colours used prominently in logos, key visuals, and primary marketing materials to establish instant recognition.
Knowledge Gold
RGB 250, 205, 0
CMYK 0, 18, 100, 2
Pantone 116 C
Inspiration Pink
RGB 250, 0, 205
CMYK 0, 100, 18, 2
Pantone Purple C
Discovery Teal
RGB 0, 250, 205
CMYK 100, 0, 18, 2
Pantone 3255 C
Supporting Palette
Grounding and balancing colours that ensure designs remain accessible and professional while complementing the neon palette.
Foundational Brown
RGB 68, 56, 0
CMYK 0, 18, 100, 73
Pantone 116 C
University Blue
RGB 28, 59, 112
CMYK 75, 47, 0, 56
Pantone Purple C
Midnight
RGB 43, 42, 42
CMYK 0, 2, 2, 83
Pantone 3255 C
Canvas Shades
Soft, watercolour-like hues for backgrounds and contexts where the brightest NSEMM colours do not work.
Serenity Slate
Soft Mint
Legacy Gold
Background Grey
Coastal Green
Sandy Brown
Colour Pairings
Full approved background and text combinations.
Contrast Checker
Test any two colours against WCAG 2.2. NSEMM content must meet AA minimum, AAA for body copy.
Select any two palette colours to check WCAG compliance.
The National Society for Education, Mentoring and Media
Body text appears at this size. Clear, readable, and accessible.
Use tokens, not raw hex
Inside the app codebase, write Tailwind classes against brand tokens (bg-primary, text-foreground, border-border, bg-accent) — never raw arbitrary hex values like bg-[#1C3B70].
Why this matters
Raw hex bypasses the design-token layer that powers dark mode, themed sub-apps, and any future palette tweak. A single rebrand cycle in 2025 had to rewrite hundreds of hardcoded #1C3B70 classes by hand because they had drifted across admin, finance and HR. Tokens turn that into a one-line config change.
| Avoid | Use instead |
|---|---|
| bg-[#1C3B70] | bg-primary |
| text-[#1C3B70] | text-primary |
| border-[#1C3B70] | border-primary |
| bg-[#FACD00] | bg-accent |
| text-white on bg-[#1C3B70] | text-primary-foreground on bg-primary |
| hover:bg-[#152d56] | hover:bg-primary/90 |
Enforcement
An ESLint rule (no-raw-hex-in-app) fails the build on any new bg-[#…] / text-[#…] / border-[#…] / ring-[#…] usage inside apps/. Static SVG icons in shared packages can still use literal hex where a token would harm visual fidelity.
Email exception
Transactional emails are the one place hex is mandatory — Gmail and Outlook strip CSS custom properties. The @nsemm/ui/email primitive resolves the tokens to literal hex at render time, so callers consume the same brand language without breaking inbox rendering.