Code of the North

:root {
  --color-midnight: #181E24;
  --color-midnight-shade-1: #313D49;
  --color-midnight-shade-2: #495C6E;
  --color-forest: #26413E;
  --color-forest-shade-1: #3C6762;
  --color-forest-shade-2: #538D87;
  --color-lightning: #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;
}

{
  "client": "Code of the North",
  "tagline": "",
  "colors": [
    {
      "name": "Midnight",
      "hex": "#181E24",
      "role": "background"
    },
    {
      "name": "Midnight Shade 1",
      "hex": "#313D49",
      "role": "secondary"
    },
    {
      "name": "Midnight Shade 2",
      "hex": "#495C6E",
      "role": "secondary"
    },
    {
      "name": "Forest",
      "hex": "#26413E",
      "role": "primary"
    },
    {
      "name": "Forest Shade 1",
      "hex": "#3C6762",
      "role": "secondary"
    },
    {
      "name": "Forest Shade 2",
      "hex": "#538D87",
      "role": "secondary"
    },
    {
      "name": "Lightning",
      "hex": "#E9E730",
      "role": "accent"
    },
    {
      "name": "Backlight (on dark)",
      "hex": "#37EEFB",
      "role": "accent"
    },
    {
      "name": "Backlight (on light)",
      "hex": "#03838C",
      "role": "accent"
    },
    {
      "name": "Moonlight",
      "hex": "#EEE5E9",
      "role": "background"
    },
    {
      "name": "White",
      "hex": "#FFFFFF",
      "role": "background"
    }
  ],
  "fonts": {
    "heading": "Roboto Condensed",
    "body": "Space Grotesk",
    "mono": "Space Mono"
  },
  "voice": {
    "tone": "Digital-forward, guiding, outdoorsy",
    "attributes": [
      "Modern",
      "Organic",
      "Daring",
      "Technical",
      "Approachable"
    ],
    "do": [
      "Blend organic and digital language \u2014 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"
    ],
    "dont": [
      "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 \u2014 use SVG for large sizes"
    ]
  },
  "logo": {
    "notes": "Primary logo is '{CODE OF THE NORTH}' in Lightning yellow, always enclosed in custom pixelated brackets. Variations include Primary (horizontal), Stacked, and Icon (brackets only). Maintain minimum clear space equal to the bracket height around all sides. Minimum sizes: 119x55px (stacked), 211x30px (horizontal), 25x30px and 64x64px (icon). Logo may hug page bounds at 100% when affixed to the bottom. Use SVG for large-scale applications.",
    "assets": {
      "primary": "https://codeofthenorth.chatmybrand.com/assets/logo-primary.svg",
      "reversed": "https://codeofthenorth.chatmybrand.com/assets/logo-reversed.svg",
      "mark": "https://codeofthenorth.chatmybrand.com/assets/logo-mark.svg",
      "stacked": "https://codeofthenorth.chatmybrand.com/assets/logo-stacked.svg",
      "stacked_reversed": "https://codeofthenorth.chatmybrand.com/assets/logo-stacked-reversed.svg",
      "mark_forest": "https://codeofthenorth.chatmybrand.com/assets/logo-mark-forest.svg",
      "illustration_deer1": "https://codeofthenorth.chatmybrand.com/assets/illustration-deer1.svg",
      "illustration_deer2": "https://codeofthenorth.chatmybrand.com/assets/illustration-deer2.svg"
    }
  },
  "industry": "A digital-forward, modern NetSuite consulting/support agency that helps clients implement, troubleshoot, and optimize NetSuite ERP systems. Based in Minneapolis, MN. Blends outdoorsy North Woods aesthetic with developer/technical identity.",
  "extraction_notes": "Color palette includes shade variants under Midnight and Forest that are listed without explicit names \u2014 labeled as 'Shade 1/2' here. Backlight has two hex values specified for use on dark vs. light backgrounds. Voice/tone attributes are inferred from brand elements page and tagline rather than an explicit voice section. Roboto Condensed is designated for Headers, Space Grotesk for Sub-headers & Body, and Space Mono for special/technical elements (used heavily in the guide's UI captions)."
}