SEO Supercharged
The visual DNA of our application. Consistency is key to recognition and trust. Here you find everything you need.
Active Style: Energetic, Reliable, Gold
1. Logo & Identity
The core of our visual presentation for style:
Mark (Icoon)
Wordmark (Tekst)
Lockup Horizontal
Lockup Stacked
2. Color Palette
Active style:
Brand (Amber) Colors
50
#fffbeb
Subtle Background300
#fcd34d
Accents400
#fbbf24
Icons & Highlights500
#f59e0b
Primary Action600
#d97706
Hover StatesBlue Colors
50
#eff6ff
Subtle Background300
#93c5fd
Accents400
#60a5fa
Icons & Highlights500
#3b82f6
Secondary Action600
#2563eb
Hover StatesRed Colors
50
#fef2f2
Subtle Background300
#fca5a5
Accents400
#f87171
Icons & Highlights500
#ef4444
Tertiary Action600
#dc2626
Hover StatesNeutral / Dark Mode
Night 950
#000000
Header / FooterNight 900
#0a0a0a
Main BackgroundNight 800
#1a1a1a
Cards / PanelsSlate 700
#334155
BordersSlate 400
#94a3b8
Body Text3. Typography
Clean, modern and readable. We use the Inter font family.
Inter
The primary font family. Used for headings, body text and UI elements. Weights: Light (300), Regular (400), Medium (500), Bold (700), Black (900).
LIST
- Consistent branding across channels
- Professional visual identity
- Memorable brand experience
H1 DISPLAY
The Quick Brown Fox
H2 HEADING
Jumps Over The Lazy Dog
H3 HEADING
SEO Supercharged Generator
BODY TEXT
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
4. UI Elements
Building blocks for a consistent interface in Storm-style.
Buttons
Inputs
Cards
Feature Card
Use Night-900 as background on Night-800 containers for depth. Borders always Slate-700 or Slate-800.
Status
SEO Supercharged Design System v1.0
