Brand identity
Northside Bozeman brand guidelines
Logos, colors, and type for anyone making something for the Northside. Click any color value to copy it.
01
Logos
Three marks, one family. Use the biggest one that fits. SVG scales to any size, including print; use the transparent PNG where SVG isn’t accepted.
Primary logo
The full lockup with “Business Group.” Use it wherever there is room: the home page, posters, banners, signage, and print.
Minimum size
240px wide on screen · 2 in. in print
Badge
The compact circular mark. Use it in tight spaces: the site header, stickers, merch, social posts, and partner listings.
Minimum size
64px wide on screen · 0.75 in. in print
App icon
The square “N” tile. Use it for favicons, app icons, and square social avatars. It is the only mark that works on dark backgrounds.
Minimum size
16px (favicon)
Do
- Place logos on Warm Off-White, Card Surface, or plain white.
- Keep clear space around the logo equal to the height of the “B” in BOZEMAN.
- Scale proportionally, and use the SVG or PNG files from this page.
Don’t
- Don’t put the primary logo or badge on dark, busy, or photographic backgrounds. Use the app icon there.
- Don’t recolor, stretch, rotate, outline, or add shadows.
- Don’t retype the wordmark in a font. The lettering is custom.
02
Colors
Rust and paper do most of the work. Orange, olive, and ochre are accents, not backgrounds for whole pages. Click a swatch or any value to copy it.
Core palette
Primary accent
Rust Red
Primary buttons, links, active navigation, the “Northside” wordmark.
- HEX
- RGB
- CSS
Secondary
Ember Orange
Secondary buttons and large display type. Use Ember Deep for small text.
- HEX
- RGB
- CSS
Nature accent
Forest Olive
Icons, tags, illustration, quiet supporting headings.
- HEX
- RGB
- CSS
Highlight
Golden Ochre
Small highlights, badges and rules. Never as text on light backgrounds.
- HEX
- RGB
- CSS
Background
Warm Off-White
Page background. The canvas everything else sits on.
- HEX
- RGB
- CSS
Functional & supporting
Text
Trail Ink
Body copy, headings, and dark bands like the footer.
- HEX
- RGB
- CSS
Surface
Card Surface
Cards, header, inputs — anything raised off the page.
- HEX
- RGB
- CSS
Secondary text
Muted Ink
Ledes, captions, metadata.
- HEX
- RGB
- CSS
Borders
Hairline
Dividers and card borders.
- HEX
- RGB
- CSS
Hover / pressed
Rust Deep
Hover and pressed state for rust buttons and links.
- HEX
- RGB
- CSS
Accessible orange
Ember Deep
Orange text at body sizes (passes WCAG AA on paper).
- HEX
- RGB
- CSS
Hover / pressed
Olive Deep
Hover state for olive buttons and tags.
- HEX
- RGB
- CSS
03
Accessible pairings
WCAG contrast for common combinations. Body text needs AA (4.5:1). “AA Large” is only for text at least 24px, or 19px bold.
| Sample | Use | Ratio | Rating |
|---|---|---|---|
| Northside | Body text#2C351F on #F9F5EE | 11.81:1 | AAA |
| Northside | Secondary text#5B5F4C on #F9F5EE | 6.06:1 | AA |
| Northside | Links, headings#A62B1D on #F9F5EE | 6.47:1 | AA |
| Northside | Supporting headings#5C6F3B on #F9F5EE | 5.10:1 | AA |
| Northside | Orange text#A85205 on #F9F5EE | 4.99:1 | AA |
| Northside | Primary button#FDFBFA on #A62B1D | 6.82:1 | AA |
| Northside | Olive button / tag#FDFBFA on #5C6F3B | 5.37:1 | AA |
| Northside | Highlight badge#2C351F on #EBAF17 | 6.53:1 | AA |
| Northside | Footer text#FDFBFA on #2C351F | 12.44:1 | AAA |
| Northside | Accent on dark#EBAF17 on #2C351F | 6.53:1 | AA |
| Northside | Display type only#D96B07 on #F9F5EE | 3.19:1 | AA Large |
| Northside | Never for text#EBAF17 on #F9F5EE | 1.81:1 | Fail |
04
Typography
A warm, slightly old-fashioned serif for headings, and a plain sans for reading. Both are free Google Fonts.
Headings · Fraunces 500–700
From Lager to Legacy
Historic Brewery District
Bozeman, Montana
Body · Source Sans 3 400 / 600
Artists, makers, brewers, and neighbors who keep the Northside local. Body copy is 16–18px, with a line height around 1.6.
Kicker · uppercase, tracked
05
Buttons & details
Square corners, flat fills, and a rust bar with an ochre hairline, like the site header.
Signature rule: 4px rust + 1px ochre.
06
Voice
Neighborly
Write like you’re talking over the fence. Say “we” and “our block,” not “stakeholders.”
Rooted
Lean on real history: the brewery, the rail line, the grain elevators. Name real places and people.
Plainspoken
Short sentences and concrete details. Skip the marketing superlatives.