Corporate Identity

sp8 CMS Design System

Alle Farben, Fonts, Tokens und Assets für das sp8 CMS Starter Kit.

Farbpalette

Primary (Electric Green)

HEX: #33d96c

HSL: 145 80% 52%

Token: --primary

Background

HEX: #0f1318

HSL: 220 20% 6%

Token: --background

Foreground

HEX: #edece8

HSL: 45 10% 93%

Token: --foreground

Card

HEX: #151a20

HSL: 220 18% 9%

Token: --card

Secondary

HEX: #1f2530

HSL: 220 15% 14%

Token: --secondary

Border

HEX: #242a33

HSL: 220 15% 16%

Token: --border

Destructive

HEX: #ef4444

HSL: 0 84% 60%

Token: --destructive

Typografie

Headlines

Space Grotesk

Gewichte: 300 · 400 · 500 · 600 · 700

font-display

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*

Body / Fließtext

Inter

Gewichte: 300 · 400 · 500 · 600

font-body

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*

Google Fonts Import

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

Glow-Effekte & Utilities

.glow-sm

box-shadow: 0 0 20px -5px hsl(145 80% 52% / 0.3)

.glow-md

box-shadow: 0 0 40px -10px hsl(145 80% 52% / 0.4)

.glow-lg

box-shadow: 0 0 80px -20px hsl(145 80% 52% / 0.25)

.border-glow

border-color: hsl(145 80% 52% / 0.3)

.text-gradient

background: linear-gradient(135deg, hsl(145 80% 52%), hsl(145 60% 70%))

CSS Variables (Copy & Paste)

:root Block

:root {
  --background: 220 20% 6%;
  --foreground: 45 10% 93%;
  --card: 220 18% 9%;
  --card-foreground: 45 10% 93%;
  --popover: 220 18% 9%;
  --popover-foreground: 45 10% 93%;
  --primary: 145 80% 52%;
  --primary-foreground: 220 20% 6%;
  --secondary: 220 15% 14%;
  --secondary-foreground: 45 10% 93%;
  --accent: 145 80% 52%;
  --accent-foreground: 220 20% 6%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 16%;
  --input: 220 15% 16%;
  --ring: 145 80% 52%;
  --radius: 0.75rem;
}