Accordion

Header (Titel + Chevron) + ausklappbarer Inhalt

Bordered

Ein Design Token ist ein benannter Wert (Farbe, Abstand, Radius …), der eine Design-Entscheidung kapselt und zwischen Design und Code geteilt wird.

Semantic Tokens beschreiben die Intention, nicht den Wert. „action.primary" statt „coral-500" — so lässt sich das System thembar machen, ohne jeden Component anzufassen.

tokens.json enthält alle Werte im DTCG-Format. Style Dictionary wandelt sie in CSS Custom Properties um. Components konsumieren nur Semantic Tokens aus dist/tokens.css.

Divided

Zwei Accents: accent1 (Coral) für CTAs, accent2 (Sky) für Links, Fokus und Selection. Neutrale Flächen über bg/surface/fill.

Eine Roh-Leiter mit drei Sichten: inset (Innenabstand), gap (Abstand zwischen Elementen), layout (Seitenstruktur). Innerhalb eines Containers immer gap, nie margin.

text-style.* liefert Größe, line-height und Schriftfamilie gebündelt. Gewicht wird separat über weight.* gesetzt.