Ruhig
Navy trägt die Bühne. Weißraum schafft Vertrauen.
BLUNATECH
Design System
Überblick
Das Wachstums-Cockpit.
BLUNATECH macht eine komplexe Aufgabe sichtbar beherrschbar. Das Design zeigt Marketing als klar steuerbares System, mit einer ruhigen Bühne, einer eindeutigen Handlung und einem echten Produktbeweis.
Creative North Star
Entlastung.
Mit Kontrolle.
Hier gibt es einen Plan, einen nächsten Schritt und ein System, das regelmäßig arbeitet.
Visuelle Kurzform
- 01 Große Ergebnis-Aussage
- 02 Viel ruhige Fläche
- 03 Echter Produktausschnitt
- 04 Konkreter Beleg
Konkret
Ein Gedanke, ein nächster Schritt, ein verständliches Verb.
Beweisorientiert
Echte Mechanik und reale Produktoberfläche statt Behauptung.
Systematisch
Wissen, Planung, Inhalt und Umsetzung bilden eine Architektur.
Grundformel
Aussage. Raum. Produkt. Beleg.
Pro Grafik gibt es genau eine Botschaft.
Immer tun
- Blau als einzige Aktionsfarbe einsetzen.
- Fließtext kontrastreich in Navy halten.
- Weiße und Navy-Wash-Flächen ruhig takten.
- Aussagen durch Ablauf, Zahl oder Beispiel belegen.
- Motion dezent und vollständig reduzierbar halten.
- CTA als Verb plus Objekt schreiben.
Niemals tun
- Marketing-Buzzwords und unbelegte Heilsversprechen.
- Generische SaaS-Heros oder identische Kartenraster.
- Gradient-Text, dekoratives Glassmorphism oder dicke Seitenstreifen.
- Animationen ohne Informationswert.
- Warmes Off-White oder Cream als Fläche.
- Ein Eyebrow-Label über jeder Sektion.
Grundlagen
Farbe, Typografie und Raum.
Eine disziplinierte Palette und ein 8px-Raster halten jede Fläche ruhig. Navy trägt, Blau zeigt, Amber warnt.
Markenfarben
Klicken zum Kopieren
Fundament-Navy
#101D3Fnavy-900Bühne, Display-Text, Abschlussflächen
Signalblau
#165DFBblue-500Einzige Farbe für Aktion und Fokus
Warn-Amber
#FE9900amber-500Nur rechtliche oder dringliche Hinweise
Logo-Cyan
#0690D7kein CSS-Token, nur LogoBleibt ausschließlich im Logo
Flächen und Text
Klicken zum Kopieren
Reinweiß
#FFFFFFsurfaceStandardfläche und Karten
Navy-Wash
#F0F2F7navy-50Getönte Sektionen und Felder
Fließtext
#253158navy-700Körpertext auf hellen Flächen
Navy-Rahmen
#E0E4EEnavy-100Karten, Tabellen und Trennlinien
Systemfarben
Klicken zum Kopieren
Body
#4B5563body-Regel, kein TokenSekundärer Körpertext in Systemkontexten
Muted
#94A0BEnavy-300Metadaten, niemals längerer Fließtext
Blue Soft
#558FFBblue-400Akzenttext auf dunklen Markenflächen
Navy Darkest
#0A1230navy-950Tiefe Proof-Chips und Codeflächen
Typografie
Zwei Schriften. Klare Aufgaben.
Struktur und Autorität. Gewichte 700 für Display und Headlines.
Präziser Fließtext, Belege und CTA. DM Sans ist nur Altbestand.
Display XL
72px / 700 / 1.00Wachstum wird planbar.
Display LG
60px / 700 / 1.05Ein klares System.
Headline LG
48px / 700 / 1.10Klar planen. Regelmäßig umsetzen.
Headline MD
36px / 700 / 1.15Von der Idee bis zur Umsetzung.
Title LG
24px / 700 / 1.25Jahresplanung
Body LG
18px / 400 / 1.55BLUNATECH bringt Wissen, Planung, Maßnahmen und Inhalte in eine nachvollziehbare Architektur.
Body MD
16px / 400 / 1.50Ein präziser Satz für Regeln, Belege und Erläuterungen.
Proof MD
14px / 600 / 1.40Über 500 Maßnahmen
Label Small
12px / 700 / 1.20PRODUKTBEWEIS
8px-Raster
Raum ist Teil der Aussage.
AB
4px8px16px24px32px48px64px80pxForm und Tiefe
Flach im Ruhezustand.
Small
6pxMedium
8pxLarge
12pxProof-Karte
16pxCard
24pxAsset
32pxPille
9999pxRahmen statt Schatten
1px Navy-100, klare Fläche, keine künstliche Tiefe.
Reaktion mit Zweck
Optional 4px Lift und ein zurückhaltender Navy-Schatten.
0 8px 30px -4px rgba(22,93,251,0.3)Hover: 0 16px 50px -8px rgba(22,93,251,0.4)0 12px 24px -8px rgba(16,29,63,0.15)Optional mit translateY(-4px)Komponenten
Wiedererkennbare Bausteine.
Komponenten übersetzen die Grundlagen in konkrete Entscheidungen. Jede Variante hat eine Aufgabe, einen Zustand und eine Grenze.
Logo Lockup
Nur freigegebene PNG-Master.
logo-weiss.png
logo-fulltext.png
logo-icon.pngProduct Frame
24px RadiusEchte Oberfläche. Ein Fokus.
Ein Frame enthält einen aktuellen Screenshot oder eine nachweislich aktuelle Website-Simulation. Der Crop darf Navigation reduzieren, aber niemals Funktionen erfinden oder umbauen.
1px Navy-100unverzerrtes SeitenverhältnisBrowser-Chrome nur bei Kontext
Proof Chip
Über 500 Maßnahmen 12 Monate planbar max. 6 WörterGenau eine geprüfte Tatsache. Nie ein frei erfundener Prozentwert.
Customer Proof
12 bis 28 WörterFreigabe vor Gestaltung.
Logo, Zitat, Name, Funktion, Unternehmen und Bild werden einzeln schriftlich freigegeben. Keine erfundene Sternebewertung. Kundenlogos bleiben in ihren Originalfarben und erhalten bei Bedarf eine weiße Schutzfläche.
Buttons
Verb plus Objekt.
Primär: Signalblau, Pillenform, sichtbarer Fokus und privilegierter blauer Schatten. Das Amber-Hover-Verhalten der bestehenden Website ist Altzustand und kein neuer Standard.
Inputs und Karten
Zustände bleiben eindeutig.
Flach und präzise
Weiß, 1px Navy-100, 24px Radius und 24px bis 40px Innenabstand.
Optionaler Lift
Erst beim Hover: Blue-200 Rahmen und ein zurückhaltender Schatten.
Navigation
Desktop klar. Mobil fokussiert.
Signature Hero
Große Aussage.
Konkreter Beweis.
Die Mappe setzt das Thema.
Navy-900, dezentes Mesh, zweispaltige Aussage, eine feine Trennlinie und ein ruhiger Reveal.
Werbe-Assets
Eine Grafik. Eine Botschaft.
Werbegrafiken sind keine verkleinerten Landingpages und keine Feature-Inventare. Sie übersetzen die Markenlogik in einen sofort verständlichen Beweis.
Farbverteilung
Dominanz ist messbar.
Dunkles Marken-Asset
70 bis 85 Prozent Navy, 10 bis 20 Prozent Weiß, höchstens 10 Prozent Blau.
Helles Editorial-Asset
75 bis 90 Prozent Weiß oder Navy-Wash, 10 bis 20 Prozent Navy, höchstens 8 Prozent Blau.
Amber: höchstens 3 Prozent der Fläche und maximal einmal pro Grafik.
Typografie bei 1080px
Richtwerte für Lesbarkeit.
| Ebene | Richtwert | Gewicht und Zeilenhöhe | Aufgabe |
|---|---|---|---|
| Display XL | 76px bis 104px | 700, 0.98 bis 1.05 | Kurze Ergebnis-Aussage |
| Display LG | 64px bis 80px | 700, 1.05 | Längere Headline im Hochformat |
| Headline MD | 44px bis 58px | 700, 1.1 | Vergleich, Kunde oder Funktion |
| Body LG | 28px bis 34px | 400 bis 500, 1.45 | Ein erklärender Satz |
| Proof | 22px bis 28px | 600, 1.35 | Zahl, Quelle oder Beleg |
| Label | 18px bis 22px | 700, Großbuchstaben | Seltener Kategorie-Marker |
Formatmatrix
Jedes Format wird neu komponiert.
Sicherheitszone
Quadrat
1080 x 108080px rundum
Social Feed und AnzeigenHeadline oben, Produktfenster untenSicherheitszone
Hochformat
1080 x 135072px seitlich, 88px vertikal
Feed mit hoher BildschirmflächeHeadline im oberen Drittel, Produkt in der unteren HälfteSicherheitszone
Querformat
1200 x 63072px rundum
Link-Vorschau, Display, LinkedInText links, Produkt rechts oder unten angeschnittenSicherheitszone
Story
1080 x 192080px seitlich, 180px oben, 250px unten
Story und Reels CoverHeadline oben, vertikaler Produkt-Crop, CTA mittig untenSicherheitszone
Video Querformat
1920 x 1080120px rundum
Präsentation, YouTube, WebsiteText links, UI-Demonstration rechtsAsset-Familien
Sieben wiederholbare Systeme.
Product Proof
Ein Marketingjahr. Klar geplant.
Das Produkt belegt die große Aussage.Logo, Ergebnis-Headline, Mechanik und ein großer echter Produkt-Crop.Problem und Entlastung
Nicht mehr Marketing-Tools. Ein System.
Einen Alltagsschmerz in klare Entlastung übersetzen.Große Textaussage, kleiner Mechanik-Beleg, optional ein fokussierter UI-Ausschnitt.Architecture
Von der Standortbestimmung bis zur Umsetzung.
BLUNATECH als zusammenhängendes System zeigen.Drei bis fünf geordnete Stationen. Kein komplexes Systemdiagramm.Feature Focus
Newsletter erstellen. Direkt im Plan.
Eine konkrete Funktion mit ihrem Ergebnis verbinden.40 Prozent Erklärung, 60 Prozent echter UI-Ausschnitt, höchstens zwei Annotationen.Evidence
Über 500 Maßnahmen. Ein klarer Plan.
Vertrauen durch belegte Produktfakten schaffen.Eine freigegebene Tatsache, kurze Einordnung und kleiner Markenbezug.Customer Voice
Konkrete Erfahrung statt Werbeversprechen.
Eine freigegebene Erfahrung sichtbar machen.Kundenlogo, Zitat, Name, Rolle und Unternehmen mit schriftlicher Freigabe.Industry Edition
Marketingplanung für das Handwerk.
Branchenrelevanz ohne neue Markenwelt zeigen.Gleiches System, angepasste Sprache, plausible Demo-Daten und echter Produkt-Crop.Produkt & Bild
Echte Oberfläche schlägt erfundene UI.
Das Produkt ist der stärkste Beweis der Marke. Screenshots stammen aus der aktuellen App, zeigen plausible synthetische Daten und bleiben technisch unverändert.
Priorisierte Szenen
Zehn belastbare Produktbeweise.
Jahresplanung
12 gefüllte Monate und unterschiedliche Marketingimpulse
components/planning/year-grid-view/year-grid-view.tsxMonatsansicht
Mehrere Maßnahmen mit plausiblen Status und Kategorien
app/(protected)/dashboard/[month]/page.tsxKampagneneditor
Eingaben links und echte Vorschau rechts
components/planning/measure-page/campaign-unified-page.tsxNewslettereditor
Blockpalette mit Desktop- oder Mobilvorschau
components/newsletter/editor/newsletter-editor-page.tsxMaßnahmenbibliothek
Suche und mehrere farbige Kategorien
components/planning/massnahmen-bibliothek/Redaktion
Impulskarten, Quellenblock und Formatumschaltung
app/(protected)/redaktion/Fotodatenbank
Hochwertige und einheitliche Beispielbilder
components/media-library/media-library-page.tsxKontakt Booster
QR-Code plus Story, Landscape und Quadrat
components/contact-booster/Standortbestimmung
Analyse und Prioritäten ohne Umsatzprognose
components/full-assessment/book-shell.tsxAnalytics
Nur als Profi-Modus mit klar synthetischen Daten
components/newsletter/stats/NewsletterStatsPanel.tsxScreenshot-Standard
- Mindestens 1440 x 1024 CSS-Pixel bei DPR 2.
- Browser-Zoom 100 Prozent.
- Vollständig ausgefüllter Demo-Account.
- Plausible Termine, Monatsnamen und Status.
- Zuerst vollständige Szene, danach formatgerecht croppen.
- Desktopsoftware klar als Desktopsoftware darstellen.
Gesperrte Quellen
- Historische Dashboard-, Monats- und Tauschsystem-Konzepte.
- Testaufnahmen mit echten Accounts oder unfertiger UI.
- Monday-Screenshots und Kundenfeedback-Bilder.
- Kontakte-Screens mit echten Empfängerdaten.
- Website-Mockups ohne Prüfung gegen die App.
- Analytics mit nicht gekennzeichneten Demo-Werten.
UI-Annotationen
Hinweisen, nicht übermalen.
Bildsprache
Produktorientiert und glaubwürdig.
Echte Produktoberfläche
Immer die erste Wahl.
Freigegebenes Kundenmaterial
Logo, Zitat oder Bild nur mit dokumentierter Zustimmung.
Dokumentarische Betriebsaufnahme
Echte Tätigkeit, natürliches Licht und glaubwürdiger Raum.
Generierte Illustration
Nur sekundär und klar als illustrative Kampagnenwelt.
Fotografie
- Echte Arbeitssituationen in KMU.
- Menschen auf Augenhöhe.
- Ruhige Farben und neutrale Materialien.
- Handlung oder Kontext im Bild.
Keine KI-Klischees
- Keine Roboter, Glaskugeln oder Neon-Gitter.
- Keine Fantasie-Logos oder fehlerhaften Geräte.
- Keine generierte Produktoberfläche.
- Nie als reale Fallstudie ausgeben.
Sprache & Belege
Direkt. Ruhig. Nachprüfbar.
BLUNATECH nimmt Überforderung ernst, ohne sie zu dramatisieren. Nutzen kommt vor Funktion. Danach folgt die Mechanik. Eine Zahl erscheint erst, wenn Quelle, Geltungsbereich und Aktualität geklärt sind.
Direkte, respektvolle Ansprache
Ein Gedanke pro Satz
planen, auswählen, erstellen, prüfen
Mechanik nach dem Nutzen
Textlängen
Kurz genug für zwei Sekunden.
| Element | Empfehlung | Obergrenze |
|---|---|---|
| Headline | 4 bis 7 Wörter | 9 Wörter |
| Unterstützung | 8 bis 14 Wörter | 18 Wörter |
| Proof Chip | 2 bis 5 Wörter | 6 Wörter |
| CTA | 2 bis 4 Wörter | 5 Wörter |
| Annotation | 2 bis 4 Wörter | 5 Wörter |
Headline-Aufgaben
Eine Aufgabe pro Aussage.
Ein Marketingjahr. Klar geplant.
Was wird für den Betrieb einfacher?
Nicht mehr Marketing-Tools. Ein System.
Welcher bisherige Aufwand fällt weg?
Aus Maßnahmen wird ein klarer Plan.
Welches System macht den Unterschied?
Über 500 Maßnahmen. Ein System.
Welche nachweisbare Tatsache schafft Vertrauen?
CTA-System
Der Text hält, was der Klick liefert.
| Ziel | Bevorzugt | Alternative |
|---|---|---|
| Einstieg | Jetzt kostenlos starten | Kostenlos ausprobieren |
| Produktverständnis | Ablauf ansehen | Produkt kennenlernen |
| Vertiefung | Funktionen ansehen | So funktioniert es |
| Kontakt | Gespräch vereinbaren | Fragen klären |
| Inhalt | Beispiel ansehen | Mehr erfahren |
Claim-Status
Fünf operative Freigabestufen.
| Status | Bedeutung | Nutzung |
|---|---|---|
| Positionierung | Markenversprechen ohne konkrete Ergebniszahl | Als Headline zulässig, niemals als Garantie |
| Öffentlich verwendet | Auf der aktuellen Website sichtbar | Nur mit zusätzlichem Produkt- oder Wirkungsbeleg |
| Technisch belegt | Im Code oder reproduzierbar in der App nachweisbar | Mit Prüfdatum und passendem Tarif oder Modul |
| Kampagnenprüfung | Preis, Verfügbarkeit, Marktumfang oder zeitabhängige Aussage | Vor jedem Export erneut bestätigen |
| Gesperrt | Unbelegt, irreführend oder nur Demo-Inhalt | Nicht in Werbung verwenden |
Freigegebene Basis
Claims mit Status und Grenze.
Öffentlich sicherüber 500 Maßnahmen
Technischer Stand: 642 eindeutige Maßnahmen in 8 Kategorien. Über 600 erst nach reproduzierter Zählung, Website-Anpassung und Kampagnenfreigabe.
| Aussage | Status | Quelle | Werbliche Grenze |
|---|---|---|---|
| Jeder kann Wachstum. | Positionierung | Aktueller Hero auf blunatech.com | Markenstatement, keine Ergebnisgarantie |
| Ohne Vorwissen. Ohne Agentur. Ohne Zufall. | Positionierung | Aktuelle Website-Kommunikation | Nur mit sichtbarer Produktmechanik |
| Über 500 Marketing-Maßnahmen | Technisch belegt und öffentlich verwendet | lib/constants/measures.ts | Sichere öffentliche Untergrenze |
| 12 Monate Marketing planen | Technisch belegt | year-grid-view.tsx | Mit echter Jahresansicht zeigen |
| Bis zu 3 Kommunikationsprioritäten | Technisch belegt | kommunikations-schwerpunkt/page.tsx | Nur im Kontext der Planungslogik |
| 15 Newsletter-Blocktypen | Technisch belegt | newsletter-blocks-v2.ts | Vor Kampagnenstart neu zählen |
| 70 Newsletter-Varianten | Technisch belegt | newsletter-blocks-v2.ts | Verfügbarkeit im Zugang prüfen |
| 8 Newsletter-Vorlagen | Technisch belegt | newsletter/templates/presets.ts | Vor Kampagnenstart neu zählen |
| 3 Inhaltsvorschläge | Technisch belegt | fastlane-generator.ts | Als Vorschläge beschreiben |
| 8 Kategorien und 5 Formate | Technisch belegt | lib/types/redaktion.ts | Mit aktueller Oberfläche zeigen |
| 17 Ansichten der Standortbestimmung | Technisch belegt | chapter-renderer.tsx | Paketverfügbarkeit prüfen |
| 3 Kontakt-Booster Formate | Technisch belegt | social-image-generator.tsx | Story, Landscape und Quadrat |
Reproduzierbare Prüfung
Code statt Bauchgefühl.
new Set(measures.map(item => item.id)).sizeexportierte sichtbare Kategorien zählenObject.keys(blockTypeRegistry).lengthSumme metadata.variants.lengthnewsletterTemplates.lengthVarianten in der aktiven Generierungsanweisung zählenCATEGORY_LABELS und OUTPUT_FORMAT_LABELS zählenFORMATS.length plus Pixelmaßegerenderte Ansichten inklusive InhaltsverzeichnisPrüfdatum und geprüfter Commit gehören in jeden Kampagnenbrief.
Vor Export neu prüfen
- Preis, Testzeitraum, Tarif und Kündigungsrhythmus.
- Zeitversprechen und Länderabdeckung.
- Reichweite und verfügbare Profi-Module.
- Kundenzahl, Umsatz, Newsletter und Conversion.
Gesperrte Aussagen
- Garantierter Umsatz, Leads oder Sichtbarkeit.
- Erprobt oder bewährt ohne dokumentierte Methodik.
- Fiktive Prozentwerte oder unbenannte Conversion-Zahlen.
- Interne, nicht gebuchte oder unfertige Funktionen.
Kundenbeleg: fünf Freigaben
- Schriftliche Freigabe für alle Bestandteile.
- Originalquelle mit Datum.
- Kontext zu Nutzung und Zeitraum.
- Kürzung ohne Sinnveränderung.
- Interne verantwortliche Freigabe.
Bewegung & Lesbarkeit
Bewegung erklärt Fokus.
Motion ordnet Reihenfolge und Aufmerksamkeit. Sie ist kein dekorativer Dauerzustand und verschwindet bei reduzierter Bewegung, ohne Information zu verlieren.
Timing
Ruhig, aber nicht träge.
cubic-bezier(0.16, 1, 0.3, 1)| Ebene | Dauer | Einsatz |
|---|---|---|
| Mikrointeraktion | 160ms bis 220ms | Hover, Fokus und kleine Zustandsänderung |
| UI-Übergang | 280ms bis 420ms | Tab, Panel und Vorschauwechsel |
| Marken-Reveal | 600ms bis 800ms | Logo, Headline und Produktfenster |
| Szenenwechsel | 500ms bis 700ms | Aussage und Beweis im Werbevideo |
Live-Beispiel
Maximal 24px Bewegung.
Skalierung beginnt frühestens bei 0.98. Kein dauerhaftes Schweben, Drehen, Glühen oder Parallax.
ProduktfokusVideo-Rhythmus
6 bis 10 Sekunden.
0 bis 2sProblem oder Ergebnis
2 bis 5sEchte Produktaktion
5 bis 8sBeleg und Produktname
EndframeLogo und CTA
Für 15 bis 30 Sekunden bleibt die Reihenfolge gleich. Es kommen höchstens drei Produktmomente hinzu. Eine neue Szene beginnt erst, wenn die vorherige Aussage lesbar war.
Fahrten langsam genug aufzeichnen, damit das Ziel klar erkennbar bleibt.
Optional mit einem dezenten Signalblau-Ring markieren.
Kernaussage und CTA bleiben vollständig verständlich.
Translation, Skalierung und Stagger entfallen. Sichtbarkeit und Reihenfolge bleiben erhalten.
Untertitel stehen innerhalb der Sicherheitszone und enthalten höchstens zwei Zeilen.
Accessibility
Lesbarkeit ist nicht verhandelbar.
Display, Logo und kurze Belege
Headlines und Fließtext
Für große CTA und kurze Labels
Nur sekundäre Metadaten
Produktion
Vom Brief zum geprüften Export.
Jedes Seitenverhältnis erhält eine eigene Komposition. Logo, Text, Produkt, Beleg und Hintergrund bleiben getrennt editierbar. Der digitale Standard ist sRGB.
Logo, Text, Produkt, Beleg und Hintergrund bleiben einzeln editierbar.
Produkt-Screenshot als Smart Object oder verknüpfte Originaldatei. Niemals mehrfach komprimieren.
Text bleibt bis zum finalen Export editierbar.
Digitaler Standard. Raster mindestens in finaler Pixelgröße, für flexible Crops bevorzugt doppelt.
Export
Format folgt dem Einsatz.
| Einsatz | Format | Qualität |
|---|---|---|
| Social-Grafik mit UI und Text | PNG | Verlustfrei, volle Größe |
| Fotozentrierte Social-Grafik | JPG oder WebP | 85 bis 92 Prozent, Textschärfe prüfen |
| Link-Vorschau | PNG oder WebP | 1200 x 630, unter Plattformlimit |
| Kurzes Werbevideo | MP4, H.264 | sRGB, konstante Bildrate, mindestens 1080px |
| Transparente Logos | PNG | Originalauflösung, kein zusätzlicher Rand |
| Druck | 300 DPI, CMYK nur nach Abstimmung |
Dateibenennung
Reproduzierbar statt kreativ.
blunatech_product-proof_jahresplanung_1080x1350_de_v01.pngblunatech_product-proof_jahresplanung_1080x1350_de_v01.pngblunatech_feature_newsletter_1080x1920_de_v03.mp4blunatech_evidence_massnahmen_1200x630_de_v02.pngSource Map
Quellen mit klaren Rollen.
| Quelle | Verbindliche Inhalte |
|---|---|
| blunatech.com | Öffentliche Positionierung, Hero-Copy und CTA |
| Website global.css | Markenfarben, Radien, Schatten, Motion und Schriften |
| Website Hero.astro | Hierarchie, Flächenlogik und Produktbeweis |
| Website Navbar.astro | Logo-Lockup, Abstände und Navigationszustände |
| Website Layout.astro | Geladene Schriften, Metadaten und globale Grundstruktur |
| Website public/images | Freigegebene PNG-Logos und gesperrte Alt-SVGs |
| App DESIGN-SYSTEM.md | Produkt-UI, Inter, Komponenten und Zustände |
| App components/planning | Jahresplanung, Kampagneneditor und Maßnahmen |
| App components/newsletter | Editor, Blöcke, Vorschau und Statistiken |
| App components/contact-booster | Kontakt-Booster Editor und Social-Exporte |
| App components/full-assessment | Kapitelstruktur und Berichtsansicht |
| Google design.md | Dateiformat, Token und Linter-Regeln |
Konfliktpriorität
- Reale Produktfunktion schlägt Website-Mockup.
- Aktuelle Website schlägt ältere Dokumentation.
- Freigegebenes Marken-Asset schlägt Nachbau.
- Claim-Quelle schlägt gestalterische Wirkung.
- Bei Unsicherheit gilt die konservativere Aussage.
Generation Brief
Vor Gestaltung vollständig ausfüllen.
Kampagne: Zielgruppe: Plattform und Platzierung: Format und Pixel: Asset-Familie: Eine Kernbotschaft: Freigegebene Headline: Unterstützende Copy: CTA: Claim-Status und Quelle: Produkt-Szene und Quelldatei: Demo-Daten: Logo-Variante: Hintergrundmodus: Navy, Deep Navy oder Weiß Pflichtfarbe: Optionaler Amber-Hinweis: Sicherheitszone: Annotationen: Freigaben für Kunde, Zitat oder Bild: Exportformat: Prüfdatum: Verantwortliche Freigabe:
Ausgefülltes Beispiel: Jahresplanung
Kampagne
Marketingjahr planen
ZielgruppeInhaberinnen und Inhaber kleiner und mittlerer Unternehmen
PlatzierungLinkedIn Feed
FormatHochformat, 1080 x 1350
Asset-FamilieProduct Proof
KernbotschaftBLUNATECH macht das Marketingjahr planbar
HeadlineEin Marketingjahr. Klar geplant.
UnterstützungWählen Sie passende Maßnahmen und planen Sie Monat für Monat.
CTAAblauf ansehen
ClaimTechnisch belegt, Jahresplanung der App
Produkt-SzeneJahresansicht mit 12 gefüllten Monaten
Demo-DatenMusterwerk GmbH, vollständig synthetisch
Logologo-weiss.png
HintergrundNavy
PflichtfarbenNavy 900, Weiß und Signalblau
Amber-HinweisKeiner
Sicherheitszone72px seitlich, 88px oben und unten
AnnotationenKeine
KundenfreigabeNicht erforderlich
ExportPNG
PrüfdatumVor Export ergänzen
VerantwortungVor Export ergänzen
Preflight
Erst prüfen, dann exportieren.
Noch nicht exportbereit.