Corporate Design Kit

Demo-Brand · Konzept-Entwürfe · Alle Komponenten editierbar & als PNG exportierbar

01Design Tokens

Typografie

Logo-System

03Lower Thirds

Live-Editor · Lower Third

Name

Funktion

Ticker

Overlay-Stärke75%

Lars Wagemann

Trainer SG LVB

BOS

Classic Bar

Bordeaux · Signal · Logo

📷

Lars Wagemann

Trainer SG LVB

BOS

Split Modern

Initialen · Ink · Bordeaux-Tag

📷

Lars Wagemann

Trainer SG LVB

BOS

Minimal Line

Signal-Pip · Gradient Rule

📷

BOS

Live

Live · Aktuell · Heute

--:--

Ticker-Bar

Full Width · Lauftext

📷

04Titelcards

Live-Editor · Titelcards

Format

Titel

EditionPräs.

Overlay-Stärke75%

2026

BOS

Präsentiert von Brand

Titel

Untertitel

Award · Geometric Dark · 1920×1080

📷

BOS

2026 · Edition

Cup

Turnier · Stadt

Cup · Stadium · 1920×1080

📷

BOS

Live

Präsentiert von

Roter Teppich

Premiere

Brand

Premiere · Luxury · 1920×1080

📷

BOS

Livestream startet in Kürze

Titel

Untertitel · Brand

Std

Min

Sek

Livestream Waiting Screen · 1920×1080

📷

⚡ KI-Analyse

Marke

◈ Identität

⊙ Hierarchie

⚫ Farben

Aa Typografie

⬢ Logo & Assets

⚊ Header & Footer

♾ Brand-Formen

▲ Backgrounds

☷ Plattformen

□ Layouts

▤ Raster & Guides

▭ Brand-Formate

◎ Formensprache

❝ Textboxen

Test

☼ Live-Vorschau

Regeln

▦ Richtlinien

✎ Wording & Ton

Brand-Guide hochladen

Lade Seiten aus einem Brand-Guide (PDF, PNG, JPG) hoch. Bei Text-PDFs werden Farben/Schriften direkt aus dem Klartext gelesen — bei reinen Bildern braucht es ein Vision-Modell.

⇓

Ablegen oder klicken

PNG · JPG · PDF (max. 12 Seiten)

Analyse starten

Zwei Wege: Text-Analyse nutzt den extrahierten PDF-Klartext und funktioniert mit jedem LM-Studio-Modell (auch Code-Modelle wie qwen-coder). Bild-Analyse braucht ein Vision-Modell (LLaVA, Qwen2-VL).

Markenidentität

Grundlegende Informationen — fließen direkt in alle generierten Inhalte ein.

Markenname

Claim / Tagline

Branche

Gründungsjahr

Tonalität

Zielgruppe

USP

Markenbeschreibung

Markenwerte (Enter zum Hinzufügen)

Markenhierarchie

Definiere Dachmarke und Submarken / Sendungsmarken. Submarken erben alle Tokens der Dachmarke und überschreiben nur was abweicht.

Aktive Marke

Welche Marke ist gerade aktiv? Tokens anwenden wirkt immer auf die aktive Marke.

📋 Farben aus Brand-Guide

📄

Brand-Guide hochladen um Farben automatisch zu erkennen.

📄 PDF auswählen

Farbpalette · Kategorisiert

Kategorien sind umbenennbar. Farben per Klick bearbeitbar. Farben mit Token-Badge (z.B. primary) steuern direkt eine CSS-Variable.

Token-Zuweisung · CSS-Variablen

Primary

Secondary

Akzent

Hintergrund

Text

Dark BG (--bd)

Brand Pale (--bp)

Typografie

Familie = Schrift-Quelle (Google-Font-Name eingeben). Rolle = Anwendung im Layout (Display, H1, Body…) mit eigenem Weight, Size und Letter-Spacing. Pro Familie beliebig viele Rollen.

Display · --ff-d

Aa Display

Heading · --ff-h

Aa Headline

Body · --ff-b

Aa Fließtext

Caption · klein

Aa Caption / Label

Abstände & Radien

Spacing Unit

Radius SM

Radius MD

Radius LG

Logo-Varianten

4 Standard-Slots. SVG wird bevorzugt, PNG als Fallback. Für den Export wird SVG intern zu PNG konvertiert.

Hell / Standard

+ Logo

Dunkel / Negativ

+ Logo

Monochrom / Schwarz

+ Logo

Akzent / Sonderform

+ Logo

Brand Assets

Grafik-Elemente, Muster, Icons. SVG bevorzugt. Name per Klick editierbar.

+ Asset hinzufügen (PNG · JPG · SVG)

Do — Erlaubt

Don't — Verboten

Wording & Tonalität

Sprachliche Leitlinien für KI-generierte Texte.

Ansprache

Schlüsselwörter / Buzzwords (Enter)

Tabu-Wörter (Enter)

Beispiel-Sätze / Tonalität

Brand-Formen & Layout-Vorlagen

Lade SVG-Dummys hoch. Die App zerlegt sie automatisch in einzelne Bausteine (Kurven, Logos, Akzentformen) und stellt sie im Slide-Designer + der KI als Brand-Assets zur Verfügung. Komplette Layouts können zusätzlich als Stil-Vorlage gespeichert werden.

⌬

SVG hierher ziehen — oder klicken

Mehrere Dateien gleichzeitig möglich. Jede SVG wird geparst und du wählst pro Element die Rolle.

Asset-Bibliothek 0 Formen · 0 Layouts

Brand-Formen mit hardgecodeten Farben (z. B. nach SVG-/PDF-Import) zeigt das 🎨-Symbol pro Karte. Klick tokenisiert die häufigsten fill/stroke-Werte zu {{fill}}/{{stroke}} — die Form folgt dann automatisch dem Brand. Alle Formen gleichzeitig: „🎨 Alle tokenisieren" oben rechts.

Noch keine Brand-Formen. Lade oben eine SVG hoch.

Header & Footer

Header (oben)

Stil

Hauptfarbe

Schattenfarbe

Footer (unten)

Stil

Hauptfarbe

Schattenfarbe

Logo

Vorschau · klickbar

Klick auf Header/Footer → Eigenschaften im Inspector. Im Diagonal-Modus: Farben über die Schnellsteuerung oben ändern.

Format-Buttons oben rechts: 16:9 · 1:1 · 4:5 · 9:16

Inspector

Kein Element ausgewählt.

Klick auf Header oder Footer in der Vorschau.

▸ Erweitert · Slots & Elemente

Slot-Inhalte (Logo, Text, Seitenzahl), frei platzierte Elemente, Hintergrund-Grafiken.

Textboxen

Vorlagen für Callouts, Hinweise, Quote-Karten. Jede Vorlage erscheint im Slide-Designer unter Einfügen → Callout. Style-Werte greifen direkt auf Brand-Tokens (z. B. @brand.accent) — Theme-Switch färbt die Boxen automatisch um.

Brand-Backgrounds

Parametrische Hintergründe für Folien, Cards, Header/Footer. Volle Type-Palette: Solid · Linear · Radial · Conic · Dots · Lines · Iso · Noise/Grain · Layered. Verwendung über Rollen-Tokens (@brand.bg.primary etc.) oder direkte ID-Referenz.

Plattformen & Safe-Areas

Plattform-Specs für Social Media, Mediatheken und Print. Quelle: platform_profiles.json im Projekt-Repo. Aktiviere die Plattformen, die für Dein Brand relevant sind — sie stehen später im Slides-Designer als Format-Optionen zur Verfügung (Welle 4). 0 aktiviert

Raster & Guides · klickbar

Klick in die Vorschau auf Spalten / Margins / Baseline / Guides → Eigenschaften rechts im Inspector. Klick aufs Lineal oben/links setzt einen neuen Guide. Drag eines Guides verschiebt ihn live.

Klick in die Vorschau auf eine Spalte, einen Guide oder den Rand, um Eigenschaften im Inspector rechts zu sehen.

Inspector

Kein Element ausgewählt.

Klick in die Vorschau links auf Spalten, Margins oder Guide — die Eigenschaften erscheinen hier. Per Default zeigt der Inspector die globalen Raster-Eigenschaften.

▸ Guides & Format-Overrides · Erweitert

Alle Guides der Marke in tabellarischer Form. Optional pro Format binden (z. B. Story-Guide nur für 9:16).

Brand-Formate

Eigene Formate, die die Marke als Standard nutzt — DIN Lang, A4-Hoch, Plakat 18/1, Newsletter-Header, etc. Werden im Slides & Carousel-Tab unten in der Format-Sidebar als zusätzliche Buttons sichtbar. Grid + Zones werden automatisch aus dem Aspect-Ratio abgeleitet. 0 Formate

Brand-Layouts

User-eigene Slide-Layouts mit Brand-Tokens. Im Slides & Carousel-Tab über den ⭐ Als Template-Button speicherbar. Hier zentral verwaltbar — Vorschau, Rename, Apply, Delete. Layouts reisen im Brand-Bundle mit.

Formensprache

Zentrale parametrische Steuerung der Grundformen. Jede Eigenschaft greift sofort auf alle Shapes der Marke, die der Brand folgen. Per-Form-Overrides sind im Inspector der jeweiligen Form möglich.

Eckenrundung

Pro Ecke in % der kürzeren Seite — TL/TR/BR/BL können unterschiedlich sein.

↖ TL ↗ TR ↙ BL ↘ BR

Skew

Schräglage in Grad — dynamischer Look. ±30° wirken stark.

Skew X Skew Y

Fill / Verlauf

Solide Brand-Farbe oder Verlauf (linear/radial). Verläufe greifen auf alle Brand-folgenden Shapes — typisch für Hero-Säulen und KPI-Hintergründe.

Stroke / Border

Rand um die Form. Width 0 = kein Stroke. Style + Farbe wirken brand-weit.

Width (px) Style

Farbe

Glow / Schein

Weicher Halo um die Form — z.B. für Hero-Säulen oder KPI-Karten.

aktiviert

Blur (px) Opacity Farbe

Live-Vorschau · alle 4 Formate

Eine Beispiel-Folie, gerendert in 16:9, 1:1, 4:5 und 9:16 mit den aktuellen Brand-Tokens, Schriften, Logos und Header/Footer. Jede Änderung im Brand Setup propagiert sofort.

16:9 · 1920×1080 · Slide / Präsentation

1:1 · 1080×1080 · Quadrat / Social

4:5 · 1080×1350 · Hochformat / Feed

9:16 · 1080×1920 · Story / Reels

Corporate Design Kit

Neues Farbschema