Brand Foundation

Ein Markenhandbuch, das Menschen und KI-Modelle gleichermassen steuert.

Klassische Guidelines liegen als PDF im Ordner. Dieses hier ist ausführbar: Jede Regel existiert zusätzlich als Prompt, Token-Datei oder Agent-Anweisung. Damit erzeugen Textmodelle, Bildmodelle und Coding-Tools Ergebnisse, die von Anfang an zur Marke passen.

KI-Kit ansehen Master-Datei laden

Das KI-Kit

Fünf Dateien. Einmal ablegen, und jedes Modell kennt die Marke.

kodax-brand-guidelines.md

Das vollständige Regelwerk als Markdown. Für Projektwissen in ChatGPT, Claude oder Gemini.

Download

kodax-brand-tokens.json

Alle Design-Tokens maschinenlesbar: Farben, Typo, Raster, Bewegung, Komponenten.

Download

kodax-voice-prompt.md

System-Prompt und Aufgaben-Prompts für Textmodelle inklusive Selbstprüfung.

Download

kodax-image-prompts.md

Prompt-Bibliothek für Bildmodelle mit Stil- und Negativblock je Bildtyp.

Download

kodax-agents.md

Regeln für Coding- und Vibe-Coding-Tools: Tokens, Bausteine, Qualitätskriterien.

Download

So wird es genutzt

ChatGPT / Claude / Gemini: Master-Datei als Projektwissen hochladen.
Bildmodelle: Stil- und Negativblock an jeden Prompt anhängen.
Claude Code / Cursor / Copilot: Agent-Datei als AGENTS.md ablegen.
Automationen: System-Prompt in jeden Textknoten setzen.

Marke & Haltung

Die Basis jeder Entscheidung — auch für ein Modell, das nur diesen Abschnitt liest.

Claim

Engineering Secure Intelligence

Kodax macht Unternehmen zu AI-nativen Organisationen — sicher, souverän, schweizerisch.

Sicherheit ist Voraussetzung

Kein Feature, das man dazubucht.

Klarheit vor Cleverness

Wir erklären, wir beeindrucken nicht.

Substanz vor Hype

Keine leeren KI-Versprechen, nur belegbare Ergebnisse.

Schweizer Souveränität

Daten, Betrieb und Verantwortung bleiben bestimmbar.

Zielgruppe

Geschäftsleitung, Verwaltungsrat und IT-Verantwortliche in KMU und regulierten Unternehmen. Risikoavers, zeitknapp, faktenbasiert.

Persönlichkeit (0–10)

Präzision 9 · Wärme 5 · Formalität 6 · Verspieltheit 2 · Technikdichte 5 aussen / 9 in der Tiefe

Logo

Wortmarke für alle Standardanwendungen, Signet nur bei sehr begrenztem Raum.

DOSchutzraum rundum: mindestens die Höhe des Signets.
DOMinimalgrösse Wortmarke: 96 px digital, 25 mm Print.
NOVerzerren, umfärben, mit Effekten versehen, auf unruhige Bilder legen.
NOLogo von einem Bildmodell generieren lassen. Logos werden ausschliesslich als Originaldatei platziert.

Farben

Marine trägt, Sand atmet, Gold setzt genau einen Akzent pro Sichtfläche.

Marine

#172C45

var(--marine)

Primärfarbe, Text, dunkle Flächen

Marine Deep

#0E1B2E

var(--marine-deep)

Footer, Hero, tiefste Fläche

Marine Mid

#2D4E76

var(--marine-mid)

Sekundärflächen, Diagramme

Sand

#F7F5F2

var(--sand)

Hintergrund hell

Sand 2

#EFECE7

var(--sand-2)

Karten, Muted

Sand 3

#DDD8CF

var(--sand-3)

Linien, Trenner

Gold

#E8C07A

var(--gold)

Akzent, Highlights

Gold Deep

#D9A85A

var(--gold-deep)

Akzent-Text, Hover, Fokus

DOFlächenverhältnis als Richtwert: 60 % Sand, 30 % Marine, 10 % Gold.
DOAuf Marine: Text in Sand mit 100 / 70 / 50 % Deckkraft.
NOMehr als ein Gold-Akzent pro Sichtfläche.
NOGold als grosse Fläche oder als Fliesstextfarbe auf Sand.
NOBunte Verläufe, Violett/Indigo, Neon, zusätzliche Farben.

60 / 30 / 10

03·B

Semantische Farbrollen

Anwendungen verwenden Rollen statt Farbwerte. So bleiben Zustände, Kontrast und spätere Anpassungen kontrollierbar.

Rolle	Kodax-Wert	Verwendung
background / foreground	Sand / Marine	Seitenfläche und Standardtext
surface / muted	Card / Sand 2	Karten und zurückhaltende Flächen
primary / inverse	Marine / Marine Deep	Aktionen und dunkle Bereiche
border / ring	Sand 3 / Gold Deep	Trennung und sichtbarer Fokus
success	Dunkelgrün	Nur bestätigte UI-Zustände
warning	Ocker	Nur Warnungen mit Handlung
danger	Dunkelrot	Nur Fehler und destruktive Aktionen

Erfolg

Aktion abgeschlossen.

Warnung

Prüfung erforderlich.

Fehler

Ursache und nächster Schritt.

Statusfarben sind eine funktionale Ausnahme für Anwendungen. Sie erscheinen nie als Marketingfarbe und nie ohne Text oder Symbol.

Typografie

Geist für alles Gesetzte, Geist Mono für technische Labels, Kennzahlen und Eyebrows.

Display / H1

Engineering Secure Intelligence

Geist 600 · 48–64px · -2% · LH 1.05

Engineering Secure Intelligence

Geist 600 · 30–40px · -2%

Engineering Secure Intelligence

Geist 600 · 20px

Body

Engineering Secure Intelligence

Geist 400 · 16px · LH 1.7

Small / Caption

Engineering Secure Intelligence

Geist 400 · 14px

Label / Eyebrow

Engineering Secure Intelligence

Geist Mono 500 · 11px · +25%

DOZeilenlänge 60–80 Zeichen, Headlines maximal drei Zeilen.
NOBlocksatz, Silbentrennung, Versalien ausserhalb von Eyebrows.
NOInter, Poppins, Serifen- oder Schreibschriften.

Layout, Raster & Bewegung

Ruhige Flächen, scharfe Kanten, Tiefe über Kontrast statt Schatten.

Inhaltsbreite

max. 1280 px · Textspalte max. 720 px

Seitenrand

24 px mobil · 48 px Desktop

Sektionsabstand

96 px mobil · 128 px Desktop

Raster

12 Spalten · Gutter 16–24 px

Radius

2 px — Kanten bleiben scharf

Schatten

keine · 1 px Linie in Marine 10 %

Animation

Fade + 12 px Translate · 400–700 ms · ease-out

Reduced Motion

immer respektieren

Verboten

Bounce, Spin, Parallax, Auto-Karussell

Seitenaufbau

01
Eyebrow
02
H1
03
Lead
04
Inhaltsblöcke
05
Kennzahlen
06
ein CTA

Progressive Tiefe ist Pflicht: Führungskräfte lesen Ebene 1, technische Details werden aufgeklappt. Nie beides gleichzeitig zeigen.

UI-Bausteine

Kanten bleiben scharf, Flächen unterscheiden sich über Kontrast statt Schatten.

Textlink →

Karte hell

Secure Cloud

Standardkarte auf heller Fläche: 1 px Rahmen, kein Schatten, grosszügiges Padding.

Karte dunkel

Secure AI

Dunkle Sektionen tragen Gold als einzigen Akzent, Text in Sand mit reduzierter Deckkraft.

99.99%

Cloud-Verfügbarkeit

100%

Datensouveränität CH

AES-256

Verschlüsselung

Utility-Regeln für Coding-Tools

Farben nur über Tokens: bg-marine, bg-marine-deep, bg-marine-mid, bg-sand,
bg-sand-2, bg-sand-3, text-gold, text-gold-deep, border-marine/10.
Verboten: text-white, bg-black, bg-[#...], Tailwind-Standardfarben.
Radius 2px (--radius: 0.125rem). Keine rounded-lg/xl/full ausser Avatar.
Keine shadow-*. Tiefe über Hintergrundwechsel und 1px-Border.
Schriften nur font-sans (Geist) und font-mono (Geist Mono).
Eyebrow: font-mono text-[11px] uppercase tracking-[0.25em] text-gold-deep
Sektion: mx-auto max-w-7xl px-6 py-24 lg:py-32
Karte hell: border border-marine/10 bg-card p-8
Karte dunkel: bg-marine-deep p-8 text-sand
Button primär: bg-marine text-sand hover:bg-marine-deep px-6 py-3 text-sm font-semibold
Button Akzent: bg-gold text-marine-deep hover:bg-gold-deep
Ein h1 pro Seite, Title < 60 Zeichen, Meta-Description < 160 Zeichen.
Animation nur Fade + 12px Translate, 400-700ms, prefers-reduced-motion beachten.

06·B

Komponenten & Zustände

Ein Baustein ist erst vollständig, wenn auch Laden, Leere, Fehler, Erfolg und Deaktivierung geregelt sind.

Laden

Bestehendes Layout bleibt stabil. Aktivität wird ruhig angezeigt.

Leer

Erklärt, warum nichts sichtbar ist, und bietet einen nächsten Schritt.

Fehler

Nennt Ursache und Lösung direkt beim betroffenen Element.

Erfolg

Bestätigt knapp, was gespeichert oder versendet wurde.

Deaktiviert

Bleibt lesbar und erklärt bei Bedarf, was zur Aktivierung fehlt.

Fokus

Ist per Tastatur erreichbar und mit Gold Deep klar sichtbar.

Vertiefung für Formulare und Datenansichten

· Felder brauchen Label, Hinweis, Fehlertext, Fokus, deaktivierten und ausgefüllten Zustand.
· Tabellen werden auf kleinen Bildschirmen zu lesbaren Listen oder Karten.
· Primäraktionen bleiben eindeutig; destruktive Aktionen verlangen eine Bestätigung.
· Icon allein nur bei bekannten Symbolen, sonst mit sichtbarem Text oder Tooltip.

Bildsprache

Architektur, abstrakte Strukturen, flache Schemata — ruhig und ohne KI-Klischees.

Erlaubt

DOArchitektur- und Infrastrukturfotografie, weitwinklig, wenig Menschen.
DOAbstrakte Motive: Datenströme, Gitter, Schichten, Gold auf Marine.
DOFlache technische Schemata mit dünnen Linien und Knoten.
DODokumentarische Porträts aus echten Arbeitssituationen.

Verboten

· Roboter, Androiden, Gehirne, Glühbirnen, Zahnräder, Handshakes.
· Neon-Cyberpunk, violett-blaue KI-Gradients, Matrix-Code.
· Stockfoto-Lächeln, Emoji, Comic, 3D-Blobs.
· Text im generierten Bild — Text kommt immer aus dem Layout.

Hero

1920 × 1008

Sektion

1600 × 900

Karte

1200 × 800

OG-Image

1200 × 630

Porträt

1000 × 1250

Behandlung

25–45 % Opazität auf Marine Deep

07·B

Bildgenerator

Stichworte oder Artikel-Link eingeben — das Bild entsteht direkt nach diesen Regeln, in einem einheitlichen, natürlichen Farbklima.

Stichworte oder Thema

Link zum Artikel (optional)

Eigenes Bild (optional)

Bild auswählen

Wird ein Bild hochgeladen, bleibt das Motiv erhalten und wird in die Kodax Farben und Bildsprache übersetzt.

Bildstil

Heute noch 5 von 5 Versuchen übrig

Die Vorschau erscheint hier und schärft sich, sobald das Bild fertig ist.

Sprache & Tonalität

Schweizer Rechtschreibung, Sie-Form, Aussage zuerst — messbar statt blumig.

DOAussage zuerst, Begründung danach. Ein Gedanke pro Satz.
DOSätze unter 20 Wörtern, Absätze maximal vier Zeilen.
DOKonkret: «-80 % Reporting-Aufwand» statt «erhebliche Effizienzsteigerung».
DOKein ß — immer ss. Zahlen als 1'250, Währung als CHF 1'250.
NOAusrufezeichen, Emoji, rhetorische Fragen in Serie.
NOFachbegriffe ohne Erklärung beim ersten Vorkommen.

Verbotene Wörter

revolutionärdisruptivbahnbrechendGame-Changernahtlosganzheitlichunlockempowerjourney

Bevorzugte Wörter

sichersouverännachvollziehbarbelastbarGovernanceDatenhoheitFundamentSchutzschicht

Eyebrow

max. 3 Wörter

max. 9 Wörter

Lead

25–45 Wörter

Absatz

40–70 Wörter

CTA

2–4 Wörter mit →

Meta-Description

max. 155 Zeichen

Terminologie

Kodax · Secure AI · Secure Cloud · Data Foundation · Kodax Hub · Kodax Lab · AI Transformation

Nicht: KODAX, SecureAI, Secure-Cloud, Kodax AI GmbH.

Prompt-Bibliothek

Direkt kopierbar. Diese Blöcke machen aus jedem Modell einen Kodax-konformen Autor.

System-Prompt · Textmodelle

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: immer ss statt ß. Sie-Form. Zahlen: 1'250. CHF 1'250.
- Aussage zuerst, Begründung danach. Ein Gedanke pro Satz, max. 20 Wörter.
- Aktiv statt Passiv, Verben statt Substantivketten.
- Konkrete Zahlen statt Superlativen. Keine Ausrufezeichen, keine Emoji.
- Fachbegriffe beim ersten Vorkommen in einem Halbsatz erklären.
- Verboten: revolutionär, disruptiv, bahnbrechend, Game-Changer, nahtlos,
  ganzheitlich, "in der heutigen schnelllebigen Welt", unlock, empower, journey.
- Terminologie exakt: Kodax, Secure AI, Secure Cloud, Data Foundation,
  Kodax Hub, Kodax Lab, AI Transformation.
- Nichts erfinden: keine Kundennamen, Preise oder Zahlen, die nicht in der
  Eingabe stehen. Fehlt etwas, frage nach.

Struktur: Eyebrow (max. 3 Wörter), H1 (max. 9 Wörter), Lead (25-45 Wörter),
Absätze zu je einem Gedanken (40-70 Wörter), CTA mit 2-4 Wörtern und Pfeil.

Stil- und Negativblock · Bildmodelle

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 matte lighting, no text, no logos.

Negative: logos, lettering, text, watermarks, robots, humanoid AI, brains,
lightbulbs, gears, handshakes, neon cyberpunk, purple or indigo gradients,
stock-photo smiles, 3D blobs, emoji, clutter, oversaturation, HDR look.

Aufgaben-Prompt · Seite schreiben

Schreibe nach den Kodax-Regeln eine Seite zu <Thema>:
Eyebrow, H1, Lead (25-45 Wörter), drei Inhaltsblöcke à 50 Wörter mit
Zwischentitel, drei Kennzahlen (Wert + Beschriftung), ein CTA.
Technische Tiefe separat als optionalen zweiten Layer ausweisen.

News / Blog

Titel, Teaser max. 200 Zeichen, 400–600 Wörter, Quellen inline verlinkt, Fazit «Was das für Schweizer Unternehmen heisst».

60–120 Wörter, Haken ohne Clickbait, ein konkreter Nutzen, Link am Schluss, max. 3 Hashtags.

Übersetzung

Sinngemäss nach EN/FR, Terminologie unverändert, Länge ±15 %.

Kürzen

Auf N Wörter, Fakten und Zahlen behalten, Superlative entfernen.

Selbstprüfung vor jeder Ausgabe

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 geschrieben?

Regeln für Coding- und Vibe-Coding-Tools

Damit generierter Code nicht nachträglich umgefärbt werden muss.

DOFarben ausschliesslich über Tokens und Utilities der Marke.
DOButtons, Karten und Sektionen aus den vorgegebenen Klassenmustern.
DOEin h1 pro Seite, eigener Title und eigene Meta-Description.
DOBilder mit alt, width, height und lazy loading ausser im Hero.
NOtext-white, bg-black, Hex-Werte im Component-Code.
NOTailwind-Standardpaletten wie slate, zinc oder indigo.
NOshadow-Utilities und Rundungen über 2 px.
NONeue Farben, Schriften oder Radien einführen — auch nicht «nur hier».

Richtig

<section className="mx-auto max-w-7xl px-6 py-24">
  <p className="font-mono text-[11px] uppercase
     tracking-[0.25em] text-gold-deep">Leistungen</p>
  <div className="border border-marine/10 bg-card p-8" />
</section>

Falsch

<section className="container py-12">
  <p className="text-indigo-500 uppercase">Leistungen</p>
  <div className="rounded-xl bg-white shadow-lg p-8" />
</section>

Anwendung je Kanal

Dieselben Regeln, unterschiedlich ausgespielt.

Website

Aufbau nach Kapitel 05, 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

Text-Look ohne Bildbanner, Signatur als Mono-Zeile.

Bild 1200 × 627 im Markenstil, Text nach Kapitel 09.

Charts

Datenreihen Marine, Marine Mid, Sand 3 — Highlight-Reihe in Gold.

Anwendungsprofile

Die Markenbasis bleibt gleich. Informationsdichte und Verhalten passen sich dem Medium an.

Orientierung und Vertrauen

Website

Grosszügige Abstände · progressive Tiefe · ein CTA · eigener Seitentitel und Beschreibung

Schnelle, wiederholte Arbeit

Web-App

Kompaktere Abstände · klare Navigation · vollständige Zustände · Daten mobil neu ordnen

Eine Aussage pro Einheit

Präsentation & Dokument

Marine-Deckblatt · Sand-Inhalt · Mono-Fusszeile · Gold nur für eine Kernaussage

Logo, Farblogik, Typografie, Tonalität, Barrierefreiheit und Bildsprache sind in allen Profilen gesperrt. Abstände und Informationsdichte dürfen innerhalb der definierten Werte variieren.

Qualität & Abnahme

Automatische Prüfungen sichern das Fundament. Die Sichtprüfung entscheidet, ob das Ergebnis wirklich nach Kodax wirkt.

Automatisch prüfbar

· Textkontrast mindestens 4,5:1.
· Fokusring mindestens 3:1 zur Umgebung.
· Alle Funktionen per Tastatur erreichbar.
· Bedienflächen mindestens 44 × 44 px.
· Mobile Ansicht ab 360 px ohne Querlauf.
· Keine festen Farbwerte im Baustein-Code.

Sichtprüfung

· Wirkt die Bildsprache ruhig und markentypisch?
· Ist Gold auf eine Aussage begrenzt?
· Passt die Informationsdichte zum Profil?
· Klingt der Text präzise und ohne Hype?
· Sind Lade-, Leer- und Fehlerfälle verständlich?
· Bleibt die Führungsebene frei von technischen Details?

Versionierung & Governance

Änderungen bleiben nachvollziehbar. Fehlende Angaben werden markiert, nie stillschweigend erfunden.

Unkritisch

Korrektur ohne sichtbare Auswirkung

Patch · 1.0.1

Sichtbar

Gestalterische Änderung mit Prüfung

Minor · 1.1

Brechend

Neue Regel oder inkompatible Änderung

Major · 2.0

Gesperrt

Markenname, Logo-Regeln, Kernfarben, Schriftfamilien, Tonalität und funktionale Mindestanforderungen.

Anpassbar

Dichte, Sektionsabstände und Inhaltsreihenfolge innerhalb des gewählten Anwendungsprofils.

Aktuelle Version 1.1 · 14. September 2026. Ergänzt: semantische Rollen, UI-Zustände, Anwendungsprofile, Abnahme und Governance.

Do / Don't in Kurzform

Der Block, den man in jeden Prompt hängen kann, wenn es schnell gehen muss.

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.

Brand Foundation

So ein Handbuch bauen wir auch für Ihre Marke.

Regelwerk, Token-Datei, Prompt-Bibliothek und Agent-Regeln — damit jedes Modell in Ihrem Unternehmen dieselbe Marke spricht, statt jedes Mal neu geraten zu werden.

Gespräch vereinbaren →