Design System
Styleguide
Jede Komponente in beiden Themes. Links Dark, rechts Light — dieselbe Markup, nur andere Tokens. Genau das ist der Kern des Systems: der Röhreneffekt ist im Dark Mode Licht und im Light Mode Relief.
Gegenüberstellung
Dark und Light,
Seite an Seite
Möglich über die Klassen .theme-dark und .theme-light: Custom Properties
werden vererbt, und der nächstgelegene Vorfahr, der sie deklariert, gewinnt.
Dark — Standard
Typografie
Display
Überschrift H2
Lead-Text führt in eine Sektion ein.
Fließtext, 14 px, sekundäre Farbe. Hier liegt kein Glow — niemals.
Röhreneffekt
Buttons
Flächen & Schatten
Eingabe
Logo
Tokens
Semantische Farben
Die Werte wechseln mit dem Theme, die Namen nie. Komponenten greifen ausschließlich auf diese Ebene zu — nie auf die Primitives.
Dark
--surface-base
--surface-raised
--surface-sunken
--ink-primary
--ink-secondary
--ink-tertiary
--tube-core
--cta-fill
--edge-strong
Light
--surface-base
--surface-raised
--surface-sunken
--ink-primary
--ink-secondary
--ink-tertiary
--tube-core
--cta-fill
--edge-strong
Funktionale Farben
Nur für Formular-Validierung und Platzhalter-Markierung. Richtung wird über Pfeil-Icons kommuniziert, nicht über Farbe — Farbe allein ist kein zulässiger Bedeutungsträger.
--c-success
--c-danger
--c-warn
Icons
39 Haus-Icons
24er Raster, 1,5 px Strichstärke, runde Enden. Die runden Enden sind der Trick: sie lesen sich als Röhrenenden und machen jedes Icon neonfähig.
Plattform-Marken
Offizielle Zeichen,
monochrom über currentColor. Sie folgen nicht der Haus-Spezifikation, weil eine
nachgezeichnete Marke falsch aussieht.
Komponenten
Im Zusammenspiel
Kennzahlen
über 8
Jahre Erfahrung
Basisjahr 2018
über 1 Mio. €
Ad-Budget
bestätigt
4
Plattformen
Meta, TikTok, Google, LinkedIn
Prozess
01
Schritt
Beschreibung des Schritts.
02
Schritt
Beschreibung des Schritts.
FAQ
Geöffnet
Natives details/summary — null JavaScript, barrierefrei von Haus aus.
Geschlossen
Antwort.
Platzhalter-Markierung
So sieht ein Platzhalter aus. Inline markiert: Wert fehlt. Die Markierung ist absichtlich laut — sie darf nicht versehentlich live gehen.
Harte Regeln
Was nicht
verhandelbar ist
Kein Glow auf Text
Der Effekt gehört den echten Röhren, dem Logo und den Icons. Auf Fließtext, Labels oder Rechtstexten weicht er die Buchstabenkanten auf und kostet Lesbarkeit. Ein Akzentwort wird über das Gewicht hervorgehoben, nicht über Licht.
Kein Text vor einer Röhre
Zwischen Deko-Ebene und Inhalt liegt immer .deco-scrim. Damit ist die Trennung
strukturell abgesichert und hängt nicht an Disziplin — auch dann, wenn eine andere
Fensterbreite ein Rohr in die Textspalte schiebt.
Nur opacity und transform
Schatten- und Filterwerte werden nie animiert: jede Interpolation erzwingt einen Repaint pro
Frame. Animiert wird die Deckkraft eines Pseudo-Elements. Einzige Ausnahme ist das einmalige
stroke-dashoffset der Zündsequenz.
Ein Basisjahr
Die Jahreszahl steht als data-since="2018" im Markup und wird im Browser
berechnet. Absicht: eine vorgerenderte oder im CDN gecachte Seite würde über den Jahreswechsel
hinweg den alten Wert zeigen.