Für Entwickler · Kapitel 23

Als Code

Entwickler wollen keine Farbkarte abschreiben. Der Knopf Als Code gibt ihnen die Fassung in vier Formaten, fertig zum Einfügen, und zwar genau die, die gerade angezeigt wird.

Der Dialog

Als Code steht oben auf der Seite jedes Kunden und jedes Projekts. Der Dialog heißt etwa „Morgenrot Bakery als Code“ und hat vier Reiter:

Reiter	was kommt	Datei
CSS-Variablen	ein Block `:root { … }`	`.css`
Tailwind 4	ein Block `@theme { … }` mit denselben Namen	`.css`
SCSS	Variablen wie `$color-…`	`.scss`
Design Tokens (JSON)	das Format der W3C Design Tokens	`.tokens.json`

Kopieren legt den Text in die Zwischenablage, Herunterladen speichert eine Datei wie morgenrot-bakery-2026.css. Umlaute im Namen werden dabei umgeschrieben, aus ä wird ae.

Der Dialog Morgenrot Bakery as code mit dem Reiter Tailwind 4, darin ein @theme-Block mit Farben, Schriften und Größen — Dieselbe Fassung als Tailwind-4-Theme.

Was drinsteht

CSS

:root {
  --color-<name>: #…;
  --color-<name>-50: #…;   /* bis 950 */
  --font-<rolle>: 'Familie', serif;
  --text-h1: 2.5rem;
  --text-h1--line-height: 1.1;
  --text-h1--font-weight: 700;
  --dark-ground: var(--color-<name>);
}

Farben mit ihrem Namen als Kürzel. Die Abstufungen 50 bis 950 bekommt jede Farbe, deren Rolle nicht Neutral ist.
Schriften je Rolle, mit ihrem Ersatz.
Schriftgrößen in rem, 16 px sind 1 rem, mit Zeilenhöhe und Strichstärke.
Dunkelmodus als Verweise auf die Farben, damit du ihn auf eigene Variablen legen kannst.

Die Design Tokens führen Farben mit ihrer Rolle als Beschreibung und Pantone als Erweiterung. Figma, Style Dictionary und Tokens Studio lesen dieses Format; eine eigene Anbindung an diese Programme hat nexbrand nicht.

Überall derselbe Text

Die App, eine öffentliche Seite, die API und MCP liefern denselben Text. Ein Entwickler ohne Konto bekommt über eine Freigabe also genau, was du in der App siehst. Für ein Projekt kommt der ganze Satz, wie das Projekt ihn zeigt: was es vom Kunden erbt, zusammen mit dem Eigenen.

Pavo sagtDer Export folgt der Fassung, die du gerade ansiehst. Wähl in der Zeitleiste 2022, und du bekommst den Code von 2022, etwa für einen Nachdruck.