Corporate Identity · Designsystem

Das Gesicht, als Regel.

Dieses Designsystem ist aus dem entstandenen Gesicht von Prognos destilliert. Farbe, Schrift, Rhythmus und Tonfall sind hier nicht Vorschlag, sondern Gesetz — damit jede neue Oberfläche das gleiche Atemzugsgefühl trägt.

Markenzeichen

Die Wortmarke.

Serif, kursiv, mit goldenem Punkt. Der Punkt ist das einzige typografische Ornament, das sich Prognos erlaubt — er steht für den Zustand: gesetzt, finalisiert, entschieden.

Prognos.
Mit jedem Projekt klüger.

Schrift Playfair Display · Stil italic · Gewicht 500 · Punkt-Farbe --c-highlight. Niemals sans. Niemals upright. Niemals ohne Punkt.

Farbe · Primär

Vier tragende Säulen.

Die Mehrheit jeder Oberfläche lebt von diesen vier. Alle anderen sind Begleiter.

#0a0e1a
Ink--c-ink · #0a0e1a
Headlines, Fließtext. Nicht Schwarz, sondern tiefdunkel-blau. Trägt 70 % aller Texte.
#fafaf7
Paper--c-paper · #fafaf7
Seiten-Hintergrund. Warmes Offwhite, nie kaltes #fff. Schafft Papier-Gefühl.
#1a4d8f
Accent--c-accent · #1a4d8f
Marineblau. Verlinkungen, CTA-Hover, Schicht-Indikatoren. Ruhig, seriös.
#c5a572
Highlight--c-highlight · #c5a572
Warmes Gold. Einmal pro Sektion. Markenpunkt, Akzentleisten, Ring-Fokus.
Farbe · Begleiter

Die stillen Helfer.

#1f2433
Ink-soft--c-ink-soft
Body-Text, weicher als Ink.
#f3f1ea
Paper-Alt--c-paper-alt
Alternierende Abschnitte, sanftes Unterteilen ohne Linien.
#5c6370
Muted--c-muted
Sekundäre Texte, Captions, Meta-Information.
#d8d5cc
Rule--c-rule
Trennlinien, Karten-Grenzen. Feiner, warmer Grauton.
Farbe · Funktion

Nur wenn nötig — nie dekorativ.

#2f6b3a
OK--c-ok
Machbarkeit, Success-Zustände. Gedämpftes Grün.
#8a6a28
Warn--c-warn
Eingeschränkt, teilweise möglich. Oliv-Gold.
#3a4a6b
Info--c-info
Zukunftsmarker, langfristige Felder. Dunkles Blaugrau.
#eae6db
Rule-Soft--c-rule-soft
Die zurückhaltende Trennlinie. Wenn Rule zu viel ist.
Typografie

Drei Schriften. Jede hat ihre Aufgabe.

Playfair für Autorität, Inter für Lesbarkeit, JetBrains Mono für Präzision. Niemals mehr als drei Gewichte pro Familie.

Playfair Display · 500 · Headline

Das System liest dich.

Playfair Display · 500 · Section-Head

Fünf Schichten. Ein Lernapparat.

Inter · 400 · Lead

Prognos verwandelt deine Projekthistorie in einen Lernvorsprung, der sich nicht kopieren lässt.

Inter · 400 · Body

Jeder Eintrag ist ein Fehler, der mehr als einmal aufgetreten ist. Bei drei oder mehr Projekten wird er zur globalen Regel promoviert — so verschwinden wiederkehrende Fehler strukturell.

Inter · 600 · Uppercase Label
Das Problem
JetBrains Mono · 400 · Code / Metrik
git log · /srv/prognos · commits 11 · rules 4 · memory 4
Raum

Weißraum als Stimme.

Der Rhythmus folgt dem Spacing-System — 0.25 rem bis 9 rem in neun Schritten. Großzügig. Nie gedrängt.

Content max-width 1120 px · Prose max-width 720 px. Nichts darf sich über die volle Bildschirmbreite erstrecken.

Komponenten

Die Bausteine, die sich wiederholen.

Buttons
Metrik-Karte
60%
der Infrastruktur existiert bereits.
Hinweis

Der Callout ist die einzige Box, die eine farbige Akzentkante erlaubt — und nur in Gold. Rot und Grün sind für Machbarkeits-Markierungen reserviert.

Ton

Wie Prognos spricht.

Tut

  • Direkt, unverschnörkelt, auf Deutsch
  • Konkrete Zahlen statt Adjektive (60 Prozent, nicht die meiste)
  • Technische Begriffe in Monotype, einmal erklärt
  • Zitate in Serif, eingerückt, mit Quelle
  • Grenzen ehrlich benennen (Machbarkeit als offener Kreis für langfristig)

Tut nicht

  • Hype-Vokabular (revolutionär, disruptiv, Game-Changer)
  • Ausrufezeichen am Satzende (außer in Zitaten)
  • Emojis im Fließtext (außer Status-Symbole)
  • Stock-Fotos, Gradient-Hintergründe, Glow-Effekte
  • Wir revolutionieren oder Vertraue uns, dass
Animation

Bewegung ist Atem, nicht Effekt.

TokenWertEinsatz
--dur-fast160 msHover, Fokus
--dur-med320 msModale, Dropdowns
--dur-slow520 msScroll-Reveal, Spawn
--easecubic-bezier(0.22, 0.61, 0.36, 1)Ausschließlich diese Kurve

Keine Springs, keine Bounces, keine Neon-Glows. Reine Opacity und sanfte Translate-Y. Bei prefers-reduced-motion: Animation auf 0 ms.

Tokens

Alle Werte an einer Stelle.

Eine CSS-Custom-Property-Datei als Single Source of Truth. Jedes Projekt, das die gleiche CI trägt, kopiert diese Datei.

tokens.css direkt öffnen · base.css · components.css

Maschinenlesbare Regel im Gehirn unter /srv/prognos/rules/20_ci.md — wird von jeder künftigen Session als Designbasis gelesen.

Das ist kein Vorschlag. Das ist die Regel.

Jede neue Prognos-Oberfläche wird nach dieser CI gebaut. Abweichungen brauchen eine dokumentierte Begründung — sie werden zu Patterns, nicht zu Ausnahmen.

Zum Gesicht