Styleguide

Grundlage: die bestehende Webseite. Das Logo wurde als Vektor 1:1 nachgebaut, die Farbwelt aus dem Grün der Praxis entwickelt und um Grau ergänzt — nach der Regel des Taste Skills: eine Akzentfarbe, Sättigung unter 80 %.

Bildmarke — Original und Nachbau

Original: JPG, 75 × 170 px, 1,9 KB

Nachbau: SVG, frei skalierbar, 0,9 KB

Die Marke besteht aus zwei Elementen: einem gefüllten Kreis (#97C11F) und einem frei stehenden Halm, dessen Deckkraft nach unten ausläuft. Ein Spross — botanisch ein Bild für Wachstum, Regeneration und Beweglichkeit, also genau das Feld der Orthopädie. Beide Elemente sind geometrisch nachgebaut, nicht nachgezeichnet: der Kreis als echter Kreis, der Halm als Linie mit runder Kappe, deren Deckkraft nach unten ausläuft. Die Vorlage berührt den Kreis nicht — das ist bewusst so übernommen.

Bildmarke herunterladen

Die Bildmarke als SVG — frei skalierbar, für Web, Druck und Social Media. Eine Datei, keine Auflösungsgrenze.

Bildmarke als SVG herunterladen

Liegt auch im Dashboard als Eintrag. Die Wortmarke ist Text in Outfit — dafür genügt die Schrifteinstellung, gedruckte Lockups lassen sich daraus jederzeit ableiten.

Wortmarke

Dr. med. Andreas Krämer

Facharzt für Orthopädie · Unfallchirurgie
Manuelle Medizin · Chirotherapie

Dr. med. Andreas Krämer

Facharzt für Orthopädie · Unfallchirurgie
Manuelle Medizin · Chirotherapie

Regeln

Regel	Wert
Schrift der Wortmarke	Outfit, 600
Laufweite	−0,02 em
Name	Dr. med. Andreas Krämer
Titelzeile	Facharzt für Orthopädie · Unfallchirurgie Manuelle Medizin · Chirotherapie
Schutzraum	mindestens die Höhe des Kreises rundum
Nie	den Kreis verzerren, den Halm freistellen, andere Farben als unten

Farben

Das Grün ist die Marke — es steht im Logo und auf den Polohemden des Teams. Es bleibt, wird aber nach der Taste-Skill-Regel geprüft: alle Grüntöne liegen unter 80 % Sättigung. Blau und die beiden Rottöne der Altseite entfallen, Schwarz wird zu Tinte.

Markengrün#97C11F · Sättigung 73,1 %
Flächen mit Tinte: 7,99:1

Grün tief#5E7F14 · Weiß darauf: 4,64:1
für Flächen und Buttons

Grün dunkel#41580E · auf Papier: 7,65:1
für Links und Text

Grün blass#EFF5DF · für Flächen und Hinweise

Tinte#1D1D1B · Text · 16,2:1 auf Papier

Grau#6B6B66 · Sekundärtext · 5,1:1 auf Papier

Papier#FAFAF8 · Grundfläche

Linie#DEDEDA · Rahmen und Trenner

Warum Grün und Grau funktionieren: Grün trägt die Bedeutung, Grau trägt die Struktur. Der Ansatzpunkt der Altseite war nicht die Farbwahl, sondern die Menge — Grün, Blau, zwei Rottöne und sechs Grautöne ohne System. Jetzt gibt es eine Akzentfarbe mit drei Abstufungen und eine neutrale Grauskala.

Schriften

Rolle	Schrift	Gewichte	Warum
Überschriften, Wortmarke	Outfit	500, 600, 700	Der Taste Skill nennt Outfit ausdrücklich als gute Wahl. Geometrisch, klar, ruhig — medizinisch statt verspielt.
Fließtext	Plus Jakarta Sans	400, 500, 600	Sehr gut lesbar auch klein. Wird im Umfeld hochwertiger Gesundheitsseiten empfohlen.
Zahlen (Öffnungszeiten)	Plus Jakarta Sans	400	`font-variant-numeric: tabular-nums` — Zeiten stehen untereinander auf gleicher Höhe.

Ersatz für Verdana: Verdana ist 1996 entworfen, eine reine Systemschrift und wird hier nur noch als Rückfall geführt. Beide neuen Schriften liegen lokal im Projekt (assets/fonts/) — es wird keine Verbindung zu Google aufgebaut, das ist DSGVO-konform.

Verhalten

Tabellenzahlen für Zeiten Öffnungszeiten in einer Spalte mit tabular-nums — 08–12, 14–18 stehen exakt untereinander.

Noch offen

Punkt	Stand
Logo-Lockup als Druckdatei (EPS/PDF)	offen — später ableitbar, sobald gewünscht
Favicon und Social-Media-Fassungen	offen
Farbwelt-Freigabe durch die Praxis	offen — das Grün bleibt, die Abstufungen sind Vorschlag