Core Palette
Primary Maroon
#47001E
Navigation, headers, primary CTAs
Nordic Light
#F5F5F5
Page backgrounds, content cards
Neutral Gray
#B0BEC5
Form fields, dividers, secondary text
Accents
Forest Green
#2E7D32
Success alerts, eco-feature badges
Sunset Orange
#F28C38
Secondary CTAs, energy highlights
Contextuals
Cloud Blue
#3C91E6
Info alerts, cloud service cards, trygghetsavtal, branding
Fjord Blue
#4A636E
Section backgrounds, subtle highlights, body text
Light Gray
#D3DDE3
Secondary text/badges on dark or gradient backgrounds
Usage Matrix
| Color | Light Background | Dark Background | Microinteractions | Never With |
|---|---|---|---|---|
| Primary Maroon | Navigation, headers, primary CTAs | Body text, form fields | Hover (#3C001A), Disabled (#7E2A3B) | Light text on light backgrounds |
| Nordic Light | Page backgrounds, content cards | Section highlights | - | Light Gray (#D3DDE3) text |
| Neutral Gray | Form fields, dividers, secondary text | Subtle backgrounds | - | Overuse as primary element |
| Forest Green | Success alerts, eco-feature badges | Sustainability section highlights | Success state (#1B5E20) | Overuse with Orange in single layout |
| Sunset Orange | Secondary CTAs, energy highlights | Interactive hover states | Hover (#D9772A), Disabled (#F4A261) | Overuse with Green in single layout |
| Cloud Blue | Info alerts, cloud service cards, trygghetsavtal, branding | Trust indicators, security badges, logo | Loading (#64B5F6), Error (#D81B60) | More than 2 accents per layout |
| Fjord Blue | Section backgrounds, subtle highlights, body text | Card backgrounds, secondary panels | - | Overuse with Cloud Blue |
| Light Gray | Secondary text/badges on dark or gradient backgrounds | Secondary text/badges | - | Nordic Light (#F5F5F5) backgrounds |
General Guidelines
Rules
- • Max 2 accents per layout
- • Use Maroon/Light/Neutral Gray as foundation
- • Ensure contrast ratios (4.5:1 minimum)
- • Use Cloud Blue for branding; Fjord Blue for depth
- • Use Light Gray only on dark or gradient backgrounds
Caution
- • Avoid Green + Orange in equal dominance
- • Light Gray on Nordic Light fails contrast
- • Overuse of blues can feel cold
- • Use gradients sparingly for impact
Best Practice
- • Maroon + Light/Neutral Gray for warmth and clarity
- • Green for eco-positive states
- • Orange for energy/innovation highlights
- • Cloud/Fjord Blue for trust and Nordic depth
Typography and Logo Sizing
Typography
Website (rem, base 16px)
- • H1: 3rem (48px, hero titles)
- • H2: 2rem (32px, section headers)
- • H3: 1.5rem (24px, subheadings)
- • Body: 1rem (16px, paragraphs, WCAG minimum)
- • Small: 0.875rem (14px, captions, footnotes)
- • Font: Inter (Regular 400, Bold 700) or IBM Plex Sans
React Native App (pt)
- • H1: 24pt (~24px, screen titles)
- • H2: 20pt (~20px, section headers)
- • H3: 16pt (~16px, subheadings)
- • Body: 14pt (~14px, paragraphs, WCAG minimum)
- • Small: 12pt (~12px, captions, footnotes)
- • Font: Inter (Regular 400, Bold 700) or IBM Plex Sans
Logo Sizing
Website (px)
- • Small: 100px wide (footers, nav bars)
- • Medium: 150px wide (standard headers)
- • Large: 200px wide (hero sections)
- • Minimum clear space: 20px around logo
React Native App (pt)
- • Small: 80pt wide (settings, footers)
- • Medium: 120pt wide (headers, splash screens)
- • Large: 160pt wide (onboarding, promos)
- • Minimum clear space: 16pt around logo
Use responsive sizing (e.g., vw/vh for web, dp for app) to adapt to screen sizes. Test readability in Nordic lighting.
Text and Logo Usage
Logo on Light BG
Primary Maroon logo on Nordic Light for headers (7:1 contrast, like Spotify’s green).
Logo on Dark BG
Nordic Light logo on Maroon for hero sections (8.5:1 contrast, like Tesla’s white).
Text on Nordic BG
Energy Savings Alert
You saved 20% today! (Maroon heading, Fjord Blue body, 5:1 contrast).
Success Badge
Light Gray badge on Forest Green for alerts (8:1 contrast, like Patagonia).
Gradient Section
Cloud Service Highlight
Cloud Blue-to-Fjord Blue gradient for trust (8:1 contrast, like Nest).
Examples ensure WCAG 4.5:1 contrast and align with Spotify (clear branding) and Patagonia (eco-focus). Test in Nordic lighting across devices.
Button Best Practices
Primary Button
Maroon primary CTA (7:1 contrast) with darker hover (#3C001A) and disabled states (like Tesla).
Secondary Button
Sunset Orange secondary CTA (4.7:1 contrast) with hover and disabled states (like Nest).
Buttons use high-contrast colors, hover, and disabled states for clear feedback, inspired by Patagonia (action-driven CTAs) and Spotify (minimalist interactions). Test across devices and Nordic lighting.
Platform Usage Guide
Website
- • Use Primary Maroon (#47001E) for CTAs, headers
- • Nordic Light (#F5F5F5) for page backgrounds
- • Fjord Blue (#4A636E) for body text, section backgrounds
- • Max 2 accents (e.g., Sunset Orange, Forest Green)
- • Inter font, 16px minimum body text
- • Logo: Medium (150px) for headers, Large (200px) for hero
- • Test responsiveness across desktop and mobile
React Native App
- • Use Primary Maroon (#47001E) for CTAs, headers
- • Nordic Light (#F5F5F5) for screen backgrounds
- • Fjord Blue (#4A636E) for body text, card backgrounds
- • Touch targets: Min 44pt x 44pt for accessibility
- • Inter font, 14pt minimum body text
- • Logo: Medium (120pt) for headers, Large (160pt) for splash
- • Use safe area insets for iOS/Android
Social Media (IG, TikTok, FB)
- • Cloud Blue (#3C91E6) logo on Nordic Light for posts
- • Sunset Orange (#F28C38) for CTAs (e.g., “Swipe Up”)
- • Cloud Blue-to-Fjord Blue gradient for Stories/Reels
- • Inter font, Bold 700, min 16px/14pt for text
- • Logo: Small (100px/80pt) for profile, Medium (150px/120pt) for posts
- • Use square (1080x1080px) or vertical (1080x1920px) formats
- • Test visibility on high-brightness mobile screens
Follow platform-specific guidelines to maintain brand consistency. Test across devices and lighting for readability and impact, inspired by Patagonia (eco-focus) and Spotify (vibrant social presence).