Brand Style Guide
Everything you need to represent Togetherness Collective well — logos, colours, fonts, and ready-to-use badge code.
Whether you're a Togetherness Collective officiant adding a badge to your website, a designer creating materials for us, or a partner organisation, this page has what you need. Please use these assets in ways that represent our values with integrity. When in doubt, get in touch.
Officiant Website Badge
Are you a Togetherness Collective officiant? Add one of these credential badges to your website so couples can immediately see that you're an appointed, trained officiant — and follow through to learn more about us. Just copy the code and paste it wherever you'd like it to appear.
Light version
<a href="https://togethernesscollective.org" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:14px;text-decoration:none;
border:2px solid #e6e9ea;border-radius:14px;padding:16px 22px;
background:#ffffff;font-family:system-ui,-apple-system,sans-serif;
max-width:320px;box-shadow:0 2px 12px rgba(0,0,0,0.08);transition:box-shadow 0.2s;"
onmouseover="this.style.boxShadow='0 4px 20px rgba(0,0,0,0.14)'"
onmouseout="this.style.boxShadow='0 2px 12px rgba(0,0,0,0.08)'">
<img src="https://togethernesscollective.org/images/brand/badge-seal-colour.png"
alt="Togetherness Collective" width="64" height="64"
style="display:block;flex-shrink:0;" />
<span style="display:flex;flex-direction:column;gap:3px;">
<span style="font-size:10px;font-weight:700;letter-spacing:0.1em;
text-transform:uppercase;color:#5f5f69;">Appointed Officiant</span>
<span style="font-size:15px;font-weight:700;color:#201b33;line-height:1.2;">
Ontario, Canada
</span>
<span style="font-size:12px;color:#5f5f69;">Togetherness Collective</span>
</span>
</a> Dark version
<a href="https://togethernesscollective.org" target="_blank" rel="noopener"
style="display:inline-flex;align-items:center;gap:14px;text-decoration:none;
border:2px solid rgba(255,255,255,0.15);border-radius:14px;padding:16px 22px;
background:#201b33;font-family:system-ui,-apple-system,sans-serif;
max-width:320px;box-shadow:0 2px 12px rgba(0,0,0,0.3);transition:box-shadow 0.2s;"
onmouseover="this.style.boxShadow='0 4px 20px rgba(0,0,0,0.5)'"
onmouseout="this.style.boxShadow='0 2px 12px rgba(0,0,0,0.3)'">
<img src="https://togethernesscollective.org/images/brand/badge-seal-white.png"
alt="Togetherness Collective" width="64" height="64"
style="display:block;flex-shrink:0;" />
<span style="display:flex;flex-direction:column;gap:3px;">
<span style="font-size:10px;font-weight:700;letter-spacing:0.1em;
text-transform:uppercase;color:rgba(255,255,255,0.6);">Appointed Officiant</span>
<span style="font-size:15px;font-weight:700;color:#ffffff;line-height:1.2;">
Ontario, Canada
</span>
<span style="font-size:12px;color:rgba(255,255,255,0.6);">Togetherness Collective</span>
</span>
</a> Logos
Each variant is available in PNG (web), EPS (vector, where available), and PDF (print). Use the colour version on white or light backgrounds, white on dark, and black for single-colour print. Please do not distort, recolour, or modify the logos.
Main Logo
Secondary Logo
Monogram Emblem
Monogram
Badges
Circular badges for use on websites, social profiles, and print. Three styles: Seal, Mountain, and Monogram.
Colours
Deep Night
#201b33
Primary brand colour. Headlines, dark backgrounds.
Ink Black
#121212
Body text, UI elements on light backgrounds.
Warm Cream
#f0efdf
Hero backgrounds, light section fills.
Linen
#f7f6f4
Subtle section backgrounds, cards.
Stone
#5f5f69
Body text, captions, supporting copy.
White
#ffffff
Page backgrounds, reversed-out logos.
Silver Mist
#e6e9ea
Dividers, borders, subtle separators.
Typography
Primary Typeface
Figtree
Used for all headings, body copy, and UI text across the brand.
Regular 400 — The quick brown fox
Medium 500 — The quick brown fox
SemiBold 600 — The quick brown fox
Type Scale
Aa
Heading 2
Heading 3
Heading 4
Heading 5
Body text at 16px, Stone colour.
Small / caption text
Usage Guidelines
Please do
- ✓Use logos and badges as provided, without modification
- ✓Give the logo adequate clear space — at minimum the height of the "T" in Togetherness
- ✓Use the colour version on white/light backgrounds
- ✓Use the white version on dark or photographic backgrounds
- ✓Link badges back to togethernesscollective.org
Please don't
- ✗Stretch, skew, or distort any logo
- ✗Recolour logos outside of the approved palette
- ✗Place logos on busy backgrounds where legibility suffers
- ✗Use these assets to imply endorsement without authorisation
- ✗Recreate or approximate the logo in a different typeface
Questions about brand usage? Contact us and we'll be happy to help.