Brand

Bo’net Brand Guidelines Infographic https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js body { font-family: ‘Lato’, sans-serif; background-color: #F0F4F8; } .brand-text-blue { color: #004F9F; } .brand-bg-blue { background-color: #004F9F; } .brand-text-yellow { color: #FDB813; } .brand-bg-yellow { background-color: #FDB813; } .brand-text-grey { color: #6C6D6D; } .brand-bg-grey { background-color: #6C6D6D; } .brand-bg-light-blue { background-color: #66B6FF; } .brand-bg-light-grey { background-color: #C7C7C7; } .nav-link.active { color: #004F9F; font-weight: 700; } .color-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .color-card:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } .tone-arrow { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .tone-arrow-down { border-top: 15px solid #94a3b8; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; }

Logo Colours Typography Tone of Voice

Bo’net Brand Guidelines

A guide to our visual identity, ensuring our brand is presented consistently and cohesively to build a strong, recognizable, and trustworthy presence in the community.

Our Logo

The primary identifier of our brand.

✓Do’s

• Always use the complete logo unit.
• Maintain a clear space around the logo.

✗Don’ts

• Do not stretch, distort, or alter the logo.
• Do not place on visually cluttered backgrounds.

Colour Palette

The foundation of our visual identity.

Primary Colours

Bo’net Blue

HEX: #004F9F

PMS: 287 C

Bo’net Yellow

HEX: #FDB813

PMS: 123 C

Bo’net Grey

HEX: #6C6D6D

PMS: Cool Gray 10 C

Secondary Colours

Light Blue

HEX: #66B6FF

Light Grey

HEX: #C7C7C7

Typography

Our voice in written form.

Lato

Modern, friendly, and highly readable.

HEADLINE

Use Lato Bold for Headlines

SUBHEADING

Use Lato Regular for Subheadings

BODY TEXT

For body text, Lato Regular provides excellent readability. This ensures our messages are clear, accessible, and easy to engage with across all of our communications.

Tone of Voice

How we speak to our community.

Our Voice Should Be…

🗣️

Friendly & Approachable

💡

Clear & Simple

🤝

Helpful & Positive

Authentic & Real

const navLinks = document.querySelectorAll(‘.nav-link’); const sections = document.querySelectorAll(‘section’); const options = { rootMargin: ‘-50% 0px -50% 0px’, threshold: 0 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { navLinks.forEach(link => { link.classList.remove(‘active’); if (link.getAttribute(‘href’).substring(1) === entry.target.id) { link.classList.add(‘active’); } }); } }); }, options); sections.forEach(section => { observer.observe(section); });