Corporate Identity & Design Guide
Calculated Chaos — CI/CD Guide v1.0

Diese Datei ist deine Referenz für Farben, Schriften und Anwendung der Marke Chrystal Math — auf Papier und im Netz.

↑ Live umschalten und in Ruhe entscheiden, bevor du dich festlegst.
Markenkern

## Präzision mit Pailletten.

Chrystal Math ist Geometrie, die tanzen gelernt hat. Der Zirkel zieht exakte Kreise, die Konstruktionslinien stimmen — und mittendrin tanzt jemand bewusst aus der Reihe. Genau das ist calculated chaos: durchdachte Struktur, die sich einen glamourösen Wildcard-Moment erlaubt.

Für dein Design heißt das konkret: harte, saubere geometrische Grundformen (Kreise, Zirkel, Konstruktionslinien) treffen auf einen theatralischen, hochkontrastreichen Farbverlauf. Struktur zuerst, Glamour als bewusster Regelbruch obendrauf — nie umgekehrt.

Farbsystem

## Der Verlauf ist die Signatur.

Fünf Kernfarben aus dem Original-Logo, plus Gold als sparsam eingesetzter Signal-Akzent für Linien, Icons und kleine Details (Zirkel, Sterne, Trennlinien).

Chaos Pink
#F03A82
Primär — Start des Verlaufs
Orchid
#B744C4
Übergang Pink→Blau
Violet
#645EE9
Übergang Mitte
Sky Cyan
#02AFF1
Primär — Ende des Verlaufs
Deep Wine
#6F235C
Schatten/Hover von Pink
Deep Petrol
#096089
Schatten/Hover von Cyan
Calculated Gold
#E3B63E
Akzent — sparsam, für Linien & Icons
Ink Light
#F5F1EA
Fließtext auf dunklem Grund

### Hintergrund — drei Optionen zur Wahl

Reines Schwarz ist raus. Alle drei Alternativen sind dunkel genug, damit der Neon-Verlauf weiter leuchtet, aber jede setzt eine andere Stimmung.

Empfehlung

#### Mitternachtsblau

#0B1330
Chrystal Math
Calculated Chaos.

Kosmisch, edel — passt zum Zirkel/Sterne-Motiv im Logo. Kühlster Unterton, größter Kontrast zu Pink und Gold.

#### Anthrazit / Graphit

#18171C
Chrystal Math
Calculated Chaos.

Neutral, modern, leicht violetter Unterton. Wirkt am „technischsten" — gut für Web/UI-lastige Anwendungen.

#### Aubergine / Plum

#200C24
Chrystal Math
Calculated Chaos.

Am nächsten am Lila-Ton des Verlaufs selbst — monochromer, „drag-iger", am wenigsten neutral.

Regel | Bedeutung
--- | ---
60 / 30 / 10 | 60% Hintergrund, 30% Verlauf/Flächen, 10% Gold-Akzent. Der Verlauf bleibt Ausnahme, nicht Grundzustand.
Ein Verlauf pro Fläche | Nie zwei Farbverläufe gleichzeitig im selben Sichtfeld — das kippt schnell ins Unruhige.
Kontrast zuerst | Fließtext immer in Ink Light oder Ink Muted auf dunklem Grund, nie in Verlaufsfarbe direkt.
Gold bleibt selten | Gold nur für Linien, Icons, Sterne, Mikro-Details — nie als Fläche oder Fließtextfarbe.

#### ✓ So funktioniert's

- Verlauf auf Headlines, Logo, große Flächen
- Volltonfarben (einzeln) für Buttons, Icons, Tags
- Gold als Trennlinie oder kleines Sternsymbol

#### ✕ Bitte vermeiden

- Verlauf auf Fließtext (schlecht lesbar)
- Cyan-Text direkt auf Pink-Fläche (zu wenig Kontrast)
- Gold großflächig statt als Akzent

Typografie

## Zwei Stimmen, ein Akzent.

Alle drei Schriften stehen bei Google Fonts unter der SIL Open Font License 1.1 — vollständig kostenlos, auch kommerziell, ohne Copyright-Risiko, selbst hostbar oder per Google-Fonts-CDN einbindbar.

Display — Wortmarke & HeadlinesSIL OFL 1.1 · frei
Chrystal Math

Bodoni Moda — moderner, freier Nachbau der klassischen Bodoni-Didone-Schnitte. Trifft den hochkontrastreichen Dünn-Dick-Charakter des Original-Logos am nächsten.

Regular 400Aa SemiBold 600Aa ExtraBold 800Aa ItalicAa
Sans — Fließtext, UI, TaglinesSIL OFL 1.1 · frei
Calculated Chaos.

Poppins — geometrische Grotesk, arbeitet mit breiter Laufweite genau wie die Original-Tagline. Für Fließtext, Buttons, Navigation, Labels.

RegularAa SemiBoldAa BoldAa
Akzent — der „pfiffige" Moment, sehr sparsamSIL OFL 1.1 · frei
…mit einer Prise Unordnung.

Fraunces Italic — weicher, verspielter Serifenschnitt mit Charakter. Nur für einzelne Signature-Momente: Zitate, Unterschriften, eine Zeile auf dem Briefkopf. Nie für ganze Absätze.

Rolle | Schrift | Wann
--- | --- | ---
Headline / Wortmarke | Bodoni Moda SemiBold–ExtraBold | Titel, Logo-Schriftzug, große Aussagen
Fließtext | Poppins Regular | Absätze, Beschreibungen, Web-Body
Labels / Tags | Poppins SemiBold, tracking +0.15–0.25em | Kicker, Buttons, Navigation, Kleingedrucktes
Signature-Moment | Fraunces SemiBold Italic | 1 Zeile pro Anwendung, nie mehr

Logo & Signet

## Der Zirkel bleibt Zirkel.

Das „A" in „MAth" ist eine Zirkel-Illustration, kein Buchstabe — sie darf nie durch reinen Text ersetzt werden. Das Logo existiert nur als Ganzes, nicht in Einzelteilen.

Regel | Detail
--- | ---
Schutzraum | Mindestens die Höhe des „C" als Abstand zu Rand, Text oder anderen Elementen
Mindestgröße | Druck: 30mm Breite · Web: 160px Breite — darunter verliert der Verlauf Zeichnung
Erlaubte Untergründe | Alle drei Hintergrundfarben dieses Guides; helle Flächen nur mit dunklem Container darunter
Nicht erlaubt | Umfärben außerhalb der Palette, Verzerren/Stauchen, Freistellen einzelner Buchstaben, Platzierung auf unruhigen Fotos ohne Abdunkelung

Anwendungen

## Vier Beispiele, ein System.

Zwei für den Druck, dazu ein Briefkopf mit Signature-Moment, und eine vollständige Web-One-Pager-Vorlage — alle aus denselben Tokens gebaut.

Druck

#### Poster

A2, Hochformat. Großer Verlauf als Bühne, ein Termin/Statement als Fokus.

poster.pdf
Druck

#### Postkarte

A6, beidseitig. Vorderseite Bildmotiv, Rückseite Absender + Nachrichtenfeld.

postkarte.pdf
Druck

#### Briefkopf

A4. Elegant reduziert, mit einem Fraunces-Signature-Moment als Pfiff.

briefkopf.pdf
Web

#### One-Pager

Vollständige Website-Vorlage: Header, Nav, Bio, Programm, Zitat, Kontakt, Footer.

onepager.html