Anleitung

Von der ersten Farbe bis zur fertigen CI.

Die Anleitung führt dich Schritt für Schritt durch nexbrand. Zuerst richtest du den Server ein und legst einen Kunden an. Dann trägst du Farben, Schriften, Logos, Größen und Regeln ein, hältst Fassungen und Projekte auseinander, lässt nachrechnen und stimmst mit dem Kunden ab. Am Ende stehen Code und API für Entwickler, Konto, Rechte und Betrieb.

Mit Kapitel 1 anfangen Gleich zu den Farben

Jedes Kapitel steht für sich, du kannst also auch gleich dorthin springen, wo du gerade eine Frage hast. Die Bilder zeigen die englische Oberfläche; die deutschen Namen der Knöpfe stehen im Text. Die Kunden darin, etwa Morgenrot Bakery, sind erfunden.

Erste Schritte

EinrichtenWie du nexbrand mit Docker startest, den Einrichtungscode aus dem Log holst und das erste Konto anlegst, das den Server als Betreiber führt.

RundgangWas du nach der Anmeldung siehst: die Übersicht der Kunden, die Seitenleiste, die Schnellsuche, die Kopfleiste und die Seite eines Kunden mit ihren Reitern.

Neuer KundeWie der Assistent in sechs Schritten eine CI für einen neuen Kunden entwirft: aus einer Beschreibung, einem Bild oder einer Farbe, mit Schriftpaar, Größen und laufender Prüfung.

CI erfassenWie du die CI eines bestehenden Kunden einträgst, ältere Fassungen mit ihrem damaligen Datum nachträgst, Kundendaten änderst und einen Kunden in den Papierkorb legst.

Die CI

FarbenWas eine Farbkarte zeigt, welche Werte du mit einem Klick kopierst, wie du Farben im Entwurf anlegst und was die vier Rollen Hauptfarbe, Zweitfarbe, Akzent und Neutral bewirken.

AbstufungenWie der Editor zu jeder Farbe die Abstufungen 50 bis 950 rechnet, Neutraltöne mit einem Hauch der Hauptfarbe vorschlägt und passende Farbklänge aus der Hauptfarbe zeigt.

SchriftenWie du Schriften aus dem Katalog wählst, eigene hochlädst oder nur mit Namen führst, was die drei Lizenzen bedeuten und warum eine Hausschrift das Haus nie als Datei verlässt.

SchriftgrößenWie du aus einer Grundgröße und einem Verhältnis eine Reihe von Schriftgrößen rechnen lässt, jede Stufe einzeln anpasst und wie die Größen im Code ankommen.

LogosWie du Logos hochlädst, Grund, Mindestbreite und Schutzzone festlegst, Zusatzformate wie EPS anhängst und Wortmarken als Platzhalter nutzt, bis das Logo fertig ist.

RegelnDie vier Arten von Regeln in nexbrand: Farbpaare, Logo auf Grund und Schriften werden nachgerechnet, freie Regeln bleiben Text für Menschen. Dazu Vorschläge aus der Prüfung.

Beispiele und UIWie du Beispieldateien zu einer Fassung legst und wie Beispielseite und UI-Elemente zeigen, wie Knöpfe, Felder, Karten und Kennzeichen in der CI aussehen.

DunkelmodusWie der Dunkelmodus einer CI sechs Teile einer Oberfläche auf Farben der Palette legt, wie nexbrand ihn vorschlägt, prüft und als Code ausgibt.

Fassungen und Projekte

EntwürfeWarum jede Änderung zuerst ein Entwurf ist, wie du eine neue Fassung anlegst, bearbeitest, speicherst und mit einem Gültigkeitsdatum veröffentlichst, und was danach unveränderlich bleibt.

ZeitleisteWie die Zeitleiste alle Fassungen eines Kunden zeigt, wie „Stand am“ die CI eines beliebigen Tages aufruft und was eine Fassung mit einem späteren Gültigkeitsdatum bewirkt.

VergleichenWie der Reiter Verlauf alle Fassungen mit Herkunft und Notiz auflistet und zwei Fassungen Feld für Feld vergleicht, mit Farbabstand und den geänderten Prüfungen.

ProjekteWie ein Projekt auf einer Fassung des Kunden steht, je Teil erbt, ergänzt oder eigene Werte hat und erst dann auf eine neuere Fassung wechselt, wenn jemand es umstellt.

Prüfen

PrüfungenWas der Reiter Prüfung nachrechnet: Hinweise mit ihren Schwellen, die Kontrasttabelle jeder Farbkombination und wie Menschen mit Farbfehlsichtigkeit die Palette sehen.

KontrastrechnerWie der Kontrastrechner zwei beliebige Farben gegen alle Kriterien prüft, die nächste reichende Farbe im gleichen Farbton vorschlägt und das Ergebnis bei Farbfehlsichtigkeit zeigt.

Mit dem Kunden

AbstimmungWie du einen Entwurf mit bis zu vier Richtungen dem Kunden vorlegst, er ohne Konto kommentiert und wählt, und wie seine Wahl ohne weiteren Klick zur veröffentlichten Fassung wird.

Öffentliche SeitenWie du eine Fassung als Leseseite ohne Konto freigibst, für Druckerei, Fotografin oder Entwickler, mit Laufzeit und Passwort, und was auf so einer Seite steht und was nicht.

SammelnWie nexbrand Farben, Schriften und Logos aus einer Webseite, einem GitHub-Repo oder einem PDF-Styleguide misst, ordnet und als Entwurf übernimmt, und was dabei nie geschieht.

Gegen die CI prüfenWie nexbrand eine Webseite, ein Repo oder ein PDF gegen die geltende CI prüft, fast richtige Farbtöne und fremde Schriften findet und Code über API und MCP prüft.

Für Entwickler

Als CodeWie du jede Fassung als CSS-Variablen, Tailwind-4-Theme, SCSS oder Design Tokens kopierst oder herunterlädst, mit Abstufungen, Schriften, Größen und Dunkelmodus.

APIWie du ein API-Token anlegst, was es lesen darf, welche Adressen unter /api/v1 bereitstehen und wie ein Token der Stufe Entwurf eine neue Fassung als Entwurf zurückschreibt.

MCPWie ein KI-Werkzeug im Editor über MCP die CI eines Kunden liest, Kontraste prüft, Fassungen vergleicht, Code gegen die CI prüft und ein Redesign als Entwurf zurückschreibt.

KI-DienstWie jedes Konto einen eigenen KI-Dienst einträgt, wofür nexbrand ihn benutzt, was dabei hinausgeht und wie die Liste aller Anfragen der letzten 14 Tage aussieht.

Konto und Betrieb

Zugriff und TeamsWie Zugriff je Kunde funktioniert: drei Rechte, Einladungen per Name oder Link, Teams mit Leitung und warum ein Kunde, den jemand nicht sehen darf, für ihn gar nicht existiert.

Konto und AnmeldungProfil und Bild, Passwort, zweiter Faktor mit Wiederherstellungscodes, die Verknüpfung mit einem Anmeldeanbieter, Einladungen annehmen und andere Browser abmelden.

BetreiberWas der Betreiber unter Einstellungen, Server regelt: Konten und Sperren, Anmeldung mit authentik in einem Schritt, die Schalter nach draußen, Mail, Sprachen, Log und Versionsprüfung.

SicherungWie nexbrand jede Nacht sichert, wie du von Hand sicherst, eine Sicherung prüfst, herunterlädst und zurückspielst, und wie du mit einer Sicherung auf einen neuen Server umziehst.

Pavo sagtJeden Kunden findest du mit der Schnellsuche: Drück Strg K, auf dem Mac Cmd K, und tipp seinen Namen, seine Branche oder den Namen einer seiner Schriften.