Creative North Star
«Der Wissensgraph»
Die Website ist, was das Produkt ist: ein lesbar gemachter Knowledge Graph. Jedes Element ist ein klarer Knoten — eine Überschrift, ein Beweis, ein Button — und jede Verbindung dazwischen ist beabsichtigt. Struktur ist die Ästhetik.
- Eine Familie, eine Ankerfarbe, ein Schatten, eine Reveal-Bewegung — Tiefe durch Disziplin.
- Nur semantische Tokens; dunkle Flächen gibt es gratis.
- Interaktion ist eindeutig: Was leuchtend blau ist, ist klickbar.
- Beweise tragen die Seite: Zahlen, Referenzen und Zitate sind erstklassig.
Farben
Eine zurückhaltende, Navy-getragene Palette: die Tiefe der Marke trägt die Identität, eine Signalfarbe trägt jede Interaktion.
--color-navy-950 --color-navy-800 --color-accent-600 --color-accent-300 --color-surface --color-surface-muted --color-navy-600 --color-slate-200 --color-yellow-sun --color-danger Signal Blue gehört der Interaktion — und nur ihr. Ist ein Element leuchtend blau, kann man es anklicken; ist es nicht klickbar, bekommt es kein Signal Blue.
Dunkle Bereiche werden deklariert, nicht gestylt: data-surface=„dark“ setzen, und die semantischen Tokens binden sich um. Dunkle Sektionen von Hand einzufärben ist verboten.
Sun Yellow erscheint nur in der Logomarke und im Favicon. Als Akzent, Hervorhebung oder Dekoration ist es überall sonst tabu.
Primitive Skalen
Rohe Palette — Komponenten referenzieren diese nie direkt; sie speist die Rollen oben.
Typografie
Eine Familie macht die ganze Arbeit: Overpass — Signage-Erbe für eine Firma,
deren Produkt Lesbarkeit ist. Überschriften via class="h1"…h6 /
display; Grösse, Zeilenhöhe und Tracking folgen der Foundation-Skala.
Display
Überschrift h1
Überschrift h2
Überschrift h3
Überschrift h4
Überschrift h5
Überschrift h6
Fliesstext läuft bewusst gross: 18 px bei 160 % Zeilenhöhe. Lange Inhalte sitzen in
.prose, das die Zeilenlänge bei rund 65 Zeichen kappt — so bleibt auch dichtes
Material ruhig lesbar. Gedämpfter Text nutzt Annotation Navy, nie ein beliebiges Grau.
Nie neue Schriften. Hierarchie entsteht aus Overpass-Gewichten (400/600/700) und der Foundation-Skala. Eine zweite Schriftfamilie ist ein Bug.
Das Markup bleibt semantisch, das Aussehen ist eine Klasse: <h2 class=„h1“> ist ein h2, das wie ein h1 aussieht. Die Dokumentstruktur wird nie einer Grösse geopfert.
Elevation
Flach als Grundzustand. Das System besitzt genau einen Schatten
(--shadow-card) — reserviert für das, was wirklich über der Seite schwebt:
Navigation, Dropdowns, gehobene CTA-Karten. Alles andere trennt sich über Graph-Paper-Tönung
und Hairline-Ränder.
Ruhige Fläche in Graph Paper. Kein Schatten, kein Rand — Trennung durch Tönung.
Der eine Karten-Schatten: 0 3px 5px rgba(153,160,185,0.49)
Es gibt einen Schattenwert, und er markiert schwebende Flächen. Ein zweiter Schattenwert — oder ein Schatten auf einem statischen Element im Textfluss — ist verboten.
Radien & Abstände
Jede Komponentenklasse hat ihren festen Radius; Abstände folgen wenigen, wiederkehrenden Schritten.
5px 8px 10px 12px 16px 24px Seitenränder, Grid-Abstände 48px Innenabstand von Karten 96px Vertikaler Sektionsabstand Motion
Eine komponierte Geste: Elemente mit class="reveal" steigen beim Eintritt
700 ms sanft auf (cubic-bezier(0.16, 1, 0.3, 1)), gestaffelt
über Delay-Utilities. Unter prefers-reduced-motion läuft der Observer gar nicht
erst — Inhalte sind immer sichtbar. Zustandswechsel bleiben bei 0.15–0.25 s.
Komponenten
Charakter: tastbar und selbstbewusst — grosszügige Trefferflächen, unmissverständliche Zustandswechsel. Ein Primär-Button tönt beim Hover nicht, er wechselt entschieden von Drafting Navy zu Signal Blue.
Icons
Zentrales SVG-Set, currentColor, vier Grössen.
Buttons — heller Grund
Buttons — dunkler Grund
Dieselben Komponenten; data-surface="dark" bindet die Tokens um — drei
klare Stufen: Primary mit Graph-Paper-Fläche, Secondary als weisser Schleier,
Outline mit weissem Rand.
Buttons — Graph-Paper-Grund
data-surface="muted" — nur Secondary passt sich an: die Graph-Paper-Fläche
würde im Grund verschwinden, darum weisse Füllung. Primary und Outline bleiben wie
auf hellem Grund; der weisse Outline-Button ist hier der natürliche CTA.
Pills / Badges
Links
Inline-Link im Fliesstext (Basisregel, jedes nackte <a>): immer unterstrichen, die Linie wird beim Hover satt. Beispiel: Datenschutzerklärung.
Formularfelder
Wir antworten innert 24h.
Bitte gültige E-Mail eingeben.
Avatar
CTA-Karte (Molekül)
Dunkle Variante: Blueprint-Navy-Fläche via data-surface="dark", der eine
Karten-Schatten, Button in der dunklen Primary-Behandlung (Graph-Paper-Fläche).
Ruhige Variante: Graph-Paper-Fläche via data-surface="muted", weisser
Outline-Button.
Bereit, Ihr Wissen zugänglich zu machen?
Discovery Advisory anfragenRuhige Variante auf Graph Paper
Referenzen ansehenAblauf-Band (Organismus)
Der waagrechte 1·2·3-Streifen, eigenständig und ohne Formular. Mit surface
malt er sich selbst als Vollbreite-Band aus dem Container heraus — der einzige getönte
Streifen in einem weissen Seitenlauf. Ohne surface trennt nur eine Haarlinie.
Ziffern aus dem ol-Zähler, Gold an der linken Kante jedes Schritts.
So läuft es ab
- Sie schreiben uns
Ein Satz zu Ihrem Vorhaben genügt. Kein Briefing, keine Unterlagen, keine Vorbereitung.
- Erstgespräch, 30 Minuten
Wir hören zu und zeigen, welche Analyse für Ihre Situation richtig ist. Und wenn wir nicht passen, sagen wir auch das.
- Klarer Plan, fester Rahmen
Ein konkreter Vorschlag: was wir untersuchen und was Sie danach über Ihr System wissen. Erst dann entscheiden Sie, ob wir anfangen.
So läuft es ab
- Sie schreiben uns
Ein Satz zu Ihrem Vorhaben genügt. Kein Briefing, keine Unterlagen, keine Vorbereitung.
- Erstgespräch, 30 Minuten
Wir hören zu und zeigen, welche Analyse für Ihre Situation richtig ist. Und wenn wir nicht passen, sagen wir auch das.
- Klarer Plan, fester Rahmen
Ein konkreter Vorschlag: was wir untersuchen und was Sie danach über Ihr System wissen. Erst dann entscheiden Sie, ob wir anfangen.
CTA-Section (Organismus)
Claim, Lead, senkrechter Ablauf, Person mit Zitat, Direktkontakt und das Formular-Panel —
jeder Slot ausser dem Panel ist optional, kein Kicker im Normalfall. Das Panel steht immer
eine Stufe neben seiner Fläche und trägt auf hellem Grund den Kartenschatten; das
Nachrichtenfeld nimmt die Höhendifferenz zur Textspalte auf. Die Feldzeile schaltet per
Container-Query. Kein Consent-Häkchen. Hier in der schmalen Seitenspalte; auf einer Seite
kommt es in einen Container variant="wide", Band und Ablauf nie zusammen.
Bevor Sie transformieren: reden wir über Ihr System.
- Sie schreiben uns
Ein Satz zu Ihrem Vorhaben genügt. Kein Briefing, keine Unterlagen, keine Vorbereitung.
- Erstgespräch, 30 Minuten
Wir hören zu und zeigen, welche Analyse für Ihre Situation richtig ist. Und wenn wir nicht passen, sagen wir auch das.
- Klarer Plan, fester Rahmen
Ein konkreter Vorschlag: was wir untersuchen und was Sie danach über Ihr System wissen. Erst dann entscheiden Sie, ob wir anfangen.
«Die meisten Projekte scheitern nicht an der Technik, sondern an dem, was niemand mehr über das System weiss.»
Danke, Ihre Anfrage ist angekommen.
Wir melden uns innert 24 Stunden. Schritt zwei: Sie wählen den Termin.
Sprechen wir über Ihr Problem.
30 Minuten, kostenlos und ohne Verpflichtung.
«Sagen Sie uns, was Sie vermuten. Wir sagen Ihnen, wie man es belegt.»
Danke, Ihre Anfrage ist angekommen.
Wir melden uns innert 24 Stunden. Schritt zwei: Sie wählen den Termin.
Kontakt
Wissen, was Ihr System wirklich tut.
Erzählen Sie uns von Ihrem Vorhaben. Wir antworten mit einer ehrlichen Einschätzung — nicht mit einer Offerte.
- Sie schreiben uns
Ein Satz zu Ihrem Vorhaben genügt. Kein Briefing, keine Unterlagen, keine Vorbereitung.
- Erstgespräch, 30 Minuten
Wir hören zu und zeigen, welche Analyse für Ihre Situation richtig ist. Und wenn wir nicht passen, sagen wir auch das.
- Klarer Plan, fester Rahmen
Ein konkreter Vorschlag: was wir untersuchen und was Sie danach über Ihr System wissen. Erst dann entscheiden Sie, ob wir anfangen.
Danke, Ihre Anfrage ist angekommen.
Wir melden uns innert 24 Stunden. Schritt zwei: Sie wählen den Termin.
Fragen zu Ihrem Projekt?
Kurze Frage, kurze Antwort — oder ein Erstgespräch, wenn es mehr braucht.
Danke, Ihre Anfrage ist angekommen.
Wir melden uns innert 24 Stunden. Schritt zwei: Sie wählen den Termin.
Do's & Don'ts
Do
- Nur semantische Tokens in Komponenten referenzieren (--color-surface, --color-text, --color-interactive, …).
- Dunkle Bereiche mit data-surface=„dark“ deklarieren und die Tokens arbeiten lassen.
- Signal Blue ausschliesslich für Interaktives reservieren — The Signal Rule.
- Hierarchie über Overpass-Gewichte und die Foundation-Skala aufbauen.
- Beweise sichtbar machen: Zahlen, Zitate und Referenzen sind visuell erstklassig — Beweisen statt behaupten.
- Jeder Animation einen Reduced-Motion-Pfad geben; der Reveal-Observer überspringt bereits alles.
Don't
- Kein AI-Startup-Hype: Purpur-Gradienten, Glow-Effekte, Glassmorphism, Gradient-Text.
- Kein Beratungskonzern-Glanz: Stockfoto-Handshakes, leere Slogan-Wände.
- Keine trockene Ingenieurs-Homepage: Textwände ohne Hierarchie. Ruhe ist nicht die Abwesenheit von Gestaltung.
- Kein Sun Yellow ausserhalb der Logomarke — The Logo Yellow Rule.
- Keine dunklen Sektionen von Hand einfärben, kein zweiter Schattenwert.
- Die Pill nicht als Eyebrow über jeder Sektion streuen; sie ist Taxonomie, keine Sektionsgrammatik.
- Keine neuen Schriften, keine farbigen Seitenstreifen (border-left), keine Icon-Karten-Raster.
Noch fehlende Atome
Atom-Set: Button, Icon, Pill, Link, Input, Textarea, Select, Avatar. Noch offen:
- Checkbox / Radio / Toggle
- Tooltip
- Card (Molekül)