Human Insight Style Guide & Design System ← Dashboard
Projekt 024 · Verbindliche Grundlage

Design System
Human Insight

Alle Werte dieser Seite sind aus dem Elementor-Kit 6 (post-6.css) und den seiten-eigenen Stylesheets (post-4.css, post-122.css) der Live-Website extrahiert — nichts geschätzt. Diese Seite ist die verbindliche Grundlage für alle weiteren Design- und Kommunikationsentscheidungen.

01

Farben

Petrol ist die Markenfarbe und trägt Buttons, Links und Akzente. Dazu kommen vier Bedeutungsfarben — jede steht für eine der vier Säulen der Arbeit. Sie sind nicht austauschbar, sondern tragen Bedeutung.

Marke & Basisfarben

Petrol#00A0B0
Markenfarbe, Buttons, Links
Petrol dunkel#007D8A
Hover-Zustand
Ink#181818
Überschriften
Schwarz#000000
Fließtext
Off-White#F1F0EC
Flächen, Hintergründe
Aprikot#FFBC7D
Seitenübergang

Die vier Bedeutungsfarben

Gesundheit#88B04B
System Mensch
Organisation#00A0B0
Mensch im System
Entwicklung#F0CD5B
Seminare
Events#FF5E0E
Hi-Talks

Hellen Überschriften-Varianten

Für H2 auf getönten Flächen wird ein hellerer Ton derselben Bedeutung verwendet — sonst fehlt der Kontrast.

Gesundheit hell#98BD3B
H2 in Sektion 1
Events hell#FF7023
H2 in Sektion 4
Kontrastwarnung. Petrol #00A0B0 erreicht auf Weiß nur 3,0:1. Damit ist es für Fließtext ungeeignet. Petrol gehört auf Buttons, Linien, Icons und Überschriften ab etwa 24 px — nicht in Absätze.
03

Typografie

Eine einzige Schriftfamilie trägt die gesamte Marke: Mulish. Sie ist als variable Schrift lokal eingebunden — kein Aufruf an Google. Die Hierarchie entsteht über Gewicht und Größe, nicht über einen Schriftwechsel.

H1 · 900 · 77px · ls 6,9pxFrom insight to action.
H2 · 700 · 35px · ls −0,6pxHealth-Coaching und Gesundheitsberatung
H3 · 900System Mensch
Fließtext · 300 · 20px · lh 1,3Die ganzheitliche Gesundheitsberatung betrachtet den Menschen als Ganzes und entwickelt gemeinsam praktikable Lösungsstrategien.
Betont · 600Gemeinsam praktikable Lösungsstrategien entwickeln.
Zahl · 900180,00 €

Registrierte Nebenschriften

Im Kit sind zusätzlich Nunito und B612 registriert. Sie werden punktuell eingesetzt und sind ebenfalls lokal eingebunden — nicht als zweite Markenschrift verstehen.

Kein Serif. Die Marke arbeitet ausschließlich serifenlos. Sobald eine Serifenschrift ins Spiel kommt, wirkt die Seite wie ein anderes Unternehmen.
04

Icons

Phosphor Icons (Regular) — lokal eingebunden. Verwendet wird nur, was eine Bedeutung trägt; dekorative Icons ohne Funktion gehören nicht dazu.

05

Buttons

Drei Varianten. Der Radius ist immer 0 — das scharfe Eck ist ein Markenmerkmal aus dem Kit und wird nirgends aufgeweicht.

Erstgespräch vereinbaren Mehr erfahren Zurück Anrufen
06

Badges & Tags

Gefüllte Badges tragen weiße Schrift und immer eine der Bedeutungsfarben. Sie sind laut, deshalb sparsam einsetzen.

Gesundheit Organisation Entwicklung Events Hi-Talks Archiv
07

Eingabefelder

Schlichte Rahmen, kein Radius. Der Fokus wird allein über die Rahmenfarbe gezeigt — Petrol statt Systemblau.

08

Formen

Die Marke kennt genau einen Radius: 0. Keine Rundungen an Karten, Buttons, Feldern oder Bildern.

0 — Standard
Kreis — nur Avatare
10px — Akzentbalken
2px — Trennlinie
09

Abstände

Grundmaß ist 4px. Sektionsabstände liegen zwischen 95 und 250 px — die Seite braucht viel Luft, das ist Teil der Wirkung.

4pxBasis
8pxKarten-Innenabstand klein
16pxStandard
24pxContainer-Rand
48pxZwischen Blöcken
95pxSektion oben
115pxSektion unten
10

Wirkungen

Zurückhaltend und schnell. Kein Federn, kein Überschwingen — die Bewegung soll die Seite nicht lauter machen.

AnhebentranslateY(-4px) mit weichem Schatten
RahmenRahmenfarbe wechselt zu Petrol
Skalierenscale(1.03) — nur bei Bildern
SchiebentranslateX(6px) — für Listenzeilen
11

Bausteine

Karten und Navigation. Beide tragen keine Rundung und keinen Schatten im Ruhezustand.

Navigation

Karten

System Mensch
Gesundheit und Selbstwirksamkeit — der Mensch als System verstehen und Handlungsfähigkeit zurückgewinnen.
Mehr erfahren
Mit Akzentbalken
Die 10px-Linie oben ordnet die Karte einer der vier Bedeutungen zu. Sie ist das wichtigste Gliederungsmittel der Website.
System Mensch
Auf getönter Fläche
Tönungen entstehen aus der Bedeutungsfarbe mit rund 10 % Deckkraft — niemals als eigener Grauton.
Hinweis
12

Animationen

Vier Bewegungen, alle beim Überfahren ausgelöst. Dauer 0,45 s mit der Standardkurve cubic-bezier(.16,1,.3,1).

Einblenden
Deckkraft
Skalieren
Größe
Schieben
Position
Drehen
Rotation
13

Regeln

Sechs Dinge, die diese Marke ausmachen. Wer sie bricht, bekommt eine andere Marke.

So

  • Radius 0. Buttons, Karten, Felder und Bilder bleiben eckig. Das ist das prägendste Merkmal des Kits.
  • Ein Container von 1140px. Alle Seiten nutzen dieselbe Breite — kein Springen zwischen Ansichten.
  • Bedeutungsfarben einsetzen. Grün, Petrol, Gelb und Orange ordnen Inhalte den vier Säulen zu.
  • Viel Luft. Sektionen atmen mit 95–250px Abstand.
  • Mulish für alles. Hierarchie über Gewicht, nicht über Schriftwechsel.
  • Balken statt Rahmen. Die 10px-Linie oben gliedert, nicht ein Kasten darum.

So nicht

  • Keine Rundungen. Abgerundete Ecken brechen die Formensprache sofort.
  • Keine Serifenschrift. Die Marke ist durchgehend serifenlos.
  • Kein Gelb als Hauptfarbe. Gelb ist ausschließlich „Entwicklung" — nie Leitfarbe.
  • Petrol nicht für Fließtext. Der Kontrast reicht nicht (3,0:1).
  • Keine Schatten im Ruhezustand. Schatten nur als Reaktion auf Interaktion.
  • Farben nicht austauschen. Orange steht für Events, Grün für Gesundheit — nicht beliebig verschieben.
14

Design Tokens

Alle Werte, Texte, Assets und Links dieses Projekts als strukturierte Datei — als Grundlage für KI-Werkzeuge, Übersetzungen und die Weitergabe an Dienstleister.

tokens.json
Projektdaten, Farben samt Bedeutungszuordnung, Typografie mit Gewichten, Asset-Pfade, Originaltexte, Team, Preise, Navigation und alle Links. Enthält auch die Logo-Pfade als PNG und WebP.