Visuelle Verifikation aller Components
1 · Logo-Varianten
Logo — 200 / 400 / 600 px (Breite)
LogoMark — 100 / 200 / 300 px
LogoWordmark — 200 / 400 px
LogoAnimated (Hover für stärkeres Schweben + Glow)
monochrome
monochrome color-mode (eine Farbe)
2 · Typography
Display 6xl
Display 5xl
Display 4xl
Body xl — Order from Complexity (20px)
Body lg — Order from Complexity (18px)
Body base — Order from Complexity (16px)
Body sm — Order from Complexity (14px)
Body xs — Order from Complexity (12px)
const auth = new SyntropiaAuth({ appSlug: "cockpit" });3 · Color-Palette
brand
brand.deep
#0b2a56
brand.dark
#095284
brand.mid
#086e9c
brand.light
#0a8fb6
brand.cyan
#09aac9
brand.accent
#00cee7
backgrounds & borders
bg.deep
#020611
bg.base
#050B18
bg.elevated
#0a1428
border.default
rgba(46, 117, 182, 0.3)
border.accent
rgba(0, 206, 231, 0.4)
semantic
semantic.success
#00E5A0
semantic.warning
#FFA726
semantic.danger
#FF5252
glows
glow.cyan
glow.cyanIntense
glow.cyanSoft
5 · Cards
Default
variant=default
Elevated
variant=elevated
Interactive
Hover mich
Glow
glow=true
Padding sm
Padding md
Padding lg
6 · Inputs
Wir senden dir einen Code.
Pflichtfeld
CodeInput
7 · Badges
defaultaccentsuccesswarningdanger
smmd
OperationalDegraded
8 · Utility-Components
GlowDot
Divider
Sektion
Skeleton
Spinner
9 · Table
(Header „E-Mail"/„Rolle" sind sortierbar; Zeilen-Hover zeigt Cyan-Glow)
10 · Toast
11 · Page Background
Diese gesamte Seite ist in einer <PageBackground> gewrappt (Gradient + dezente Cyan-Glow-Spots). Demo des intensiven Modus mit Scanline: