✓ Token in Zwischenablage kopiert!
Official Design System v1.0

Corporate Identity &
Glassmorphism Guide

Das visuelle Fundament für Souveranity: Entwickelt für maximale Performanz, kristalline Ästhetik und nahtlose Barrierefreiheit in Light und Dark Mode.

1. Offizielle Logo-Ausprägungen

Das Logo besteht aus SVG/Logo.svg (Signet) und SVG/Text.svg (Wortmarke).

Souveranity Icon Only
1. Nur Logo (Icon-Only)
Favicons, App-Icons & Buttons
Souveranity Icon Souveranity Text
2. Horizontale Kombination
Text ist 50% so hoch wie das Logo
Souveranity Icon Souveranity Text
3. Vertikale Kombination
Logo ist 50% so breit wie der Text

Großformat-Darstellung (HD Preview)

Souveranity Icon Souveranity Text
Souveranity Icon Souveranity Text

Proportions- & Größenregeln

  • • Variante 2 (Horizontal): Die Wortmarke SVG/Text.svg ist halb so hoch (50%) wie das Signet SVG/Logo.svg (Höhe(Text) = 0.5 × Höhe(Logo)).
  • • Variante 3 (Vertikal): Das Signet SVG/Logo.svg ist halb so breit (50%) wie die Wortmarke SVG/Text.svg (Breite(Logo) = 0.5 × Breite(Text)).

2. Farbwelt & Design Tokens

Klicke auf einen Farb-Code, um das CSS-Token direkt in die Zwischenablage zu kopieren.

Primary Glow
Cyan Glow
Freedom, Innovation, Primary Accent
HEX: #00F2FE 📋
Mid Transition
Electric Blue
Trust, Connectivity, Link States
HEX: #3B82F6 📋
Brand Base
Vivid Purple
Depth, Sovereignty, Focus Rings
HEX: #9333EA 📋
Full Gradient
Primary Gradient
Hero Banners, Primary Buttons
CSS Gradient Token 📋
Dark Theme
Cosmic Black Base
Dark Mode Canvas Background
HEX: #08090E 📋
Light Theme
Crystal Frosted Base
Light Mode Canvas Background
HEX: #F4F6FB 📋

3. Typografie (Google Fonts)

Kombination aus Plus Jakarta Sans (Headlines) und Inter (Fließtext).

Hero Display
Plus Jakarta Sans 800
Fluid: 40px – 68px
Souveräne Datenkontrolle.
Heading H1
Plus Jakarta Sans 700
Fluid: 28px – 44px
Zukunftssichere Infrastruktur für Next-Gen KI.
Heading H2
Plus Jakarta Sans 600
Fluid: 24px – 32px
Kristalline Glas-Komponenten im Live-Einsatz
Body Text
Inter 400 Regular
16px / 1.6 Line-Height
Souveranity kombiniert modernste Verschlüsselung, dezentrale Architektur und intuitive Interaktionen. Durch die fließenden Glasmorphism-Ebenen bleiben Datenstrukturen transparent und visuell greifbar.
Code Specimen
JetBrains Mono 400
const souveranity = new SovereignAI({ theme: 'glassmorphism', mode: 'auto' });

4. Interaktive UI-Komponenten

Vorschau aller Interaktions-Elemente und Formulare in der aktuellen Theme-Farbe.

Button Hierarchie

Eingabefelder & Formulare

Status Badges & Indikatoren

System Online Encryption Active WCAG 2.1 Compliant OLED Dark Mode