Skip to content
Brand Kit logo
Technical page · Brand Kit and Theme Settings (spike 41020)
hstest.malmstolen.com

1. Elevate's colours ← Brand Kit

Each of Elevate's colours inherits a Brand Kit value (fields.json). They follow the Brand only while they're unsaved in Theme Settings.

Brand Kit primaryColor
#FFFFFF
→
Elevate Base color 1
#FFFFFF
✓ follows the Brand Kit
Brand Kit secondaryColor
#2E3242
→
Elevate Base color 3
#2E3242
✓ follows the Brand Kit
Brand Kit accentColor3
#F7CAC9
→
Elevate Accent color 1
#F7CAC9
✓ follows the Brand Kit
Brand Kit accentColor2
#F5726C
→
Elevate Accent color 2
#F5726C
✓ follows the Brand Kit
Brand Kit accentColor1
#4061AD
→
Elevate Accent color 3
#4061AD
✓ follows the Brand Kit
Elevate primary buttonLight section 3Dark section

2. Brand Kit font picked in Theme Settings

Elevate's base font as set in the Malmstolen Theme's Theme Settings, drawn in Elevate's own font variables.

Base font: Circular Light (BRANDING)✓ a Brand Kit font
Brand Kit fonts: Circular Bold, Circular Light
Malmstolen & Flokk — Aa Gg Rr 0123

The quick brown fox jumps over the lazy dog. If this isn't in the base font above, the font file isn't loaded.

3. Brand Kit primary colour in a theme field and a module field

Both inherit brand_settings.primaryColor. The theme field follows the page's Brand; the module field shows the page's Brand in the editor but the default Brand (Flokk) on the live page.

brand_settings.primaryColor
#FFFFFF
Theme field
#FFFFFF
Module field
#0E352D
✓ theme field follows the Brand✗ module field doesn't follow the Brand

4. Everything brand_settings holds

The page Brand's brand_settings as HubL prints it (pprint).

Show brand_settings
(BrandSettings: {
  "accentColor1" : {
    "hex" : "#4061AD"
  },
  "accentColor2" : {
    "hex" : "#F5726C"
  },
  "accentColor3" : {
    "hex" : "#F7CAC9"
  },
  "bodyFont" : {
    "font" : "Circular Light",
    "fontSet" : "BRANDING"
  },
  "colors" : [ {
    "hex" : "#FFFFFF"
  }, {
    "hex" : "#ECECEC"
  }, {
    "hex" : "#F1EDE9"
  }, {
    "hex" : "#57585A"
  }, {
    "hex" : "#B2CEE5"
  }, {
    "hex" : "#F59088"
  } ],
  "fallbackFont" : {
    "font" : "tahoma, arial, helvetica, sans-serif",
    "fontSet" : "DEFAULT"
  },
  "favicon" : {
    "domain" : null,
    "name" : "Malmstolen symbol",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-symbol.jpg"
  },
  "favicons" : [ {
    "domain" : null,
    "name" : "Malmstolen symbol",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-symbol.jpg"
  } ],
  "fonts" : [ {
    "font" : "Circular Bold",
    "fontSet" : "BRANDING"
  }, {
    "font" : "Circular Light",
    "fontSet" : "BRANDING"
  } ],
  "logo" : {
    "alt" : null,
    "domain" : null,
    "height" : 270,
    "link" : "",
    "name" : "Malmstolen logo",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-logo.png",
    "width" : 1200
  },
  "logos" : [ {
    "alt" : null,
    "domain" : null,
    "height" : 270,
    "link" : "",
    "name" : "Malmstolen logo",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-logo.png",
    "width" : 1200
  } ],
  "primaryColor" : {
    "hex" : "#FFFFFF"
  },
  "primaryFavicon" : {
    "domain" : null,
    "name" : "Malmstolen symbol",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-symbol.jpg"
  },
  "primaryFont" : {
    "font" : "Circular Bold",
    "fontSet" : "BRANDING"
  },
  "primaryLogo" : {
    "alt" : null,
    "domain" : null,
    "height" : 270,
    "link" : "",
    "name" : "Malmstolen logo",
    "src" : "https://149544371.fs1.hubspotusercontent-eu1.net/hubfs/149544371/malmstolen-logo.png",
    "width" : 1200
  },
  "secondaryColor" : {
    "hex" : "#2E3242"
  }
})