Dies ist Teil 3 unserer Redesign-Serie. Teil 2: Strategie – Positionierung, Zielgruppen und Content-Architektur

---

Farben sind Entscheidungen

Jede Farbe auf einer Website ist eine Aussage. Sie sagt: "Das hier ist wichtig", "Das gehört zusammen" oder "Klick mich". Wenn du Farben zufällig wählst, sendest du zufällige Signale. Also haben wir jede einzelne Farbe begründet.

Die Palette: Vier Farben, ein System

Türkis (#40eee6) – Der Akzent

Türkis ist unsere Signalfarbe. Sie taucht dort auf, wo etwas Aufmerksamkeit verdient: Badges, Hover-States, dekorative Elemente. Nicht laut genug, um zu schreien. Laut genug, um aufzufallen.

Warum Türkis? Weil es zwischen Blau (Vertrauen) und Grün (Wachstum) sitzt. Und weil es gegen Navy-Hintergründe leuchtet wie ein Leuchtturm.

Bright Blue (#3264fa) – Die Identität

Unser Primärblau ist das Gesicht der Marke. Headlines, Links, primäre Buttons – alles, was sagt "das ist Till Freitag". Kräftig genug für Kontrast, professionell genug für B2B.

Bold Yellow (#ffcc00) – Der Handlungsimpuls

Gelb ist reserviert für genau eine Aufgabe: Call to Action. "Gespräch vereinbaren", "Jetzt starten", "Termin buchen" – wenn es gelb ist, soll geklickt werden. Diese Exklusivität macht Gelb mächtig. Würden wir es überall einsetzen, verlöre es seine Wirkung.

Navy (#1a2744) – Die Bühne

Navy ist unser Dunkelwert. Footer, Feature-Sektionen, Hero-Bereiche – überall dort, wo Inhalte Tiefe brauchen. Navy ersetzt Schwarz, weil reines Schwarz (#000) auf Bildschirmen hart und unfreundlich wirkt. Navy hat Wärme.

Warm Black (#3c3c3c) – Die Lesbarkeit

Für Fließtext verwenden wir kein reines Schwarz, sondern ein warmes Dunkelgrau. Der Unterschied ist subtil, aber spürbar: Texte fühlen sich angenehmer an, die Augen ermüden weniger. Ein Detail, das niemand bemerkt – aber jeder spürt.

Typografie: Eine Schrift, vier Gewichte

Warum nur Montserrat?

Die Versuchung ist groß, mehrere Schriften zu kombinieren. Eine für Headlines, eine für Body, vielleicht noch eine für Akzente. Das Ergebnis? Visuelles Rauschen.

Wir haben uns für Montserrat als einzige Schrift entschieden – und nutzen stattdessen Gewichtung als Gestaltungsmittel:

Gewicht	Einsatz	Beispiel
Regular (400)	Fließtext, Beschreibungen	Paragraphen, Aufzählungen
Medium (500)	Labels, Navigation	Menüpunkte, Bildunterschriften
Semibold (600)	Unterüberschriften, Buttons	Kartentitel, CTAs
Bold (700)	Headlines	H1, H2, Hero-Texte

Das Prinzip: Je wichtiger der Text, desto schwerer das Gewicht. Einfach, konsistent, skalierbar.

Playfair Display – Die Reserve

Wir haben Playfair Display (eine Serifenschrift) im System registriert, setzen sie aber bewusst nicht ein. Warum behalten wir sie? Für den Fall, dass wir in Zukunft redaktionelle Formate brauchen – Zitate, Magazine-Layouts, Editorial Content. Die Option existiert, ohne den aktuellen Look zu verwässern.

Glasmorphismus: Tiefe ohne Schwere

Ein Design-Trend, den wir bewusst einsetzen – nicht als Gimmick, sondern als Gestaltungsprinzip.

Was ist Glasmorphismus?

Halbtransparente Flächen mit Blur-Effekt, die den Eindruck von Glas erzeugen. Dahinter liegende Elemente schimmern durch, was Tiefe und Schichtung suggeriert.

Wo wir es einsetzen

• Karten und Panels – bg-white/80 backdrop-blur-sm statt solider Hintergründe
• Dekorative Blur-Orbs – Große, unscharfe Farbflächen (Türkis, Blau) als Hintergrundelemente
• Navigation – Leicht transparenter Header, der beim Scrollen den Content durchscheinen lässt

Wo wir es nicht einsetzen

• Text auf kritischen CTAs – Lesbarkeit geht vor Ästhetik
• Mobile bei schwacher Hardware – backdrop-blur ist GPU-intensiv, wir reduzieren Effekte auf kleinen Geräten
• Überall gleichzeitig – Wenn alles Glas ist, ist nichts besonders

Das Design-System: Von Tokens zu Komponenten

Warum ein Design-System?

Ohne System passiert Folgendes: Entwickler A nutzt #3264fa, Entwickler B nutzt rgb(50, 100, 250), Entwickler C tippt blue-600. Drei Leute, ein Blau, drei verschiedene Werte. Bei einer Farbänderung müssen alle drei Stellen gefunden werden.

Unser Ansatz: Semantic Tokens. Jede Farbe wird einmal definiert und über CSS-Variablen referenziert.

:root {
  --primary: 224 96% 59%;      /* Bright Blue */
  --turquoise: 177 82% 59%;    /* Akzent */
  --yellow: 48 100% 50%;       /* CTAs */
  --navy: 224 50% 20%;         /* Dunkle Sektionen */
}

Im Code steht dann bg-primary statt bg-[#3264fa]. Eine Änderung an einer Stelle ändert alles.

Button-Varianten als Beispiel

Statt jeden Button individuell zu stylen, haben wir drei CTA-Varianten standardisiert:

Variante	Farbe	Einsatz
cta	Gelb	Primäre Handlungsaufforderung
ctaOutline	Blauer Rahmen	Sekundäre CTA auf hellen Hintergründen
ctaOutlineDark	Subtiler Rahmen	Sekundäre CTA auf Navy-Hintergründen

Jede Seite nutzt maximal zwei CTAs: einen primären (Gelb) und einen sekundären (Outline). Mehr braucht es nicht.

Schatten mit System

Auch Schatten sind tokenisiert:

• shadow-soft – Dezente Erhebung für ruhige Elemente
• shadow-card – Standard für Karten im Ruhezustand
• shadow-hover – Blau getönt, für Hover-States – ein subtiler Hinweis auf Interaktivität

Animationen: Bewegung mit Zweck

Wir nutzen Framer Motion für Scroll-Animationen. Die Regel: Jede Animation muss eine Funktion haben.

• Fade-in von unten – Signalisiert "neuer Inhalt"
• Staggered Children – Zeigt Zusammengehörigkeit in Listen
• Scale-in – Betont Wichtigkeit

Was wir nicht machen: Parallax-Scrolling, Auto-Play-Karussells, blinkende Elemente. Subtilität schlägt Spektakel.

Responsive Design: Mobile zuerst gedacht

Unser Grid-System:

• Mobile (< 768px) – Einspaltiges Layout, reduzierte Abstände, vereinfachte Navigation
• Tablet (768px – 1024px) – Zweispaltiges Grid, angepasste Typografie
• Desktop (> 1024px) – Volle Breite, alle Effekte, mehrspaltige Layouts

Die wichtigste Entscheidung: Kein separates Mobile-Design. Stattdessen responsive Komponenten, die sich fließend anpassen. Breakpoints sind keine Grenzen, sondern Übergänge.

Dark Mode: Vorbereitet, nicht aktiviert

Das Design-System hat vollständige Dark-Mode-Tokens. Jede Farbe hat ein dunkles Äquivalent. Aber wir haben uns entschieden, Dark Mode vorerst nicht zu aktivieren.

Warum? Weil ein gut gemachter Dark Mode nicht einfach "alle Farben umkehren" bedeutet. Kontraste, Schatten, Transparenzen – alles muss neu abgestimmt werden. Lieber ein exzellenter Light Mode als ein halbgarer Dark Mode.

Das Learning: Design ist Disziplin

Das Design-System hat uns gezwungen, jede visuelle Entscheidung zu begründen. "Sieht gut aus" reicht nicht. "Es ist Gelb, weil es eine CTA ist" – das ist eine Begründung. "Es ist Gelb, weil Gelb schön ist" – das ist keine.

Diese Disziplin zahlt sich aus: Jede neue Seite, jede neue Komponente folgt denselben Regeln. Das Ergebnis sieht nicht nur konsistent aus – es fühlt sich konsistent an.

---

Nächster Artikel: Redesign Teil 4 – Tech Stack: Warum Lovable, Vite und Markdown statt WordPress (coming soon)

Vorheriger Artikel: Teil 2 – Strategie: Positionierung, Zielgruppen und Content-Architektur