Design Guidelines

Primary Teal

Accents, buttons, links, highlights

Dark Teal

Headings, dark text, navigation

Warm Off-White

Page backgrounds, subtle sections

Charcoal Black

Body text, primary content

Pure White

Card backgrounds, content areas

Teal

Bronze

Grey

Merriweather

Usage: Headings (H1, H2, H3, etc.)

✓ Use for all headings and titles

✗ Don't use for body text or long paragraphs

A classic serif font that provides elegance and readability for headings.

Mukta

Usage: Body text, paragraphs, UI elements

✓ Use for all body text and interface elements

✗ Don't use for headings or titles

A clean, modern sans-serif font optimized for readability in body text.

Default Sans-Serif

Usage: Email and limited contexts

✓ Use when custom fonts aren't available (emails, etc.)

✗ Don't use when Merriweather and Mukta are available

Fallback to system default sans-serif fonts when custom fonts cannot be loaded.

Square logo - Full colour

✓ Primary brand representation

✗ Avoid on coloured backgrounds that conflict

SVG Best for web use, large displays, and anywhere you need crisp, scalable graphics | PNG Best for presentations, documents, and email where compatibility is key | PNG (no padding) Best for tight layouts where you need precise control over spacing

Square logo - Mono colour

✓ Use when displayed in small sizes or when full colour isn't an option

✗ Don't use where full colour is an option

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Black

✓ Use on light backgrounds where full colour won't work

✗ Never use on dark backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - White

✓ Use on dark backgrounds where full colour won't work

✗ Never use on light backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Inverted mono colour

✓ Use for social media avatars etc.

✗ Don't use in other cases where full colour logo is an option

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key

Large logo - Full colour

✓ Primary brand representation

✗ Avoid on coloured backgrounds that conflict

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Mono colour

✓ Use when displayed in small sizes or when full colour isn't an option

✗ Try to use the full colour version if you can

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Full colour dark

✓ Use for large displays on dark backgrounds

✗ Don't use on on light backgrounds or in small sizes - the gradient on the bulb will get lost in the background

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Mono colour dark

✓ Use for smaller displays on dark backgrounds

✗ Don't use on light backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Full colour

✓ Primary brand representation

✗ Avoid on coloured backgrounds that conflict

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Mono colour

✓ Use when displayed in small sizes or when full colour isn't an option

✗ Don't use where full colour is an option

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Black

✓ Use on light backgrounds where full colour won't work

✗ Never use on dark backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - White

✓ Use on dark backgrounds where full colour won't work

✗ Never use on light backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Square logo - Inverted mono colour

✓ Use for social media avatars etc.

✗ Don't use in other cases where full colour logo is an option

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key

Large logo - Full colour

✓ Primary brand representation

✗ Avoid on coloured backgrounds that conflict

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Mono colour

✓ Use when displayed in small sizes or when full colour isn't an option

✗ Don't use where full colour is an option

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Full colour dark

✓ Use for large displays on dark backgrounds

✗ Don't use on on light backgrounds or in small sizes - the gradient on the bulb will get lost in the background

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing

Large logo - Mono colour dark

✓ Use for smaller displays on dark backgrounds

✗ Don't use on light backgrounds

SVGBest for web use, large displays, and anywhere you need crisp, scalable graphics PNGBest for presentations, documents, and email where compatibility is key PNG (no padding)Best for tight layouts where you need precise control over spacing