Prosint ← Zurück zur Übersicht
Design System · v1.0

Style Guide.

Brutalist-Neu: Raw, präzise, futuristisch. Space Grotesk für Headlines, Poppins für Body, leuchtende Akzente in Gelb und Magenta.

Colors — 01

Farbpalette

Fixierte Markenfarben mit abgeleiteten Varianten. Gelb und Magenta als leuchtende Akzente — sparsam einsetzen.

Primary
Primary Blue
#3b82f6
Deep
Primary Deep
#1d4ed8
Accent
Accent Yellow
#ffff00
Accent
Accent Magenta
#ff00ff
Secondary
Secondary Amber
#f59e0b
Success
Success Green
#10b981
Text
Text
#1a1a1e
BG
Background
#f4f3f1
Typography — 02

Schriftarten

Drei Fonts für klare Hierarchie: Space Grotesk für Headlines, Poppins für Body, JetBrains Mono für Code.

H1 — Space Grotesk 700
Automate The Boring Stuff!
3.5rem / 700 / -0.02em / 1.1
H2 — Space Grotesk 600
Public Relations & Open Source Intelligence
2rem / 600 / normal / 1.2
H3 — Space Grotesk 500
Strategische PR-Beratung
1.25rem / 500 / normal / 1.3
Body — Poppins 300
PR-Beratung, Automatisierung und Web-Entwicklung. Die Schnittstelle zwischen Kommunikation und Technik. Wir verbinden strategische PR mit technischer Exzellenz.
1rem / 300 / normal / 1.6
Body Bold — Poppins 500
Wichtige Hervorhebungen und Zwischenüberschriften im Fließtext.
1rem / 500 / normal / 1.6
Mono — JetBrains Mono 400
npx @google/design.md lint DESIGN.md
0.875rem / 400 / normal / 1.5
Label — Space Grotesk 600 Caps
Kategorie · Tag · Label
0.75rem / 600 / 0.08em / uppercase
Components — 03

Buttons

Vier Button-Varianten. Primary für Hauptaktionen, Accent für den wichtigsten CTA, Outline für sekundäre Aktionen.

Button-Varianten
Primary CTA Accent CTA Outline Ghost →

Hover: Primary → Dunkel | Accent → Magenta | Outline → Füllung | Ghost → Border

Badges — 04

Badges & Tags

Kategorie-Labels und Status-Indikatoren. Pill-Form (9999px).

Badge-Varianten
PR-Beratung Neu Beta Live Kategorie

Blau = Standard | Gelb = Highlight | Magenta = Special | Grün = Status | Outline = Neutral

Inputs — 05

Formulare

Eingabefelder mit 0px Rounded. Fokus-Zustand mit gelbem Border.

Text Input
Email Input

Focus: 2px solid Yellow Border | Placeholder: text-micro

Shapes — 06

Formen — Brutalist

0px Rounded überall. Keine abgerundeten Ecken — pure Geometrie.

Rounded Tokens

0px — DefaultButtons, Cards, Inputs, alles
Accent YellowFür Highlights und Eye-Catcher
Accent MagentaFür Hover und besondere Aktionen

Border-Style

2px solidButtons und interaktive Elemente
1px solidCards und Container
Spacing — 07

Abstände

4px Baseline-Skala. Konsistente Abstände überall.

xs
4px
sm
8px
md
16px
lg
24px
xl
48px
section
80px
Effects — 08

Effekte

Minimale Effekte. Subtile Transitions, keine weichen Schatten.

Hover-Effects (drüberfahren)
translateY(-2px)
Border-Highlight
Focus: Tab ↹

Transition: 150-200ms ease-out | Focus: 2px solid Yellow | Keine weichen Schatten!

Icons — 09

Icon-System

Phosphor Icons (Outline Style). SVG-basiert, skalierbar, konsistent. Keine Emojis!

Navigation

☰ ← → ✕ ▾ ⌂

Menu, Back, Forward, Close, Expand, Home

Aktionen

+ ✎ 🗑 ⌕ ▿ ⤓

Add, Edit, Delete, Search, Filter, Download

Status

✓ ⚠ ✕ ⓘ ↻ 🔒

Success, Warning, Error, Info, Loading, Lock

Icon-Regeln
✅ Do:
  • SVG oder Unicode-Zeichen
  • Outline-Style (nicht gefüllt)
  • 20px Standardgröße
  • currentColor für Farbe
❌ Don't:
  • Emoji als Icons
  • Gefüllte/Filled Icons
  • Rastergrafiken (PNG)
  • Mehr als 3 Größen pro Seite
Patterns — 10

Patterns & Effekte

Stileffekte für Web-Elemente. Brutalist-Neu mit futuristischen Akzenten.

Brutalist-Neu (Basis)

Merkmale:

  • 0px Rounded — keine Ecken
  • Harte Borders (1-2px solid)
  • Keine weichen Schatten
  • Monospace-Akzente
  • Raw Typography

CSS:

border-radius: 0; border: 2px solid var(--text);

Neon Glow (Akzente)

Für: Hover-States, besondere Hervorhebungen

CSS:

box-shadow: 0 0 15px rgba(255,255,0,0.3);
Neon Glow Beispiel

Scanlines (Retro-Tech)

Für: Hintergrund-Texturen, Hero-Sektionen

CSS:

background: repeating-linear-gradient(...)
Scanline-Overlay Beispiel

Gradient Akzent

Für: Feature-Highlights, besondere Cards

CSS:

background: linear-gradient(135deg, #ffff00, #ff00ff);
Yellow → Magenta Gradient
Transition-Standard

Alle interaktiven Elemente:

transition: all 150ms ease-out;

Hover-Translate:

transform: translateY(-2px);

Focus-Outline:

outline: 2px solid var(--accent-yellow); outline-offset: 2px;
Guidelines — 11

Do's & Don'ts

Regeln für konsistente Anwendung des Design Systems.

✅ Do

  • 0px Rounded überall verwenden
  • Space Grotesk für Headlines
  • Poppins für Body-Text
  • JetBrains Mono für Code
  • Gelb + Magenta sparsam als Akzente
  • Token-Referenzen statt Hex-Codes
  • WCAG-Kontrast prüfen (4.5:1 minimum)
  • SVG statt Emoji als Icons

❌ Don't

  • Abgerundete Ecken (rounded > 0px)
  • Weiche Schatten (box-shadow mit blur)
  • Gradient-Overlays
  • Emoji als Icons
  • AI-typische Lila/Rosa Gradienten
  • Gelb/Magenta als großen Flächen-Hintergrund
  • Mehr als 4 Farben pro Seite
  • Reines Schwarz (#000) oder Weiß (#fff)