Northern Lights Design System — Brand & Color Reference

Dark Light

Color Palette

Click any color to copy the HEX code to clipboard.

Northern Sky — Backgrounds

Primary BG (Dark)
#1c202a
Secondary BG (Dark)
#181b24
Deepest (Dark)
#12141c
Primary BG (Light)
#f6f8fb
Secondary BG (Light)
#e9eef5
Card BG (Light)
#ffffff

Aurora Emerald — Primary Accent

Emerald 300
#6ee7b7
Emerald 400
#34d399
Emerald 500 ★
#10b981
Emerald 600
#059669

Arctic Gold — Secondary Accent

Gold 300
#fcd34d
Gold 400
#fbbf24
Gold 500 ★
#f59e0b
Gold 600
#d97706

Funktionaaliset värit

Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#3b82f6

Page-Specific Hero Colors

Each application page has its own unique color theme.

Tasks
Toiminta, valmistuminen
Primary
#10b981
Hover
#34d399
OKRs
Fokus, mittaaminen
Primary
#14b8a6
Hover
#2dd4bf
KPIs
Energia, pulssi
Primary
#f59e0b
Hover
#fbbf24
Projects
Rakentaminen, prosessi
Primary
#3b82f6
Hover
#60a5fa
Sources
Tieto, älykkyys
Primary
#8b5cf6
Hover
#a78bfa
Strategy
Visio, suunnittelu
Primary
#6366f1
Hover
#818cf8
Team
Ihmiset, yhteisö
Primary
#f43f5e
Hover
#fb7185
Chat
Kommunikaatio
Primary
#06b6d4
Hover
#22d3ee
Settings
Konfiguraatio
Primary
#64748b
Hover
#94a3b8

Typografia

Inter font across all size classes. Weights: 400 (body), 500 (medium), 600 (semibold), 700 (bold).

4xl / 36px
font-weight: 700
Strategia arjen teoiksi
3xl / 30px
font-weight: 700
Dashboard Overview
2xl / 24px
font-weight: 600
OKR-tavoitteet Q1 2026
xl / 20px
font-weight: 600
Projektin eteneminen
lg / 18px
font-weight: 500
Tehtävän otsikko
base / 16px
font-weight: 400
Standard body text for UI and documentation.
sm / 14px
font-weight: 400
Secondary text, such as descriptions and metadata.
xs / 12px
font-weight: 400
Smallest text: timestamps, badges, captions

Lasi- ja Glow-efektit

Glassmorphism and ambient lighting create a sense of depth.

Glass Dark

Dark translucent surface for dark mode.

background: rgba(24, 27, 36, 0.65)
backdrop-filter: blur(20px)

Glass Light

Light translucent surface for light mode.

background: rgba(255, 255, 255, 0.8)
backdrop-filter: blur(20px)

Emerald Glow

Green ambient glow for emphasis.

box-shadow: 0 0 40px rgba(16, 185, 129, 0.18)

Gold Glow

Gold glow for premium elements.

box-shadow: 0 0 35px rgba(245, 158, 11, 0.18)

Logo Assets

Official logo files. Click a card to download the SVG file.

Full Logo

White For dark backgrounds
Colored For light backgrounds

Symbol

Compact version for tight spaces, app icons, and profile avatars.

White
Colored

Logo Usage Guidelines

Allowed
  • White logo on dark backgrounds
  • Colored logo on light backgrounds
  • Sufficient clear space (min. symbol height)
  • Scale proportionally
Not Allowed
  • Don't alter logo colors
  • Don't stretch or distort
  • Don't add effects (shadow, glow)
  • Don't place on busy backgrounds

Gradients

Gradients are used sparingly for highlights and hero elements. Click to copy CSS code.

Hero Background Gradients

Used for page hero section backgrounds. Subtle, translucent effect.

Emerald Hero BG
linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.03) 100%)
Gold Hero BG
linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.03) 100%)
Blue Hero BG
linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.03) 100%)
Purple Hero BG
linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(167, 139, 250, 0.03) 100%)

Icon Background Gradients

Used for icon wrapper backgrounds. Stronger color than hero BG.

Emerald Icon BG
linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(52, 211, 153, 0.12) 100%)
Gold Icon BG
linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(251, 191, 36, 0.12) 100%)

Text Gradients

Used only in branding elements like the logo. Not for body text.

Heading
Emerald Text Gradient
linear-gradient(135deg, #10b981 0%, #34d399 100%)

Gradient Usage Guidelines

Use emerald gradients as accents, not as heavy backgrounds. They should feel subtle and premium.

Do
  • Use only tokens: var(--emerald-400/500/600)
  • For accents: icons, badges, progress bars
  • Direction: 135deg for badges, 90deg for progress
  • Light theme: --emerald-400/500 + dark text
  • Max one gradient layer per element
Don't
  • Don't hardcode hex values: #10b981
  • Don't use as body text color
  • Don't use in button backgrounds
  • Don't stack multiple gradients
  • Don't use high opacity values

Do's & Don'ts

Key rules for maintaining consistent brand identity.

✓ Do This
  • Always use CSS variables (--emerald-500)
  • Button font-weight: 400 or 500
  • Icons always with fa-light weight
  • Test in both dark and light mode
  • Use Inter font everywhere
  • Border radius: 8px (sm), 12px (md), 16px (lg)
  • Touch target minimum 44×44px
✗ Avoid This
  • Hardcoded color values (#10b981)
  • Bold buttons (font-weight: 600+)
  • fa-solid or fa-regular icons
  • Too light text in light mode
  • Fonts other than Inter
  • Sharp corners (0px radius)
  • Small touch targets on mobile

Quick Reference

Spacing (8px grid)

Tight8px
Standard16px
Relaxed24px
Section32px

Border Radius

Small8px
Medium12px
Large16px
Full9999px

Animaatiot

Fast150ms
Normal200ms
Slow300ms
Easingease-out

Breakpoints

Mobile<768px
Tablet768-1024px
Desktop>1024px

Complete Color Palette

All available color tokens. Click to copy.

Northern Sky

brand-blue-100
brand-blue-200
brand-blue-300
brand-blue-400
brand-blue-500
brand-blue-550
brand-blue-600
brand-blue-700

Neutrals

white
grey-300
grey-400
grey-500
grey-600
grey-700

Aurora Emerald

emerald-300
emerald-400
emerald-500
emerald-600

Arctic Gold

gold-300
gold-400
gold-500
gold-600

Functional: Yellow / Red / Blue

yellow-300
yellow-400
yellow-500
yellow-600
red-300
red-400
red-500
red-600
blue-300
blue-400
blue-500
blue-600

Functional: Purple / Teal / Cyan

purple-400
purple-500
purple-600
teal-300
teal-400
teal-500
teal-600
cyan-400
cyan-500
cyan-600

Functional: Indigo / Orange / Rose / Amber

indigo-400
indigo-500
indigo-600
orange-300
orange-400
orange-500
orange-600
rose-300
rose-400
rose-500
rose-600
amber-400
amber-500
amber-600
Copied to clipboard!