Komponenten.
Die UI-Bausteine der Marke — flach, präzise, eine Markenfarbe pro Element. Jedes Specimen ist produktionsnah gesetzt und folgt den Regeln aus den Richtlinien.
Übersetzungsregeln
Analog Fremde UI-Muster werden übersetzt, nie kopiert: Fläche + Haarlinie statt Schatten · Radius max. 4px, Pille nur kleine Tags · Marken-Kurven statt Feder-Bounce · keine Verläufe, kein Glassmorphism · Akzent nur als Kante, Icon oder Indikator · immer linksbündig.
| Fremdes Muster | Technorama-Übersetzung |
|---|---|
| Box-Shadow / Elevation | Fläche #0b0b0b + Haarlinie (--tr-rule), kein Schatten |
| Pillen-Container | Eckig, Radius 4 px — die Pille bleibt kleinen Tags vorbehalten |
| Feder-Bounce / Overshoot | Nur die zwei Markenkurven mit den Dauer-Tokens, kritisch gedämpft |
| Verläufe & Glow | Verboten — Akzent als Vollton über die --accent-Konvention |
| Glassmorphism / backdrop-blur | Verboten — einzige Ausnahme: Scroll-Kanten als Transparenz-Maske |
| Farbtext, Farbe auf Weiss | Nie — Akzent nur als schmale Kante, Icon oder Indikator |
| Versalien & Italic-Betonung | Nie — Betonung über Schriftgewicht |
| 3D-Perspektive / Card-Tilt | Abgelehnt — die Marke ist flach; Expansion statt Rotation |
| Text-Gradient-Scrub | Wort-Tinte gedämpft → Vollton (TextScrub) — Farbe nie als Verlauf |
| Scroll-Hijacking / Pin-Sequenzen | Sticky-Stapel im nativen Scroll (KartenStapel) — Scrub statt Snap |
Buttons
Analog Primär solid · Sekundär outline · Marken-CTA (eine Farbe pro Ansicht) · Text-Link.
Tags & Badges
Analog Pill-Labels, Bold 12px, eine Markenfarbe pro Tag.
Formulare
Analog Label → Input 10px · Feld → Feld 24px · Select mit 48px-Pfeil-Spalte und Haarlinie.
Navigation
Analog Logo-Lockup · linksbündige Navigation · eine Markenfarbe für den CTA.
Content-Cards
Analog Flache Rechtecke, eine Markenfarbe pro Karte, Radius 0.
Accordion
Portal Radix-Basis; Fläche + Haarlinie, Chevron im Akzent; Höhe mit ease-inout/dur-base — kein Bounce.
Tabs
Portal Radix-Basis mit gleitendem Akzent-Indikator (2px-Unterkante); vereinheitlicht die aria-pressed-Segmente; Pfeiltasten wechseln direkt.
Der Indikator gleitet zur aktiven Position — Messung im Wrapper, Transition im CSS, Kurve ease-inout, Dauer dur-base.
Tooltip
Portal Flach, ohne Pfeil: Fläche #0b0b0b, Haarlinie, Radius 2px, 300ms Verzögerung; nie der einzige Informationsträger.
Hover-Expand-Galerie
Portal Bildzeile mit flex-grow-Expansion beim Hover/Fokus (ease-inout/dur-base) — Expansion statt 3D-Rotation, Haarlinien-Fugen, kleiner Radius aus der Rampe; ohne Hover sind alle Bilder gleichwertig, es geht keine Information verloren.
NumberFlow
Portal Rollende Ziffernsäulen bei Wertwechseln (ease-inout/dur-slow, tabular-nums); framework-frei, SSR statisch. Abgrenzung: AnimatedNumber zählt einmal ins Bild, NumberFlow rollt bei Änderungen einer gemounteten Zahl.
Status-Insel
Portal Zentrales Meldungssystem, unten zentriert: gerundet (--radius-rounded-xl), deckende Fläche + Haarlinie, Akzent nur als linke Kante und Icon (ok grün, Fehler rot — aus den Statusflächen des digitalen Satzes). Eine Meldung sichtbar, Fehler bleiben bis zum Schliessen; ergänzt Inline-Status, ersetzt ihn nicht (stumm-Flag gegen Doppel-Ansagen).
Scroll-Fade
Portal Scrollkanten als Transparenz-Maske (kein Blur, kein Glass); scroll-getrieben, statischer Fallback.
- Schwarz ist die Bühne.
- Eine Markenfarbe pro Anwendung — nie kombiniert.
- Nie abgetönt, nie im Verlauf.
- Immer linksbündig, nie Versalien.
- Radien 0 / 2 / 4 px — die Pille nur für kleine Tags.
- Zwei Kurven, fünf Dauern — ruhige, präzise Motion.
- Fläche und Haarlinie statt Schatten.
- Der Akzent ist Kante, Icon oder Indikator — nie Fläche mit Farbtext.
- ES Allianz; Fallback Arial.
- Logo und T-Shape nur Schwarz oder Weiss, nie drehen, nie verzerren.
TextScrub
Portal Scroll-getriebene Wort-Tinte für lange Prosa-Momente: Wörter wechseln beim Scrollen von gedämpfter zu voller Tinte (Vollton statt Text-Verlauf). Server-Komponente ohne JS, view()-Timeline; ohne Support oder bei reduzierter Motion steht der Text in voller Tinte.
KartenStapel
Portal Sticky-Stapel für Erzählstrecken (bis 5 Karten): Karten pinnen mit gestaffeltem Offset im NATIVEN Scroll, die überdeckte weicht der nachrückenden minimal zurück — Scrub statt Snap, kein Scroll-Hijacking. Rein CSS; unter 900px, ohne Timeline-Support oder mit reduzierter Motion fliessen die Karten schlicht untereinander.
Eine Facette pro Karte
Jede Karte trägt genau einen Gedanken der Erzählstrecke.
Scrub statt Snap
Der Stapel folgt dem Finger — nichts rastet ein, nichts wird abgefangen.
Neutraler Rückfall
Unter 900px, ohne Timeline-Support oder mit reduzierter Motion fliessen die Karten schlicht untereinander.