Spacing & Motion.

Das unsichtbare Mass- und Timing-System der Marke: Abstände auf Basis des 12×12-Rasters, knappe Radien und eine ruhige, präzise Motion. Alle Werte kommen live aus dem CMS und lassen sich per Klick kopieren.

Spacing

Abstände auf Basis des 12×12-Rasters — von 4 px bis 128 px. Ein durchgehendes Mass hält Layouts über alle Formate hinweg im Rhythmus.

s-0 · 0
s-1 · 4px
s-2 · 8px
s-3 · 12px
s-4 · 16px
s-5 · 24px
s-6 · 32px
s-7 · 48px
s-8 · 64px
s-9 · 96px
s-10 · 128px
grid-gap · 24px
page-pad · 48px

Radien

Knapp gehalten: 0 / 2 / 4 px. Die Pille nur für kleine Tags — nie für Flächen oder Karten.

r-00
r-12px
r-24px
r-pill999px

Motion

Zwei Kurven, fünf Dauern. Ruhig und präzise, ohne Überschwung — Bewegung akzentuiert, sie drängt sich nie auf. Die Grundstufe (120/220/420 ms) trägt Hover, Übergänge und Reveals; die Showcase-Stufe (640/800 ms) ist grossen Momenten vorbehalten — Hero, Zahlen, inszenierte Einstiege. Grosse Bewegungen nutzen dieselben Kurven, nur längere Dauern und Distanzen.

  • ease-outcubic-bezier(0.16, 1, 0.3, 1)
  • ease-inoutcubic-bezier(0.65, 0, 0.35, 1)
  • dur-fast120ms
  • dur-base220ms
  • dur-slow420ms
  • dur-reveal640ms
  • dur-hero800ms
ease-out · cubic-bezier(0.16, 1, 0.3, 1)
ease-inout · cubic-bezier(0.65, 0, 0.35, 1)

Showcase-Stufe

Die grossen Momente des Portals, gebaut aus denselben Tokens: Headlines steigen Wort für Wort auf (dur-hero), Kennzahlen zählen im Sichtfeld hoch, lange Prosa füllt sich beim Scrollen Wort für Wort mit Tinte (TextScrub, scroll-getrieben — ganz ohne Dauer-Token). Bei reduzierter Motion steht alles einfach da.

268’711Besucherinnen und Besucher im Jahr

Grundlage ist das Technorama Brand Guideline. Spacing folgt dem Gestaltungsraster; den vollständigen Token-Satz gibt es als Export in der Design-Übersicht.