# Kodax Brand Guidelines — Machine-Readable Master File Version: 1.0 · Sprache: DE (Primär), EN/FR analog · Owner: Kodax AG Zweck: Diese Datei ist die einzige Quelle der Wahrheit für Menschen **und** KI-Modelle. Sie kann vollständig in einen System-Prompt, ein Projekt-Wissen (Custom GPT, Claude Project, Gemini Gem), eine `AGENTS.md`/`CLAUDE.md` oder ein Vibe-Coding-Tool (Lovable, Cursor, v0) kopiert werden. Grundregel für jedes Modell: **Wenn eine Anweisung dieser Datei widerspricht, gilt diese Datei — ausser der Mensch widerspricht ausdrücklich.** --- ## 1. Marke in einem Satz Kodax macht Unternehmen zu AI-nativen Organisationen — sicher, souverän, schweizerisch. Claim: **Engineering Secure Intelligence.** Markenkern: - **Sicherheit ist Voraussetzung, nicht Feature.** - **Klarheit vor Cleverness.** Wir erklären, wir beeindrucken nicht. - **Substanz vor Hype.** Keine leeren KI-Versprechen. - **Schweizer Souveränität.** Daten, Betrieb, Verantwortung bleiben bestimmbar. Zielgruppe: Geschäftsleitung, VR, IT-Verantwortliche in KMU und regulierten Unternehmen (CH/DACH). Entscheidungsmodus: risikoavers, zeitknapp, faktenbasiert. Persönlichkeit (0–10): Präzision 9 · Wärme 5 · Formalität 6 · Verspieltheit 2 · Technikdichte 5 (nach aussen), 9 (in Detail-Layern). --- ## 2. Farbsystem (verbindlich) | Rolle | Name | Token | HEX | OKLCH | |---|---|---|---|---| | Primär / Text / dunkle Flächen | Marine | `--marine` | `#172C45` | `oklch(0.30 0.055 256)` | | Tiefste Fläche, Footer, Hero | Marine Deep | `--marine-deep` | `#0E1B2E` | `oklch(0.21 0.04 259)` | | Sekundärfläche, Diagramme | Marine Mid | `--marine-mid` | `#2D4E76` | `oklch(0.42 0.065 252)` | | Hintergrund hell | Sand | `--sand` | `#F7F5F2` | `oklch(0.965 0.006 90)` | | Karten, Muted | Sand 2 | `--sand-2` | `#EFECE7` | `oklch(0.94 0.007 85)` | | Linien, Trenner | Sand 3 | `--sand-3` | `#DDD8CF` | `oklch(0.875 0.01 85)` | | Akzent, Highlight | Gold | `--gold` | `#E8C07A` | `oklch(0.81 0.1 80)` | | Akzent-Text, Hover, Fokus | Gold Deep | `--gold-deep` | `#D9A85A` | `oklch(0.73 0.11 74)` | Regeln: 1. **Ein Gold-Akzent pro Sichtfläche.** Gold markiert genau eine Sache: Eyebrow, eine Zahl, einen CTA — nie mehrere gleichzeitig. 2. Flächenverhältnis Richtwert: 60 % Sand · 30 % Marine · 10 % Gold. 3. Gold nie als grosse Fläche, nie als Fliesstextfarbe auf Sand (Kontrast zu tief). 4. Auf Marine: Text in Sand (100 %/70 %/50 % Deckkraft), Akzent in Gold. 5. Keine weiteren Farben. Ausnahme: Status (Erfolg/Fehler) in der UI, nie in Marketing-Grafik. 6. Verlaufsflächen nur Marine→Marine Deep oder transparent-Overlay über Bild. Keine bunten Gradients, kein Violett/Indigo, kein Neon. Kontrast: Fliesstext auf Sand = Marine (AA+). Text auf Marine = Sand. Gold Deep nur ab 14 px semibold auf Sand verwenden. --- ## 3. Typografie - Headlines & Fliesstext: **Geist** (Variable). Fallback: `ui-sans-serif, system-ui, sans-serif`. - Technische Labels, Eyebrows, Kennzahlen-Beschriftung, Code: **Geist Mono**. - Niemals: Inter, Poppins, Serifenschriften, Script-Schriften. | Stil | Spezifikation | |---|---| | Display / H1 | Geist 500–600, 48–64 px, `letter-spacing: -0.02em`, `line-height: 1.05` | | H2 | Geist 500–600, 30–40 px, `-0.02em` | | H3 | Geist 600, 20 px | | Body | Geist 400, 16 px, `line-height: 1.7` | | Small / Caption | Geist 400, 14 px, Marine 60 % | | Label / Eyebrow | Geist Mono 500, 11 px, UPPERCASE, `letter-spacing: 0.25em`, Gold Deep | Satzregeln: keine Blocksatz, keine Silbentrennung, Zeilenlänge 60–80 Zeichen, Headlines maximal drei Zeilen, kein Text in Versalien ausser Eyebrows/Labels. --- ## 4. Layout, Raster, Form - Max. Inhaltsbreite: 1280 px (`max-w-7xl`), Text-Spalten max. 720 px. - Seitenabstand: 24 px mobil, 48 px ab Desktop. - Sektionsabstand: 96 px mobil, 128 px Desktop. - Grundraster: 12 Spalten, Gutter 16–24 px. - **Radius: 2 px (`--radius: 0.125rem`).** Kanten bleiben scharf. Keine Pillen-Buttons, keine 16-px-Rundungen. - **Keine Schatten.** Ebenen entstehen über Kontrast (Sand vs. Sand 2 vs. Marine) und 1-px-Linien in `Marine / 10 %`. - Trennung zwischen Sektionen über Farbwechsel oder 1-px-Linie, nicht über Weissraum allein. - Animation: nur Einblenden (Opacity + 12 px Translate), 400–700 ms, `ease-out`. `prefers-reduced-motion` immer respektieren. Keine Bounce-, Spin- oder Parallax-Effekte. --- ## 5. Logo - **Wortmarke** ist Standard. **Signet** nur bei sehr wenig Raum (Favicon, App-Icon, Avatar). - Tonalitäten: schwarz/marine auf hellem Grund, weiss auf Marine Deep. - Schutzraum rundum: mindestens die Höhe des Signets. - Minimalgrösse Wortmarke: 96 px digital, 25 mm Print. - Verboten: verzerren, umfärben, Effekte/Schatten, auf unruhigem Bild ohne Abdunklung, in Fliesstext einbetten, Wortmarke nachbauen. - KI-Regel: **Ein Bildmodell darf das Kodax-Logo nie generieren.** Logos werden ausschliesslich als Originaldatei platziert. --- ## 6. Bildsprache Erlaubt und erwünscht: - Architektur- und Infrastrukturfotografie (Rechenzentrum, Beton, Glas, Stahl), ruhig, weitwinklig, wenig Menschen. - Abstrakte Marken-Motive: Datenströme, Gitter, Schichtungen, Licht in Gold auf Marine. - Technische Schemata: Linien, Knoten, Ebenen — flach, ohne 3D-Rendering-Look. - Menschen: dokumentarisch, echte Arbeitssituationen, kein gestelltes Stock-Lachen. Verboten: - Roboter, Androiden, humanoide KI, Gehirn-Metaphern, Glühbirnen, Zahnräder, Handshake-Bilder. - Neon-Cyberpunk, violett-blaue KI-Gradients, Matrix-Codeschleier. - Stockfoto-Ästhetik, Emoji, Comic, 3D-Blob-Illustrationen. - Text im generierten Bild (Buchstaben werden fehlerhaft) — Text kommt aus dem Layout. Behandlung: Bilder auf Marine Deep abdunkeln (Opazität 25–45 %) plus Verlaufsoverlay, damit Text lesbar bleibt. Ein Bild pro Sektion, nie Collage. --- ## 7. Sprache & Tonalität Deutsch (CH): **kein ß** — immer `ss`. «Sie»-Form. Zahlen mit Apostroph: `1'250`. Währung: `CHF 1'250`. Datum: `9. September 2026`. Schreibregeln: 1. Aussage zuerst, Begründung danach. Ein Gedanke pro Satz. 2. Sätze max. 20 Wörter, Absätze max. 4 Zeilen. 3. Aktiv statt Passiv, Verben statt Substantivketten. 4. Konkret statt vage: «-80 % Reporting-Aufwand» statt «erhebliche Effizienzsteigerung». 5. Fachbegriff nur, wenn er beim ersten Vorkommen erklärt wird. 6. Kein Ausrufezeichen, keine Emoji, keine rhetorischen Fragen in Serie. Verbotene Wörter/Floskeln: revolutionär, disruptiv, bahnbrechend, Game-Changer, nahtlos, ganzheitlich, End-to-End-Synergien, «in der heutigen schnelllebigen Welt», «Wir freuen uns, bekanntgeben zu dürfen», «unlock», «empower», «journey». Bevorzugte Begriffe: sicher, souverän, nachvollziehbar, belastbar, im Betrieb bewährt, Governance, Datenhoheit, Fundament, Schutzschicht. Terminologie (immer exakt so schreiben): Kodax · Secure AI · Secure Cloud · Data Foundation · Kodax Hub · Kodax Lab · AI Transformation. Nicht: KODAX, Kodax AI GmbH, «SecureAI», «Secure-Cloud». Textlängen: Eyebrow ≤ 3 Wörter · H1 ≤ 9 Wörter · Lead 25–45 Wörter · Absatz 40–70 Wörter · CTA 2–4 Wörter (mit `→`) · Meta-Description ≤ 155 Zeichen · LinkedIn-Post 60–120 Wörter, kein Hashtag-Spam (max. 3). --- ## 8. Struktur einer Kodax-Seite 1. Eyebrow (Mono, Gold) — Kategorie in 1–3 Wörtern. 2. H1 — eine klare Behauptung, kein Wortspiel. 3. Lead — was es ist, für wen, welcher Nutzen. 4. Inhaltsblöcke — je ein Gedanke, optional aufklappbare Tiefe. 5. Kennzahlen-Band — drei Werte, Mono-Beschriftung. 6. CTA-Band — eine einzige Handlung. Progressive Tiefe ist Pflicht: Führungskräfte lesen Ebene 1, Technik klappt Ebene 2 auf. Nie beides gleichzeitig zeigen. --- ## 9. Prompts für Bildmodelle Immer anhängen (Negativ-Block): ``` Negative: logos, lettering, text, watermarks, robots, humanoid AI, brains, lightbulbs, gears, handshakes, neon cyberpunk, purple/indigo gradients, stock-photo smiles, 3D blobs, emoji, cluttered composition. ``` Basis-Stilblock (an jeden Bild-Prompt anhängen): ``` Style: Kodax brand. Deep navy (#0E1B2E) base, muted sand (#F7F5F2) light values, a single warm gold accent (#E8C07A). Calm, architectural, documentary realism or flat technical illustration. Wide angle, generous negative space, low contrast lighting, matte finish, no text, no logos. 16:9. ``` Beispiel — Hero (Infrastruktur): ``` A quiet modern Swiss data centre corridor at low light, long perspective, matte concrete and brushed steel, one warm gold light line running along the ceiling, no people, no signage. [Basis-Stilblock] [Negative] ``` Beispiel — Abstrakt (Secure AI): ``` Abstract layered shield structure made of thin geometric lines over a deep navy field, data particles flowing through a filtering layer, one gold highlight marking the checkpoint, flat technical illustration, generous empty space. [Basis-Stilblock] [Negative] ``` Beispiel — Schema (Data Foundation): ``` Flat technical diagram: six labelless source nodes on the left flowing into a three-layer horizontal foundation block, thin 1px lines, navy background, sand lines, gold only on the central layer, no text. [Basis-Stilblock] [Negative] ``` Beispiel — Porträt/Team: ``` Documentary portrait of a professional at work, natural window light, neutral sand-toned background, calm expression, no posed smile, shallow depth of field, muted colour grade. [Basis-Stilblock ohne 16:9 → 4:5] [Negative] ``` Formate: Hero 1920×1008 · Sektionsbild 1600×900 · Karte 1200×800 · OG-Image 1200×630 · Team 1000×1250 · Icon/Signet nie generieren. --- ## 10. Prompts für Textmodelle System-Prompt (kopierbar): ``` Du schreibst als Kodax (Schweiz). Claim: Engineering Secure Intelligence. Zielgruppe: Geschäftsleitung und IT-Verantwortliche in KMU und regulierten Unternehmen. Tonalität: präzise, ruhig, faktenbasiert, ohne Marketing-Pathos. Regeln: Schweizer Rechtschreibung (ss statt ß), Sie-Form, Aussage zuerst, Sätze unter 20 Wörtern, aktiv, keine Ausrufezeichen, keine Emoji. Verboten: revolutionär, disruptiv, bahnbrechend, nahtlos, ganzheitlich, Game-Changer, "in der heutigen schnelllebigen Welt", unlock, empower, journey. Konkrete Zahlen statt vager Superlative. Fachbegriffe beim ersten Vorkommen erklären. Terminologie exakt: Secure AI, Secure Cloud, Data Foundation, Kodax Hub, Kodax Lab, AI Transformation. Struktur: Eyebrow (max 3 Wörter), H1 (max 9 Wörter), Lead (25-45 Wörter), dann Absätze zu je einem Gedanken. CTA 2-4 Wörter mit Pfeil. Wenn Informationen fehlen: nachfragen statt erfinden. Keine Kundennamen, Preise oder Zertifikate nennen, die nicht in der Eingabe stehen. ``` Aufgaben-Prompts: - **Landingpage:** «Schreibe nach den Kodax-Regeln eine Seite zu : Eyebrow, H1, Lead, drei Blöcke à 50 Wörter, drei Kennzahlen, ein CTA.» - **News/Blog:** «Fasse die Quellen zu einem Beitrag zusammen: Titel, Teaser (max 200 Zeichen), 400–600 Wörter, Zwischentitel, Quellen inline verlinkt, Fazit-Absatz «Was das für Schweizer Unternehmen heisst».» - **LinkedIn:** «60–120 Wörter, erste Zeile als Haken ohne Clickbait, ein konkreter Nutzen, ein Satz Einordnung, Link am Schluss, max. 3 Hashtags.» - **Übersetzung:** «Übersetze nach EN/FR sinngemäss, nicht wörtlich. Terminologie unverändert lassen. Gleiche Länge ±15 %.» Review-Checkliste, die das Modell selbst anwenden soll: 1. Steht die Kernaussage im ersten Satz? 2. Ist jedes Adjektiv belegt? 3. Kommt ein verbotenes Wort vor? 4. Versteht eine Geschäftsleitung den Text ohne Fachwissen? 5. Ist die Terminologie exakt? --- ## 11. Regeln für Coding- und Vibe-Coding-Tools - Farben **nur** über Tokens/Utilities: `bg-marine`, `bg-marine-deep`, `bg-sand`, `bg-sand-2`, `text-gold-deep`, `border-marine/10`. Nie `text-white`, `bg-black`, `bg-[#...]`, nie Tailwind-Standardpaletten (`slate`, `indigo`, …). - `--radius: 0.125rem`; keine `rounded-xl`/`rounded-full` ausser bei Avataren. - Keine `shadow-*`-Utilities. Ebenen über Hintergrund und `border`. - Schriftfamilien nur `font-sans` (Geist) und `font-mono` (Geist Mono). - Eyebrow-Klassenmuster: `font-mono text-[11px] uppercase tracking-[0.25em] text-gold-deep`. - Buttons: primär `bg-marine text-sand hover:bg-marine-deep`; Akzent `bg-gold text-marine-deep hover:bg-gold-deep`; sekundär `border border-marine/25 hover:border-marine`. Padding `px-6 py-3`, `text-sm font-semibold`. - Karten: `border border-marine/10 bg-card p-8`, dunkel: `bg-marine-deep p-8 text-sand`. - Sektionen: `mx-auto max-w-7xl px-6 py-24 lg:py-32`. - Fokuszustand sichtbar lassen (`ring` = Gold Deep). Kontrast AA einhalten. - Bilder: `loading="lazy"` ausser Hero, immer `alt`, `width`/`height` gesetzt. - Jede Seite: genau ein `h1`, eigener Title (< 60 Zeichen) und Meta-Description (< 160 Zeichen). --- ## 12. Anwendungsfälle je Kanal | Kanal | Vorgabe | |---|---| | Website | Struktur nach Kapitel 8, progressive Tiefe, ein CTA pro Seite | | Präsentation | Marine-Deckblatt, Sand-Inhaltsseiten, eine Aussage pro Folie, Mono-Fusszeile | | Dokument/Offerte | Sand-Grund, Marine-Text, Gold nur in Kopfzeile und Summenzeile | | E-Mail | Reiner Text-Look, keine Bildbanner, Signatur Mono-Zeile | | LinkedIn | Bild 1200×627 im Markenstil, Text nach Kapitel 10 | | Slides/Charts | Datenreihen: Marine, Marine Mid, Sand 3; Highlight-Reihe Gold | --- ## 13. Do / Don't (Kurzform für Prompts) **Do:** ruhige Flächen · scharfe Kanten · ein Akzent · konkrete Zahlen · Schweizer Schreibweise · progressive Tiefe · echte Fotografie oder flache Schemata. **Don't:** bunte Gradients · runde Karten mit Schatten · Roboterbilder · Superlative · Ausrufezeichen · Text im generierten Bild · mehr als ein CTA · generierte Logos. --- ## 14. Verwendung dieser Datei - **ChatGPT/Claude/Gemini:** Datei als Projektwissen hochladen und im System-Prompt schreiben: «Halte dich strikt an kodax-brand-guidelines.md.» - **Lovable / Cursor / Copilot:** Inhalt in `AGENTS.md`, `.cursor/rules` oder Projekt-Knowledge ablegen. - **Bildmodelle:** Kapitel 9 (Stilblock + Negativ-Block) an jeden Prompt anhängen. - **Automationen (n8n, Make):** Kapitel 10 als System-Message in jeden Textknoten. Änderungen an dieser Datei erfolgen nur über Kodax. Version und Datum im Kopf mitführen.