Von der Referenz zu den Tokens

Wie aus „so ungefähr wie diese Seite" belastbare Design Tokens werden.

Der Design-Workflow (Claude Code) nennt als dritten Schritt die visuelle Richtung — zwischen der Markenprüfung und den Tokens. Diese Seite beschreibt ihn: Sie ist die Brücke zwischen project/brand.md und src/styles/theme.css.

Warum überhaupt zerlegen

Eine Referenz nachzubauen scheitert an einer einfachen Sache: Man sieht das Ergebnis, nicht die Entscheidungen. „Wirkt ruhig" ist kein Wert, den man in eine CSS-Variable schreiben kann. Und wer zwei Vorbilder gleichzeitig nachbaut, bekommt keins von beiden.

Zerlegen heißt: aus dem Eindruck messbare Eigenschaften machen. Nicht „schöne Typografie", sondern „Überschriften mit Zeilenhöhe 1,0 bei −3 % Laufweite, Fließtext mit 1,75". Das erste ist Geschmack, das zweite ein Token.

1. Referenzen sammeln

Drei bis fünf Seiten reichen. Mehr führt dazu, dass sich alles gegenseitig aufhebt.

Zu jeder Seite gehören zwei Angaben, sonst ist sie wertlos:

• Was zieht dich daran an? In einem Halbsatz. „Die Ruhe", „die große Typo", „die Bildsprache" — das lenkt die Analyse. Ohne diese Angabe misst man alles und gewichtet nichts.
• Wofür steht sie? Vorbild, Mitbewerber oder ausdrückliches Gegenbeispiel.

Nimm Gegenbeispiele mit. Seiten, die ausdrücklich nicht gewollt sind, entscheiden später mehr Fragen als die Vorbilder — project/brand.md fragt genau deshalb nach dem, was nicht gewollt ist.

Ein Sonderfall lohnt sich fast immer: das Brand Manual einer Marke, die man schätzt. Große Marken veröffentlichen ihre Regeln, und dort steht bereits in Token-Form, was man sonst mühsam herausmessen müsste.

2. Messen statt raten

Ein Screenshot zeigt, wie es aussieht. Die berechneten Werte zeigen, woraus es besteht. Beides zusammen ergibt die Referenz.

Im Browser die Seite öffnen, in der Konsole ausführen:

(() => {
  const vis = [...document.querySelectorAll('body *')].filter((e) => {
    const r = e.getBoundingClientRect();
    return r.width > 1 && r.height > 1;
  });
  const cs = (e) => getComputedStyle(e);
  const top = (arr, n = 8) =>
    Object.entries(arr.reduce((a, v) => ((a[v] = (a[v] || 0) + 1), a), {}))
      .sort((a, b) => b[1] - a[1])
      .slice(0, n)
      .map(([k, v]) => `${k} ×${v}`);

  const text = vis.filter((e) =>
    [...e.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim().length > 2),
  );

  return {
    fonts: top(text.map((e) => cs(e).fontFamily.split(',')[0].replace(/["']/g, '').trim())),
    groessen: top(
      text.map((e) => cs(e).fontSize),
      10,
    ),
    zeilenhoehen: top(
      text.map((e) => `${cs(e).fontSize} / ${cs(e).lineHeight}`),
      6,
    ),
    textfarben: top(
      text.map((e) => cs(e).color),
      6,
    ),
    flaechen: top(
      vis.map((e) => cs(e).backgroundColor).filter((c) => c !== 'rgba(0, 0, 0, 0)'),
      6,
    ),
    radien: top(
      vis.map((e) => cs(e).borderRadius).filter((r) => r !== '0px'),
      5,
    ),
    satzbreite: [...document.querySelectorAll('p')]
      .filter((p) => p.textContent.trim().length > 80)
      .slice(0, 5)
      .map((p) => Math.round(p.getBoundingClientRect().width / (parseFloat(cs(p).fontSize) * 0.5))),
  };
})();

Die Zahl hinter jedem Wert (×47) ist der eigentliche Ertrag: Sie unterscheidet die tragende Entscheidung von der Ausnahme. Eine Farbe, die einmal vorkommt, ist kein Token.

Ergänzend ansehen, was sich nicht messen lässt: Reihenfolge der Abschnitte, wo die Handlungsaufforderung sitzt, was beim Scrollen passiert, wie sich die Seite in schmalen Breiten verhält.

3. Auswerten

Die Werte nebeneinanderlegen — dann trennt sich von selbst zweierlei:

Was allen Referenzen gemeinsam ist, sind deine Tokens. Wenn vier Seiten unabhängig voneinander bei rund 64 Zeichen Satzbreite landen, ist das keine Mode, sondern Lesbarkeit. Solche Übereinstimmungen sind belastbar, weil sie niemand abgesprochen hat.

Erfahrungsgemäß decken sich quer über sehr verschiedene Seiten:

• die Zahl der Farben — wenige, mit einer dominanten Akzentfarbe
• getöntes Off-White statt reinem Weiß als Fläche
• der typografische Kontrast: Überschriften eng (Zeilenhöhe 1,0–1,25), Fließtext weit (1,5–1,75)
• Satzbreite um 60–70 Zeichen

Wo sie auseinandergehen, liegt die Entscheidung. Genau dort — Akzentfarbe, Schriftwahl, Grad der Verspieltheit — hilft kein Messen mehr. Das ist der Punkt, an dem ein Mensch entscheidet.

4. Widersprüche auflösen, statt sie zu mitteln

Der häufigste Fehler in diesem Schritt: Aus vier Vorbildern den Durchschnitt bilden. Das Ergebnis sieht nach nichts aus, weil jede Referenz ihre Wirkung aus Konsequenz zieht — und Konsequenz ist das Erste, was beim Mitteln verlorengeht.

Stattdessen: eine Leitreferenz bestimmen. Sie gibt die Richtung vor. Die anderen liefern einzelne, benannte Anleihen — „die Satzbreite von A", „die Buttonform von B" —, und alles, was der Leitreferenz widerspricht, fällt weg.

Diese Entscheidung gehört als Satz nach project/brand.md, nicht in einen Chatverlauf.

5. In Tokens übersetzen

Erst jetzt wird src/styles/theme.css angefasst — die Namen bleiben, nur die Werte ändern sich (Regel 2).

Aus der Analyse	Wird zu
Akzentfarbe	--color-brand-50 … --color-brand-950
Flächenton, Textfarbe	die semantischen Token für Fläche und Text
Größen der Überschriften	die Größenstufen — als Verhältnis, nicht als Pixel
Zeilenhöhen eng/weit	Überschriften- und Fließtext-Token
Satzbreite in Zeichen	die Lesebreite von Section width="content"
Radien	die Radius-Token

Eine gemessene Akzentfarbe ist ein einzelner Wert; theme.css braucht eine Skala. Am schnellsten geht das mit einem Brand Manual als Vorlage — viele veröffentlichen die volle Abstufung. Sonst die Skala erzeugen und zwei Bedingungen prüfen: brand-600 und brand-700 müssen gegen Weiß 4,5:1 erreichen, sonst fällt der Styleguide durch die axe-Prüfung.

Drei Fallen

Schriftlizenzen. Die auffälligsten Agenturschriften sind kommerziell und pro Projekt zu lizenzieren. Wer die Referenz mit ihrer Schrift übernimmt, übernimmt eine laufende Rechnung. Häufig gibt es eine sehr nahe Open-Source-Alternative — und die Wirkung einer Seite hängt ohnehin mehr an Größenverhältnis und Zeilenhöhe als an der Schrift selbst.

Gemessene Größen sind nicht die Vorlage. Viele Seiten skalieren typografisch mit der Fensterbreite; ein bei 2560 px gemessenes 54,72px ist kein Token, sondern ein Messwert. Übernommen wird das Verhältnis zwischen den Stufen, nicht die Zahl.

Was gemessen wurde, muss nicht gewollt sein. In den Werten steckt auch, was der Referenz misslungen ist. Die Messung liefert Material, keine Entscheidung.

Danach

Die Richtung steht in project/brand.md, die Werte in src/styles/theme.css — weiter mit dem Styleguide und der ersten realen Seite. Den Ablauf beschreibt Der erste Tag, den Skill dazu design-foundation.