--- title: "Tutorial — PageWeave Academy" --- # Design-Tokens von Figma nach PageWeave Farben, Typografie, Abstände und Radien als CSS-Variablen – ohne die Namen aus Figma zu verlieren. > Lies Tokens aus Figma-Styles und Knotenwerten, dokumentiere die Zuordnung und schreibe sie als CSS-Variablen. Bilde sie auf das PageWeave-Theme ab und prüfe Kontrast sowie Schrift-Schnitte. Der Variables-Endpunkt ist Enterprise-only – du brauchst ihn nicht. 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 `` | | 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: ```css :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: ```css [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: ``` ``` 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 - [Figma-Datei für die Übergabe vorbereiten](/tutorials/figma-datei-vorbereiten) - [Figma zu PageWeave: Vom Screendesign zur Website](/tutorials/figma-zu-pageweave) - [Responsive QA: 375, 768, 1440](/tutorials/responsive-qa)