Ein Token ist eine Entscheidung mit einem Namen. #a79bf5 ist ein Wert. color/accent/default ist die Entscheidung, dass dieser Ton für Akzente steht – und dass er sich ändern darf, ohne dass jemand 40 Dateien durchsucht.

PageWeave nutzt daisyUI-Farben, du kannst aber eigene CSS-Variablen parallel führen. Wichtig ist, dass die Zuordnung einmal dokumentiert wird und nicht bei jeder Section neu entsteht.

Wo Tokens in Figma stecken

Es gibt drei Orte:

  1. Styles – Farben, Textstile, Effekte. Funktioniert in jedem Plan.
  2. Variables – Design-Tokens mit Modi. Der REST-Endpunkt ist Enterprise-only.
  3. Knotenwerte – konkrete Füllungen, Schriftgrößen, Abstände. Immer vorhanden.

Für die meisten Projekte reicht die Kombination aus Styles und Knotenwerten. Du liest die Styles für die Namen und die Knoten für die tatsächlichen Werte. Wenn beides fehlt, hast du keine Tokens, sondern Einzelentscheidungen.

Achtung: Verlass dich nicht auf die Variables API, wenn du nicht sicher bist, dass das Projekt in einer Enterprise-Organisation liegt. Der Endpunkt antwortet sonst mit einem Fehler – und dein Extraktionsskript bricht ab.

Die vier Token-Gruppen

Gruppe Figma CSS PageWeave
Farbe Color Styles, Fills --color-* --color-primary, --color-base-*
Typografie Text Styles --font-*, font-size Font-Familien im <head>
Abstand Auto Layout, Padding --space-* Tailwind/Utility-Klassen
Radius Corner Radius --radius-* --radius-box, --radius-field

Nicht jedes Figma-Token braucht eine 1:1-Entsprechung. Ein space/96 kann in PageWeave ein clamp() werden. Entscheidend ist, dass die Absicht erhalten bleibt.

Von Figma nach CSS

Ein schlankes Tokenset für eine dunkle redaktionelle Seite:

:root {
  /* Flächen */
  --paper: #121118;
  --paper-2: #191820;
  --paper-3: #23222b;

  /* Text */
  --ink: #edecef;
  --ink-dim: #b9b6c4;
  --ink-faint: #8f8b9c;

  /* Akzent */
  --iris: #a79bf5;
  --iris-strong: #8b5cf6;

  /* Linien */
  --rule: rgba(237, 236, 239, 0.12);
  --rule-strong: rgba(237, 236, 239, 0.24);

  /* Typografie */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Rhythmus */
  --space-section: clamp(3.5rem, 7vw, 6rem);
  --space-gap: 1.5rem;
  --radius-card: 6px;
}

Diese Variablen sind deine Quelle. Die PageWeave-Komponenten und Sections sollten sie verwenden, nicht neue Hex-Werte.

Auf das PageWeave-Theme abbilden

Das Theme liefert die daisyUI-Farben. Du kannst die wichtigsten Tokens dort spiegeln:

[data-theme="academy"] {
  color-scheme: dark;

  --color-base-100: #121118;
  --color-base-200: #191820;
  --color-base-300: #23222b;
  --color-base-content: #edecef;

  --color-primary: #a79bf5;
  --color-primary-content: #15121f;
  --color-secondary: #8b5cf6;
  --color-secondary-content: #ffffff;

  --radius-box: 6px;
  --radius-field: 2px;
}

color-scheme: dark ist Pflicht. Ohne die Angabe rendern Formulare und Scrollbars in manchen Browsern hell – mitten in deiner dunklen Seite.

Tipp: Halte die Zahl der gespiegelten Tokens klein. Ein Theme mit 40 Variablen, von denen 30 niemand nutzt, ist keine Konsistenz, sondern Ballast.

Schriften richtig laden

PageWeave stellt Schriften über fonts.pageweave.dev bereit. Lade nur die Familien und Schnitte, die du brauchst:

<link rel="preconnect" href="https://fonts.pageweave.dev" crossorigin>
<link rel="stylesheet" href="https://fonts.pageweave.dev/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..600&family=IBM+Plex+Mono:wght@400;500&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&display=swap">

Drei Regeln:

  1. Keine Schrift ohne Fallback. Wenn die Datei nicht lädt, muss die Seite lesbar bleiben.
  2. Keine 12 Schnitte. Jeder Schnitt kostet Bytes.
  3. Keine Lizenzüberraschung. Prüfe, ob die Schrift im Web verwendet werden darf.

Kontrast prüfen, nicht schätzen

Ein Grau, das in Figma gut aussieht, kann bei 14 px gegen WCAG AA verstoßen. Prüfe die Paare, die wirklich vorkommen:

Vordergrund Hintergrund Anforderung
--ink --paper ≥ 4,5:1
--ink-dim --paper ≥ 4,5:1
--ink-faint --paper ≥ 4,5:1 für kleine Labels
--iris --paper ≥ 4,5:1 für Links

Wenn ein Token knapp darunter liegt, ändere den Token – nicht die Ausnahme.

Checkpoint: Jede Farbe, die als Text eingesetzt wird, hat einen geprüften Kontrastwert. Keine Ausnahmen „nur im Footer“.

Tokens dokumentieren

Eine kleine Tabelle im Repository verhindert, dass die Zuordnung verloren geht:

Figma                      CSS                   Verwendung
color/surface/default      --paper               Seitenhintergrund
color/surface/raised       --paper-2             Karten, Callouts
color/text/primary         --ink                 Überschriften
color/text/muted           --ink-dim             Fließtext
color/accent/default       --iris                 Links, Marker
type/display/xl            --font-display        H1
type/body/md               --font-body           Fließtext

Diese Tabelle ist auch der beste Prompt-Baustein: Der Agent sieht, welcher Name wohin gehört.

Häufige Fehler

Fehler Folge Fix
Tokens nur als Hex-Werte Keine Wiederverwendung Styles anlegen, Variablen schreiben
Variables API vorausgesetzt Extraktion bricht ab Styles und Knotenwerte nutzen
Zu viele Tokens Niemand findet das richtige Rollen statt Farben benennen
Kontrast geschätzt WCAG-Verstoß Messen und Token korrigieren
Schriften ohne Fallback Unlesbare Seite bei Ladefehler serif/sans-serif ergänzen

Weiterlesen