Design System
Styleguide
Übersicht aller Design-Tokens, Farben, Typografie und Komponenten der inszenio Website.
Farben
Brand
Primary
oklch(55% 0.18 145)
Secondary
oklch(62% 0.26 340)
Accent
oklch(72% 0.14 75)
Neutral
oklch(20% 0.015 95)
Base
Base 100
oklch(99.5% 0.002 95)
Base 200
oklch(97.5% 0.004 95)
Base 300
oklch(87% 0.01 95)
Base Content
oklch(18% 0.02 95)
Feedback
Info
oklch(52% 0.14 245)
Success
oklch(52% 0.16 150)
Warning
oklch(70% 0.16 65)
Error
oklch(52% 0.2 25)
Typografie
Headlines
Barlow Condensed
Uppercase, condensed. Weights: 500, 600, 700
700 / 600 / 500 · tracking 0.02em · leading 1.08 · uppercase
Body
Source Sans 3
Variable font, 400–700 normal + 400 italic
17px base · leading 1.65 / 1.75 · tracking -0.01em
Heading Scale
Headline Eins
3rem / 3.75rem · 700Headline Zwei
1.875rem / 2.25rem · 600Headline Drei
1.5rem · 500Headline Vier
1.25rem · 500Wir verbinden Techniken aus der Schauspielausbildung mit aktueller Organisationsentwicklung.
1.05rem (17.85px) · 400Ergänzender Text in kleinerer Größe für Beschreibungen und Metadaten.
0.875rem (14.88px) · 400Buttons
Badges & Tags
Border Radius
Selector
0.375rem
Field
0.5rem
Box
0.75rem
Full
9999px
Icons
Warum zwei Icon-Sets? Heroicons (von den Tailwind-Machern) deckt UI- und Interface-Icons ab — Pfeile, Navigation, Formulare, etc. Es enthält jedoch keine Social-Media- oder Brand-Icons. Dafür wird MDI (Material Design Icons) ergänzend eingesetzt: LinkedIn, Twitter, YouTube usw. leben nur dort.
Alternative: Phosphor Icons (~7.000 Icons) könnte beide Sets ersetzen, da es sowohl UI- als auch Brand-Icons in einem einheitlichen Stil liefert. Migration wäre via @iconify-json/ph möglich.
Heroicons
Material Design Icons (MDI)
Bilder & Media
Bildsprache: Authentisch, warm, menschlich. Fokus auf Interaktion, Körpersprache und theatrale Situationen. Keine gestellten Stock-Fotos mit aufgesetztem Lächeln. Bevorzugt: natürliches Licht, warme Töne, Bewegung, echte Workshop-/Bühnen-Momente.
Alle <img> Tags mit loading="lazy" und decoding="async". Migration zu Astro <Image> Component geplant.
Beispielbilder (Unsplash)
Workshop / Training
Interaktion, Gruppe, Lernsituation
Bühne / Performance
Theater, Spotlight, Dramatik
Business / Meeting
Führung, Zusammenarbeit, Präsentation
Keynote / Vortrag
Präsenz, Auftritt, Wirkung
Teamarbeit
Kollaboration, kreativ, natürlich
Coaching / 1:1
Vertrauen, Dialog, Entwicklung
Video Player Overlay
Video-Overlay mit Play-Button. Zentrierter weißer Kreis mit grünem Play-Icon. Hover: skaliert auf 110%, Overlay wird dunkler.
Play-Button: w-20 h-20 / md:w-24 md:h-24
Background: bg-white/90 → bg-white
Overlay: bg-black/20 → bg-black/30
Transition: all 0.3s
Seitenverhältnisse
Quadrat
Avatare, Thumbnails
Landscape
Karten, Vorschaubilder
Video
Videos, Hero-Bilder
Cinematic
Image Band, Panorama
Formulare
Standard
Validierung