Themes und Styleguides
Wie das Projekt-Theme funktioniert, wie du es gefahrlos änderst und warum Farben nie Screen für Screen bearbeitet werden sollten.
Zuletzt aktualisiert:
Jedes Projekt hat ein Theme: eine Sammlung von Design-Tokens für Farben, Typografie, Radien und Abstände. Screens referenzieren diese Tokens statt fester Werte, und genau das lässt zwanzig Screens wie ein Produkt aussehen.
Ein paar Farben ändern
Frag einfach:
Mach die Primärfarbe zu #1B4DFF. Der Hintergrund ist zu kalt — mach ihn wärmer.
Das führt eine kleine Änderung ins bestehende Theme ein und lässt alles andere in Ruhe. Es ist kostenlos und wirkt überall gleichzeitig.
Einen ganz neuen Look bauen
Für eine Rundumänderung — ein Redesign, ein Wechsel auf Dunkel, eine neue Marke — frag genau das an:
Gib dem ganzen Projekt ein dunkles Theme. Gestalte das mit unserer neuen Marke neu: tiefes Grün als Primärfarbe, cremefarbener Hintergrund, Serifen-Überschriften.
Das baut einen kompletten neuen Token-Satz, statt den alten zu flicken.
Eine Änderung eingrenzen
Standardmäßig gelten Theme-Änderungen projektweit. Um eine auf einen Screen zu begrenzen, sag es:
Mach nur auf der Landingpage den Header-Hintergrund schwarz.
Kontrast wird geprüft
Themes werden vor dem Anwenden auf lesbare Farbpaare geprüft, du solltest also nicht mit dunklem Text auf dunklem Hintergrund enden. Wenn du bewusst eine kontrastarme Behandlung willst, sag es — rechne aber damit, dass das System Richtung Lesbarkeit drängt.
Einen Styleguide erzeugen
Frag einen Styleguide an, und du bekommst einen gerenderten Screen mit Palette, Schriftskala und Kernkomponenten — nützlich als Übergabeartefakt und als Prüfung, ob das System stimmig ist.
Häufige Fehler
- Eine Farbe auf einem Screen bearbeiten. Es funktioniert — und dann passt der nächste generierte Screen nicht mehr. Nimm das Theme.
- Im Bearbeitungsmodus auf einem Element nach „Dark Mode“ fragen. Dieser Weg kann Farben fest verdrahten, statt neu zu themen. Frag im Chat, auf Projektebene.
- Annehmen, dass eine Erfolgsmeldung des Theme-Werkzeugs bedeutet, dass gerendert wurde. Sieh auf den Canvas. Wenn die Screens sich nicht bewegt haben, siehe Mein Styleguide wurde nicht angewendet.
Häufig gefragt
- Kostet eine Theme-Änderung Credits?
- Nein. Ein Theme zu erstellen oder zu aktualisieren ist kostenlos. Nur die Screens selbst kosten Credits beim Generieren.
- Kann ein Screen ein anderes Theme haben?
- Ja — bitte darum, die Änderung auf diesen Screen zu begrenzen. Standardmäßig gilt eine Theme-Änderung für das ganze Projekt, was meist gewollt ist.
War dieser Artikel hilfreich?
Verwandte Artikel
Schriften und Typografie
Schriften wählen, Google Fonts nutzen und was zu tun ist, wenn eine Schriftänderung nicht auftaucht.
Einen Screen bearbeiten
Die drei Wege, ein Design zu ändern — Chat, Bearbeitungsmodus und Theme — und wann welcher der richtige ist.
Mein Styleguide oder Theme wurde nicht angewendet
Screens rendern ungestylt oder ignorieren eine Theme-Änderung — was zu prüfen ist und was du uns schicken solltest.