Styleguide

Design Styleguide (Preview)

Dieser Styleguide zeigt die neuen Design Tokens und deren Anwendung. (Experimentell – nicht final.)

Farben

Accent
Surface Alt
Surface Elevated

Typografie

H1 Heading Token Scale

H2 Heading Token Scale

H3 Heading Token Scale

Dies ist Fließtext mit der neuen Body-Token-Konfiguration. Zeilenhöhe, Lesbarkeit und modularer Rhythmus basieren auf einem reduzierten, industrie-inspirierten System.

Kleine Meta-Info in der Small-Variante.

Buttons

Spacing & Container

Container mit max. 72ch und internem Padding. Nutzt Tokens für Abstände und Flächen.

Code

const answer = 42;

Hinweise / Nächste Schritte

  1. Komponenten nach und nach auf Tokens migrieren.
  2. Alte Variablen nach Stabilisierung bereinigen.
  3. Navigation vereinfachen & konsistent machen.
  4. Globale Dark-Mode-Differenzen auf echte Token-Deltas reduzieren.

Feel free to iterate.