Exporte

Eine Session verlässt das Tool in jedem Format, das dein Stack liest — und jeder Export deckt den vollständigen Namespace des Ziels ab, sodass nichts auf einen markenfremden Standard zurückfällt.

Das Export-Menü

Schnell-Exporte (Zwischenablage)

CSS pro Ansicht, ein Klick, direkt in die Zwischenablage:

  • Color — CSS — Primitive (--color-brand-500 …) und die abgeleiteten semantischen Rollen (--background, --foreground, --primary, --ring, Surface- und Status-Tokens), mit einer Nutzungsanleitung im Datei-Header: welche Tokens 90 % der Fälle abdecken und die Regeln für Surfaces vs. Status.
  • Typography — Tokens CSS — die Skala als Custom Properties, mit Zeilenhöhen auf dem Grundlinienraster; der Fluid-Modus exportiert clamp()- Ausdrücke.
  • Typography — Styles CSS — fertige Element-Styles (Überschriften, Fließtext, Lead, Listen), aus den Tokens gebaut.
  • Grid — CSS — Container- und Spalten-Variablen pro Breakpoint, als Media Queries.

Systemdateien (Download)

  • Tailwind v4 — ein @theme-Block: Farben, Schriftgrößen, Abstände, Radien, Schatten, Easing — die vollständigen Namespaces, inklusive dem Überschreiben der Standard-ease-in/out/in-out mit den Kurven deines Motion-Profils.
  • Tailwind v3 — theme.extend als Konfigurationsdatei: verschachtelte Farb-Primitive mit literalen semantischen Tokens, Rahmenbreiten und ein DEFAULT-Merge, wo ein Intent-Name mit einem Paletten-Namen kollidiert.
  • shadcn/ui — der vollständige Contract im aktuellen Dialekt (:root + .dark + @theme inline): markengetöntes --accent, --secondary aus der Sekundär-Palette, chart-1..5 aus den gesättigtsten Stufen deiner Paletten und die Sidebar-Familie. Das ältere HSL-Format wird als auskommentierte Alternative mitgeliefert.
  • Figma Variables — Collections für Farbe (Light-/Dark-Modus), Typografie und Layout mit einem Modus pro Breakpoint; Effekt-Werte als Float-Variablen plus Schatten-Effektstile.

Jede Datei beginnt mit einem generierten Header, der das Tool, die Skalen-Parameter und alle bewusst ausgeschlossenen Teilmengen benennt — ein Export, den du prüfen kannst, nicht nur einfügen.

Das Vollständigkeitsprinzip

Ein Export, der nur einen halben Namespace abdeckt, ist eine Falle: Die Utilities, die du vergessen hast, erben die Framework-Standards, und das Design driftet genau dort, wo niemand hinschaut. Die Regel von Scale Composer lautet, den gesamten Namespace des Ziels abzudecken — jeden Radius-Namen, den Tailwind kennt, jede Schatten-Größe, jedes Easing-Keyword — oder den Ausschluss im Datei-Header zu deklarieren. Was dein System nicht definiert, sollte es trotzdem entscheiden.

Die Design-Tokens-Guides behandeln Benennung, Schichtung und wie Tokens zwischen Tools wandern.