Code of the North — Brand Kit

Color Palette

Name	Hex	RGB	CSS Variable
Midnight BACKGROUND	`#181E24`	`rgb(24,30,36)`	`--color-midnight`
Midnight Shade 1 SECONDARY	`#313D49`	`rgb(49,61,73)`	`--color-midnight-shade-1`
Midnight Shade 2 SECONDARY	`#495C6E`	`rgb(73,92,110)`	`--color-midnight-shade-2`
Forest PRIMARY	`#26413E`	`rgb(38,65,62)`	`--color-forest`
Forest Shade 1 SECONDARY	`#3C6762`	`rgb(60,103,98)`	`--color-forest-shade-1`
Forest Shade 2 SECONDARY	`#538D87`	`rgb(83,141,135)`	`--color-forest-shade-2`
Lightning ACCENT	`#E9E730`	`rgb(233,231,48)`	`--color-lightning`
Backlight (on dark) ACCENT	`#37EEFB`	`rgb(55,238,251)`	`--color-backlight--on-dark`
Backlight (on light) ACCENT	`#03838C`	`rgb(3,131,140)`	`--color-backlight--on-light`
Moonlight BACKGROUND	`#EEE5E9`	`rgb(238,229,233)`	`--color-moonlight`
White BACKGROUND	`#FFFFFF`	`rgb(255,255,255)`	`--color-white`

Typography

Aa

Heading: Roboto Condensed

Aa

Body: Space Grotesk

Voice & Tone

Digital-forward, guiding, outdoorsy

✓ Write like this

Blend organic and digital language — nature metaphors paired with technical NetSuite terminology
Use brackets { } to emphasize points or sign off on documents
Speak as a guide helping clients navigate complexity ('out of the woods')
Use the brand typeface when referencing the name inline, not the logo

✗ Avoid

Alter the logo ratio, elements, colors, or arrangement
Use the logotype without its brackets, or use brackets as a repeated pattern
Place the logo on low-contrast backgrounds or inline with body copy
Scale rasterized logos until pixelated — use SVG for large sizes

Logo Assets

primary ↓reversed ↓mark ↓stacked ↓stacked_reversed ↓mark_forest ↓illustration_deer1 ↓illustration_deer2 ↓

CSS Tokens

Live URL: [slug].chatmybrand.com/tokens.css

/* Code of the North — Brand Tokens */
/* Generated by ChatMyBrand · 2026-07-06 */

:root {
  --color-midnight: #181E24;
  --color-background: #181E24;
  --color-midnight-shade-1: #313D49;
  --color-secondary: #313D49;
  --color-midnight-shade-2: #495C6E;
  --color-forest: #26413E;
  --color-primary: #26413E;
  --color-forest-shade-1: #3C6762;
  --color-forest-shade-2: #538D87;
  --color-lightning: #E9E730;
  --color-accent: #E9E730;
  --color-backlight-on-dark: #37EEFB;
  --color-backlight-on-light: #03838C;
  --color-moonlight: #EEE5E9;
  --color-white: #FFFFFF;
  --font-heading: 'Roboto Condensed', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;
}