Brand System. Die Schicht, die alles trägt.
Vier Layer, eine Quelle. Kein PDF-Styleguide, der in der Schublade landet — sondern ein System aus Tokens, Voice und Visual Rules, das Ads, Web und Verpackung konsistent hält. Live im Code, nicht in Adobe.
PDF-Styleguides bremsen. Sie tragen nicht.
Die meisten Brand Guidelines sind 60 Seiten Adobe-PDF. Schön gelayoutet, einmal vom Designer abgenommen — und danach operative Deko. Wer die Brand baut (Performance-Team, Theme-Dev, Verpackungs-Druckerei) öffnet die Datei einmal, sucht den Hex-Code und denkt sich den Rest selbst aus.
Resultat: Ads sehen anders aus als die Website. Die Website anders als der Karton. Der Karton anders als der Newsletter. Und jeder im Team verteidigt seine Version mit „so steht's auf Seite 47".
Ein Brand System macht das Gegenteil: Es ist Code, kein Dokument. Es lässt sich nicht „interpretieren". Und es zwingt jedes Asset in dieselbe Sprache — visuell wie verbal.
Vier Layer. Eine Quelle.
So bauen wir das System bei jeder Brand auf. Jeder Layer ist eigenständig nutzbar — zusammen tragen sie die ganze Brand.
Tokens als Code
Farbe, Typo, Spacing, Motion — als CSS-Variablen, Figma-Variables und Tailwind-Theme. Eine Quelle, drei Systeme. Wenn das Primary-Blau wechselt, wechselt es überall — in 30 Sekunden.
Voice mit Beispielen
Drei Tonlagen (Hero / Body / Functional) plus expliziter „Was wir nie sagen"-Block. Mit konkreten Vorher/Nachher-Beispielen statt Adjektiven wie „freundlich" oder „professionell" — die niemand operationalisieren kann.
Visual System
Photography-Rules (was ist on-brand, was nicht), Icon-Set, Pattern-Library, Motion-Rules. Inklusive Negativ-Beispiele — weil Founder lernen schneller aus „so nicht" als aus „so".
Application Layer
Wie die Tokens in Shopify-Theme, Meta-Ads-Templates und Verpackungs-Druckdateien landen — automatisiert, nicht manuell. Wenn der Designer den Brand-Token ändert, ist die Ad fünf Minuten später aktualisiert.
So sieht ein Token-Layer in echt aus.
Auszug aus dem Brand-System einer 7-stelligen DTC-Brand, die wir betreuen. Diese 30 Zeilen ersetzen 60 PDF-Seiten — und sie sind maschinenlesbar. Theme, Ad-Templates und Newsletter ziehen sich Werte hier raus.
/* brand.tokens.css · single source of truth */ :root { /* Color · primary palette */ --brand-primary: #0A0E2E; --brand-primary-soft: #1A1F4A; --brand-accent: #E8C547; --brand-cream: #F5EFE6; /* Typography · scale */ --type-display: 'Inter Tight', sans-serif; --type-body: 'Inter Tight', sans-serif; --type-scale-h1: clamp(40px, 6vw, 72px); --type-scale-h2: clamp(28px, 4vw, 48px); --type-scale-body: 17px; /* Spacing · 8pt grid */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-8: 64px; /* Motion · curves & timing */ --ease-out-soft: cubic-bezier(.16,1,.3,1); --duration-fast: .18s; --duration-base: .32s; }
Die gleiche Datei landet — automatisiert — als Tailwind-Theme im Marketing-Repo und als Figma-Variables-File im Design-System. Drei Targets, eine Quelle. Inkonsistenz ist nicht mehr möglich.
Wie wir das bei Hearo gebaut haben.
Hearo (HNO-Health-Brand, USA) hatte ein PDF-Brand-Book und drei Agenturen, die alle „on-brand" gearbeitet haben — visuell aber stark divergent. Wir haben das System auf vier Code-Files reduziert: tokens.css · voice.md · visual.md · application.json. Jede neue Ad, jede neue PDP-Section, jede Verpackungs-Adaption zieht jetzt aus diesen vier Files. Result: 30+ Touchpoints in identischem System. Kein „bitte das Logo etwas größer"-Feedback mehr.
Vier Hebel, die du heute umsetzen kannst.
- Migriere dein Brand-Book in Tokens. Egal ob du Designer oder Founder bist — verwandle dein PDF in eine
tokens.css-Datei. 30 Minuten. Sofort hat dein Theme eine Single-Source-of-Truth. - Schreib eine Voice-Doc mit Beispielen statt Adjektiven. Statt „freundlich, modern, professionell" → 3 echte Texte pro Tonlage plus 3 Beispiele für „so nicht". Performance-Team, AI-Copy-Tools und neue Hires verstehen das in Minuten.
- Mach „so nicht"-Visuals zu deinem stärksten Doc. Liste 10 Beispiele auf, die fast wie deine Brand aussehen, aber nicht sind. Negativbeispiele klären schneller als 50 positive.
- Verbinde Tokens mit deinem Theme. Shopify-Themes können CSS-Variablen direkt referenzieren. Heißt: wenn der Designer den Token ändert, ändert sich der Store live — kein Theme-Editor-Klick.