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