Code of the North

Style Guide

<We'll Guide You Out of the Woods/>

Color Palette

Forest is the dominant brand color. Lightning is secondary. Backlight is accent only. Colors are weighted by usage proportion.

Midnight
#313D49
#495C6E
#181E24 Darkest background, high contrast
Forest
#3C6762
#538D87
#26413E Primary brand color, headers, fills
Lightning
#E9E730 Accent, highlights on dark backgrounds
Backlight
#04CEDC
on light
#03838C
w/ white
#37EEFB Accent lines, links. #37EEFB on dark only.
Moonlight
#EEE5E9 Light backgrounds
White
#FFFFFF Text on dark backgrounds

Approved Color Pairings

Only use these approved foreground/background combinations. Pairing B (Forest on Moonlight) is best for documents and reports.

Aa #E9E730 on #181E24
Bb #26413E on #EEE5E9 (documents)
Cc #26413E on #E9E730
Dd #26413E on #37EEFB
Ee #37EEFB on #26413E
Ff #03838C & #FFFFFF

Typography

Aa Bb 1234 ! ? &

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

{We'll Guide You Out of the Woods}

[Headers] Roboto Condensed
Light Regular Bold
Aa Bb 1234 ! ? &

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

A natural blend of organic and digital, daring to be different.

[Sub-Headers & Body Copy] Space Grotesk
Light Regular Medium Semi-bold Bold
Aa Bb 1234 ! ? &

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

const brand = { forest: "#26413E", lightning: "#E9E730" };

[Special Elements / Code] Space Mono
Regular Bold

Logo Variants

Three variants: Primary (horizontal), Stacked (two-line), and Icon (braces only). Always include curly braces with the logotype.

On Dark

Primary Primary logo white
Stacked Stacked logo white
Icon Icon white

On Light

Primary Primary logo forest
Stacked Stacked logo forest
Icon Icon forest

Minimum Sizes

Stacked

119 x 55px minimum

Primary

211 x 30px minimum

Icon (braces)

25 x 30px minimum

Full-width

Logo can scale to 100% width when affixed to bottom of page

Skinny Braces Variant

BracesSkinny on Light Skinny braces light
BracesSkinny on Dark Skinny braces dark
Do

Use BracesSkinny only in tight spaces: favicons, browser tabs, small UI icons, app badges.

Don't

Use BracesSkinny where the standard braces icon would fit. The standard icon is always preferred at larger sizes.

Illustrations

Campfire
Tree
Stars
Cabin
Axe and Log
Waypoints

Scenes

Forest cabin scene

Usage Rules

Logo

Do

Always include curly braces with the logotype

Do

Maintain minimum clear space around the logo

Do

Use SVG files for large-scale reproduction

Don't

Alter logo ratio, elements, or arrangement

Don't

Use logo in non-brand colors

Don't

Use logotype without the brackets

Don't

Add strokes or styles to the logo

Don't

Use logo inline with copy. Use brand typeface instead.

Don't

Scale rasterized logo until blurry. Use SVG for large scale.

Don't

Use brackets without minimum clear space between them

Don't

Change the logo typeface

Don't

Use bracket icon as a repeated pattern

Color

Don't

Use #37EEFB (Backlight Bright) on white or light backgrounds. Use #04CEDC or #03838C instead.

Do

Use Pairing B (Forest on Moonlight) for documents and reports

Do

Forest is dominant. Lightning secondary. Backlight accent only.

Documents

Do

US Letter size (8.5 x 11"). Never A4.

Do

Roboto Condensed for headers, Space Grotesk for body

Do

Section headers as full-width Forest-filled tables

Don't

Use Arial, Calibri, or other non-brand fonts as primaries

Full Brand Guidelines

20-page PDF from Friend & Fort, July 2025

Download PDF
Copied!