Design System — Foundation
Entwurf zur Prüfung · Palette + Typografie + Rollen
Quelle: Brand-Messaging-Standard 2026 (kanonisches CI)
Entwurf zur Prüfung · Palette + Typografie + Rollen
Quelle: Brand-Messaging-Standard 2026 (kanonisches CI)
Eine kanonische Palette, eine Schriftpaarung, semantische Rollen — Verlauf, Steinbock und Pattern teilen dieselbe Farb-DNA.
Diese Seite ist eine Ansicht, keine Quelle. Sie wird aus drei Dateien gebaut — jede mit einer klaren Zuständigkeit. Wer etwas ändern will, ändert dort, nicht hier.
--cd-*) und Rollen (--surface,
--text, --accent …). Komponenten benutzen
ausschliesslich Rollen — so folgt beim Themenwechsel alles von allein.tokens.css.build-foundation.mjs, das auch die Abschnittsnummern vergibt.
foundation.html ist erzeugt — Änderungen daran gehen beim nächsten
Bauen verloren.Vollständiges 6-Farben-Brandbook. Das warme Paar (Gelb · Orange) ist das bewusste Unterscheidungsmerkmal — jeder Mitbewerber setzt nur auf kühle Töne. Rohwerte liegen als --cd-*; Komponenten greifen nie direkt darauf zu.
--cd-purple-950 … --cd-purple-50 — die Zahl im Feld ist die Stufe im Namen.
Türkis, Magenta und Pink liegen im Brandbook nur als Basiswert vor. Die Rampen sind daraus abgeleitet (per color-mix, hell → Weiss, dunkel → Ink) — keine kanonischen Werte. Die 50er/100er-Stufen dienen als ruhige, helle Alternativ-Flächen. Elf Stufen wie jede Rampe hier — 950, 600 und 400 kamen am 06.08. dazu. Sie fehlten nicht aus einem Grund, sondern weil die Rampen beim Anlegen von Hand mit genau den Stufen geschrieben wurden, die damals gebraucht waren.
Palo wünscht ein überwiegend helles Design: Verlaufsflächen nur sparsam als Signatur-Moment. Abwechselnde Abschnitte tragen stattdessen eine 50er-Fläche als Rollen-Token — nahezu weiss, aber je Markenton leicht getönt. Welcher Palette-Wert dahinterliegt, steht hier bewusst nicht mehr: die Rolle ist die Aussage, und eine zweite Fassung belegt sie anders.
Echtes Neutralgrau, elf Stufen. Bis 06.08.2026 trug die Reihe absichtlich einen Violettstich — «damit die Grautöne in der Marke sitzen, nicht daneben». Das war eine Entscheidung von uns: im Brandbook stehen sechs Farben und kein Grau. Sie ist zurückgenommen, damit Türkis führen kann, ohne dass jede Fläche leise dagegen tönt. Eine Reihe für beide Fassungen. --cd-ink steht bewusst daneben, nicht darin — siehe unten.
--cd-gray-950 … --cd-gray-50. Die 500er-Stufe ist die einzige, die beim Neutralisieren nicht eins zu eins übernommen wurde: sie trägt --text-muted und wäre auf getönter Fläche auf 4.16:1 gefallen. Abgedunkelt auf 5.30:1 — wertgleich zum alten Stand.
Marken-Schwarz · --cd-ink · gehört nicht in die Reihe
Als Helligkeit sitzt er genau dort, wo 950 sitzt (Luminanz 0.0063 gegen 0.0067) — farblich aber quer dazu: Ton 266° gegen 200°, Sättigung 47 % gegen 27 %. Darum steht er neben der Reihe und nicht darin; als Stufe gelesen wäre er eine Lüge. Er bleibt getönt, weil alle abgeleiteten Rampen gegen ihn mischen (teal-900, magenta-700 …) und die fixen dunklen Flächen auf ihm sitzen — Code-Block und Call-out.
Die Stopps liegen einzeln als --cd-grad-purple #662D91 · --cd-grad-pink #EE3288 · --cd-grad-teal #1EB8C2 — ein SVG-Verlauf braucht seine Stopps einzeln und kann kein CSS-linear-gradient() aufnehmen. Die Diagramme greifen sie über die Rollen --graphic-grad-from/-mid/-to ab.
Die Palette wird auf Rollen abgebildet; Komponenten referenzieren nur Rollen. Wechselt man das Theme, folgt jede Komponente. Hell ist Standard (die Marke ist bright-first); Dunkel ist die Ausnahme.
Bereit in tokens.css, auf dieser Seite von keiner Komponente benutzt. Schnittstelle fürs Frontend, keine Altlast.
--surface-brandVollfläche in Violett--text-inverse · -muted ·
--border-inverseEinzelner umgekehrter Kasten — sonst .on-dark--highlight-strongOrange als kräftigere Stufe neben Gelb--warningStatusfarbe, braucht ein Formular--rhythmBasiswert der Abstandsskala — Komponenten nehmen die Stufen--pattern-2 · --pattern-4Gedrehte Motive für .has-patternChanga trägt Display, Titel, Eyebrows und Akzente (Brandbook-Logofont); Open Sans trägt Fliesstext, Bildunterschriften und Links. Changas weiche Terminals brauchen Gewichtsdisziplin — gross und selbstbewusst eingesetzt, nicht für Fliesstext.
Fluide modulare Skala (~1.25), mobile→desktop geclampt.
Eine Skala steuert vertikalen Rhythmus, Padding und Gaps.
Zeilenhöhe und Abstände sind Vielfache des Basisrhythmus (--rhythm · .5rem / 8px). Auch bei gemischten Grössen bleibt es stabil — ein Titel (2 Zeilen) und sein Textabsatz landen auf demselben Baseline-Grid.
Der Phish-Button macht jede Meldung zum Signal — Menschen werden Teil des Security-Stacks.
Wissen allein ändert kein Verhalten. Cyberdise trainiert Handeln — belegt mit bis zu 60% besserem Risikoverhalten.
Menschliche Signale werden zu Intelligence, erkannt und angepasst in Maschinengeschwindigkeit.
Von der Simulation bis zur SOC-Integration — ein Kreislauf statt einer Checkliste.
Kampagnen richten sich an Verhalten und Risiko der Belegschaft aus, nicht am Kalender.
Vom Freemium bis MSSP — mandantenfähig, white-label, API-first.
Wie breit ein Text laufen darf, hängt an seiner Schriftgrösse — nicht am Kasten, in dem er steht. Die Einheit ch misst in der Schrift des Elements, an dem sie notiert ist. Deshalb steht die Breite immer am Textelement.
--measure-display · 20ch — grosse Schrift braucht
wenige Zeichen pro Zeile. Zwei bis drei Zeilen sind das Ziel.--measure-lede · 34ch — der Absatz direkt unter dem
Titel, etwas grösser gesetzt als Fliesstext.--measure-body · 62ch — der klassische Lesewert
für alles, was tatsächlich gelesen wird.Der Dokument-Hero oben trug seine Breite am umschliessenden Kasten. Titel und Lead erbten damit denselben Pixelwert — obwohl der Titel dreimal so gross gesetzt ist. Ergebnis: der Lead lief auf angenehmen 34 Zeichen, der Titel auf neun, und riss bei neun Wörtern in fünf Zeilen. Am Element notiert rechnet ch dagegen in der jeweils eigenen Schriftgrösse — die Breite wächst mit der fluiden Typografie automatisch mit.
Ein Titel, der bei wenigen Wörtern in vier oder mehr Zeilen zerfällt, und ein Lead darunter, der breiter wirkt als er selbst — das ist immer dieselbe Ursache. Vor dieser Regel gab es im CSS sechs verschiedene Breiten (32, 42, 44, 60, 64 und 70 Zeichen), jede einzeln entstanden, keine begründet.
Cyberdise braucht kein Zwölf-Spalten-Raster. Jede Seite dieser Marke lässt sich aus zwei Anordnungen bauen: gleichwertige Kacheln, die sich selbst herunterzählen — und ein Zweispalter, der an genau einer Stelle umbricht. Wer einen dritten Fall zu brauchen glaubt, hat meist das falsche Muster gewählt.
--container · 76rem (1216px) · seitlich --space-md--space-2xl oben und unten · Trennlinie zwischen Sektionen.tilesGleichwertige Elemente: Karten, Farbfelder, Logos, Motive. Das Raster rechnet die Spaltenzahl selbst aus und braucht deshalb keinen Breakpoint. Gesteuert wird nur, wie schmal eine Kachel werden darf.
--tile-min: 9rem · --tile-flow: auto-fill Standardauto-fill hält die Kachelgrösse stabil und lässt rechts Platz frei. Richtig für Schaukästen mit fester Anzahl — die Motive bleiben untereinander vergleichbar.
--tile-min: 9rem · --tile-flow: auto-fitauto-fit dehnt die vorhandenen Kacheln auf die volle Zeile. Richtig für Karten, wo eine halbleere Zeile wie ein Fehler aussieht.
.duoZwei ungleiche Hälften: Text neben Bild, Hero, Vergleich, Definitionsliste. Standard ist halb/halb; die Gewichtung ist eine einzige Zahlenpaar-Variable. Dies ist das einzige Muster, das am Breakpoint umbricht.
.duo · Standard 1fr 1fr.duo mit --duo: 1.1fr 1fr — leichte GewichtungGewichtungen bleiben zurückhaltend: 1.1fr 1fr bis 2fr 1fr.
Wer stärker gewichtet, baut in Wahrheit eine Randspalte — und die gehört ins Muster 1 oder gar nicht
auf die Seite.
Unter 820 ergibt ein Zweispalter Spalten unter 380px. Dort bricht jedes zweispaltige Layout — Text wird zu schmal, Bilder zu klein, Tabellen laufen über. Es gibt keinen Grund, warum die eine Sektion bei 720 und die andere bei 820 umbrechen sollte; das war historisch gewachsen, nicht entschieden.
Kacheln brauchen keinen: auto-fill zählt selbst herunter, stufenlos und immer richtig.
Damit bleibt genau ein Umschaltpunkt für die ganze Seite. Das ist der Unterschied zwischen einem
System und einer Sammlung von Einzelfällen — und der Grund, warum das Layout beim Frontend-Bau
nicht einzeln nachjustiert werden muss.
.tiles, zwei Hälften → .duo.--tile-min — sie skaliert mit der Schriftgrösse mit.auto-fill für Schaukästen mit fester Anzahl, auto-fit für Karten, die die Zeile füllen sollen.1.1fr 1fr bis 2fr 1fr.grid-template-columns ins Markup schreiben — sie hebeln den Breakpoint aus,
die Sektion bricht auf dem Handy nie um.fr oder --tile-min in rem.Primär = der Farbverlauf-Steinbock. Gefülltes Quadrat für kleine Grössen / Favicon. Die einfarbige Fassung ist eine Datei (logo-mono.svg), eingefärbt vom Rollen-Token — hell Violett, dunkel Pink. Das gestreifte weisse Logo wird vom Brandbook nicht empfohlen ("schmelzende Kerze") und ist unten entsprechend markiert; die GEFÜLLTE Weissfassung trägt im Dunkelmodus Leiste und Fuss.
⚠ Offen: Die Pink-Fassung des einfarbigen Logos ist ein Vorschlag und mit Palo noch nicht abgestimmt. Bis dahin gilt für dunkle Flächen der Verlaufs-Steinbock oder das Symbol, in Leiste und Fuss die gefüllte Weissfassung.
Die Patterns sind Zuschnitte aus dem Logo-Steinbock, gefüllt mit exakt denselben Verlaufsstopps wie Logo und Signatur-Verlauf (Türkis #1EB8C2 → Pink #EE3288 → Violett #662D91). Wegen dieser geteilten Farb-DNA darf ein Pattern sogar auf dem Verlauf liegen, ohne zu kollidieren.
Pattern 1 ist kein Zuschnitt, sondern der ganze Steinbock — ein eigenständiges Motiv ohne natürliche Ecke, keine Kanten-Textur.
Die gelieferten pattern-2.svg und pattern-3.svg tragen ein äusserstes <g transform="rotate(180 …)"> um den viewBox-Mittelpunkt — sie sind das Logo-Teil kopfüber. Diese zwei Dateien werden nicht verwendet (Kundenentscheid 26.07.). Verbindlich sind die Fassungen pattern-2-up.svg und pattern-3-up.svg — dieselben Motive ohne die Drehung, also logo-echt.
Warum das mehr ist als Kosmetik: der Verlauf sitzt via gradientUnits="userSpaceOnUse" innerhalb dieser Gruppe. Eine Drehung nimmt ihn mit — das Türkis läge unten statt oben. Drehen ändert nicht nur die Form, sondern die Verlaufsachse. Darum wird nie gedreht, sondern nur gespiegelt.
Weil jedes Motiv an einer Schnittkante endet, gehört es an genau die Kante, aus der es „herauswächst". Da nicht gedreht wird, steht die Ecke pro Motiv fest — frei wählbar ist nur die horizontale Seite, über .pattern-flip (spiegeln).
| Motiv | Datei | Ecke (ungespiegelt) | gespiegelt |
|---|---|---|---|
| Pattern 2 | pattern-2-up.svg | unten links | unten rechts |
| Pattern 3 | pattern-3-up.svg | unten rechts | unten links |
| Pattern 4 | pattern-4.svg | unten rechts | unten links |
| Pattern 1 | pattern-1.svg | ganzer Steinbock — freies Motiv, keine Ecke | |
P2 · upright✓ unten links · Türkis oben
P2 · upright + gespiegelt✓ unten rechts · so im Hero
P3 · upright✓ unten rechts · Türkis oben
P3 · upright + gespiegelt✓ unten links · Türkis oben
Oben liegen die Motive als <img>, damit jedes einzeln parallaxen kann. Für ruhige Flächen genügt die CSS-Utility: .has-pattern legt das Motiv als ::after über die Fläche, die Ecken-Klasse verankert es, drei Variablen steuern den Rest. Unten die zwei Varianten, die Palo sehen wollte — auf neutraler Fläche über die Kante hinaus und in voller Stärke auf der Verlaufsfläche.
✓ neutrale Fläche · P2 upright · unten links
✓ auf dem Verlauf · volle Stärke · P3 upright
✓ dasselbe Motiv gespiegelt · unten rechts
Die dritte Fläche zeigt den Ausweg für die Gegenkante: ein background-image lässt sich per CSS nicht drehen, wohl aber spiegeln. .pattern-flip kippt die ganze ::after-Box, also wandert die Kante mit — die Ecken-Klasse benennt darum die Lage vor dem Spiegeln (.pattern-bl.pattern-flip landet unten rechts). Damit sind beide horizontalen Kanten erreichbar, ohne P2 je auf den Kopf zu stellen.
| Klasse / Variable | Wirkung | Default |
|---|---|---|
| .has-pattern | legt das Motiv als ::after über die Fläche, volle Deckkraft, nie gekachelt | — |
| .pattern-tl · tr · bl · br | verankert es an einer Ecke — muss zur Ausrichtung des Motivs passen | Pflicht |
| .pattern-flip | spiegelt horizontal; die Ecken-Klasse meint die Lage vor dem Spiegeln | optional |
| --pattern | welches Motiv — --pattern-2-up, --pattern-3-up, --pattern-4, --pattern-1 | Pflicht |
| --pattern-scale | Motivhöhe gegen die Fläche — gross halten, ein Motiv statt vieler kleiner | 122% |
| --pattern-bleed | wie weit es über die verankerten Kanten hinausläuft (negativ = darüber hinaus) | -2rem |
Soll das Motiv am Parallax teilnehmen, geht das nicht über diese Utility — ein background-image kann kein data-depth tragen. Dann als echtes <img>-Element einbinden, wie im Hero und im Dokument-Hero (siehe 11 — Bewegung).
Erst hiess es: nur Pattern 2 darf nicht kopfüber stehen. Im Review vom 26.07. wurde daraus die generelle Regel — gedrehte Motive kommen ganz aus der Foundation. Verwendet werden ausschliesslich die *-up-Fassungen, die Kante wird gespiegelt statt gedreht.
| Motiv | erlaubt | Hinweis |
|---|---|---|
| Pattern 2 | nur upright (pattern-2-up.svg), optional horizontal gespiegelt | gelieferte gedrehte Datei nicht verwenden |
| Pattern 3 | nur upright (pattern-3-up.svg), optional horizontal gespiegelt | gelieferte gedrehte Datei nicht verwenden |
| Pattern 4 | wie geliefert, darf horizontal gespiegelt werden | keine upright-Datei nötig |
| Pattern 1 | freies Motiv | keine Ecke, keine Ausrichtungsregel |
Spiegeln (scaleX(-1)) tauscht die horizontale Kante — beide Seiten sind damit erreichbar, ohne je ein Motiv auf den Kopf zu stellen. So gelöst in Sektion 09: P2 in der upright-Fassung, zusätzlich horizontal gespiegelt → rechte Kante.
Der Preis dieser Regel, offen benannt: die Motive wachsen upright alle aus der unteren Kante. Eine echte Verankerung oben gibt es damit nicht mehr. Soll ein Motiv am oberen Bildrand wirken — etwa hinter einer Navigationsleiste —, wird es gross skaliert und läuft von unten heraus (so gelöst in Sektion 08, --pattern-scale:340%).
Kein Element unten enthält eine eigene Farbe — alles kommt aus den Rollen-Tokens. Das ist die Probe aufs Exempel: trägt das Fundament eine echte Oberfläche? Jedes Exemplar steht mit seinem Klassennamen und dem Einsatzzweck da, damit man es ohne Rückfrage übernehmen kann.
Drei Stufen, absteigend in Gewicht — sie existieren, damit sie nebeneinander stehen dürfen. Ein Knopfpaar ist der Normalfall, kein Regelbruch.
Die Regel in einem Satz: höchstens eine primäre Aktion pro Sektion, und zwei gefüllte Knöpfe nebeneinander nie mit demselben Gewicht. «Höchstens», nicht «mindestens» — ein Abschnitt, dessen Hauptaufruf woanders steht, kommt ohne Primär aus. Die Stufen müssen auch nicht benachbart sein: Primär neben Ghost ist der häufigste Fall überhaupt, weil der grössere Abstand die Rangfolge schneller lesbar macht. Ghost darf sich wiederholen — er ist kein Ruf, sondern ein Weg; drei Ghost-Links in einer Reihe sind Navigation, keine konkurrierenden Aufrufe.
Reihenfolge: im Fliesstext steht der lautere Knopf zuerst, der Blick läuft von links. In Leisten und Abläufen kehrt sich das um — in der Navigation sitzt «Book a Demo» ganz rechts an der Kante (siehe 08), im Formular steht «Zurück» links und «Weiter» rechts. Dort schlägt die Richtung die Rangfolge.
.btn--primary.btn--secondary.btn--ghost.on-brandEine Karte, drei Zustände. Der Inhalt unten ist echte Produkt-Copy; die Beschriftung sagt jeweils, was sich ändert — nicht der Text, sondern die Auszeichnung.
Verhalten messen, verändern und im Ernstfall eindämmen — die vollständige Stufe.
Demo buchenVerhalten messen: Phishing-Simulationen, Angriffsszenarien, Szenario-Bibliothek.
Demo buchen.card.card--featured — Verlaufs-Glow und
Verlaufs-Eyebrow. Genau eine Karte pro Reihe, sonst hebt sich keine mehr ab..card — heller Grund, feine Kontur, weicher Schatten.
Der Normalfall..card.on-dark — die Rollen kehren sich um, der Akzent
wird Pink. Für Abschnitte, die sich absetzen sollen.Das Badge steht bewusst nicht bei den Aktionen: es ist kein Knopf, nicht klickbar und trägt keine Rangfolge. Es markiert einen Zustand — «Neu», «Empfohlen» — und sitzt darum dort, wo es vorkommt: an der hervorgehobenen Karte oben.
.badgeDer komplette Hero — transparente Person als Vordergrund-Layer, Feature-Cards in Frosted-Glass um den Kopf, Signatur-Pattern voll deckend an der Kante, Logo-Vertrauensband «Section an Section». Maus + Scroll = leichter Parallax, Cards tilten on-hover. Verlauf/Shape bleiben CTA-Momenten vorbehalten (hier nur die Pattern-DNA). Kein Orange am Menschen.
AI attacks move in minutes. Cyberdise helps your employees, SOC, and automations respond at machine speed — and engineers secure behavior.
Sparsam eingesetzt. Gleiche Komponenten; Rollen kehren sich um — Flächen werden tiefviolett, Accent wechselt von Violett zu Pink für Kontrast, der warme Highlight-Ton bleibt. Verlauf + Pattern funktionieren weiterhin.
Berg-Parallax ansehen →
Gestaffelte Bergebenen als Parallax-Band, in fünf Behandlungen. Steht bewusst ausserhalb der
Foundation und ist noch nicht Teil des Systems. Achtung: dort tragen die Bildebenen
Scroll- und Cursor-Parallax und weichen damit von der Regel in «Bewegung» ab
(Szene folgt dem Scroll, nur UI dem Cursor). Wird das Experiment angenommen, braucht jene
Regel eine Ausnahme für Bildebenen.
Frosted Glass ist im System kein Stil, sondern ein Schichtmittel: eine halbtransparente Fläche, die zeigt, dass etwas darunter liegt. Sinnvoll nur über Pattern, Verlauf oder Bild — auf einer flachen Fläche ist Glas reine Dekoration und kostet nur Kontrast.
| Token | Hell | Dunkel |
|---|---|---|
| --glass-surface | surface-raised, 62% deckend | purple-900, 58% deckend |
| --glass-border | Fläche gegen --border | purple-200, 22% |
| --glass-blur | 16px | |
| --glass-saturate | 1.3 — hält die Farben darunter lebendig | |
| --glass-shadow | violett getönt + heller Innenrand | mit Schwarzanteil |
Bewegung ist im Cyberdise-System kein Effekt um seiner selbst willen, sondern eine Zuordnung: Was zur Szene gehört, folgt dem Scroll. Was auf den Nutzer reagiert, folgt dem Cursor. Diese Trennung ist verbindlich — Layer hängen nie an beiden Signalen.
Pattern und Personen sind Teil der Szene. Sie bewegen sich mit dem Scroll und erzeugen Tiefe im Raum. Der Versatz rechnet relativ zur Sektionsmitte im Viewport (nicht gegen absolutes scrollY) — sonst wird der Layer herausgeschoben, sobald die Sektion weit oben oder unten liegt, und von overflow:hidden abgeschnitten.
Frosted-Glass-Cards, Live-Pill und die radialen Glows sind UI, keine Szene. Sie folgen dem Zeiger und antworten damit direkt auf den Nutzer. Die Cards tilten zusätzlich beim Hover.
| Layer | Signal | Variable | Tiefe |
|---|---|---|---|
| Pattern (Steinbock) | Scroll | --sy | stark |
| Person (Cutout) | Scroll | --sy | schwach |
| Radiale Glows | Cursor | --px / --py | gestaffelt |
| Feature-Cards | Cursor + Hover-Tilt | --px / --py / --rx / --ry | mittel |
| Live-Pill | Cursor + Hover-Tilt | --px / --py | mittel |
Menschen sind der Vordergrund — transparente Cutouts, die als Layer über Pattern und Verlauf sitzen (Hero, Parallax). Generiert mit Ideogram V4: «transparent background» im Prompt liefert einen echten Alpha-Kanal, kein manuelles Freistellen. Entscheidend ist der Prompt-Stil — realistisch statt makellos.
Positiv beschreiben (Diffusion ignoriert Negation) — echte Merkmale benennen statt «flawless/perfect». Hochformat für Vordergrund-Layer. Native Text-Prompt-Transparenz schlägt nachträgliches remove_background (Rainbow-Fringe an feinem Haar).
Für cardFeed/cards-Teaser keine Cutouts, sondern echte Reportage-Fotos (16:9, kein Alpha). Ausrichtung am BDE-Narrativ: «Morgen eines Security Officers», Verhalten als Teil des Security-Stacks.
