Design system · v1.0

Ein System,
das hält.

Die Grundlage des neuen Auftritts: Tokens, Komponenten, Layout­muster. Ein abgespeckter Kanon — wenige Entscheidungen, konsistent angewendet, statt vieler Varianten.

01 — Farbe

Zwei Grundtöne.
Ein Hauch Creme.

Keine Akzent­farbe. Wärme kommt aus dem Papierton und der Foto­grafie. Navy bleibt die einzige starke Farbe — und dadurch präsent.

Ink
#0A1F3A
Hauptfarbe, Text, Buttons
Ink 2
#1a2b47
Sekundärer Text
Ink soft
#3a4a66
Fließtext
Muted
#6b7890
Meta, Captions
Cream
#F3EFE9
Seiten­hintergrund
Cream 2
#EBE6DC
Sektions-Kontrast
Paper
#FAF7F1
Panels, Karten
Line
#E5DFD4
Hair­line, Divider
02 — Typografie

Instrument Serif
+ Inter.

Ein editorialer Serif für Display und Zitate, ein neutraler Sans für alles andere. Kursiv­schnitte werden gezielt als Geste eingesetzt.

Display
Botulinum — ohne Spur.
Instrument Serif · 400 · italic · 136/-3.5%
H2
Drei Bereiche. Ein Standard.
Instrument Serif · 400 · italic · 72/-3%
H3
Die Kieferlinie, die bleibt
Inter · 500 · 22/-1%
Lede
Ärztlich geführte Praxis in Berlin-Charlottenburg.
Inter · 400 · 17/1.55
Body
Alle Preise als Spanne — weil die konkrete Dosis in der kostenfreien Erstberatung individuell festgelegt wird.
Inter · 400 · 15/1.6
Mono
Erstberatung · kostenfrei · unverbindlich
JetBrains Mono · 400 · 11 · 0.14em · uppercase
03 — Raum · Radius · Linie

Weniger Werte,
präziser eingesetzt.

Kein „3XL"-Radius, keine Schlag­schatten­leiter. Nur was gebraucht wird: 4px Radius, eine Hair­line, ein Bereich Schatten für Floating-Elemente.

Radius
0px
2px
4px
999px

Standard ist 4px. 999px nur für Filter-Pills.

Abstände · 8-Grid
8
16
24
32
48
64
96
Linien
Hairline · Divider
Ink · Gruppen­start
Ink 2px · Emphasis
04 — Komponenten

Sieben Bausteine.

Jede Seite setzt sich aus wenigen, klar benannten Bausteinen zusammen. Keine Component-Sprawl.

Buttons
Karten
A — Botulinumab 280 €

Botulinumtoxin

Faltenbehandlung, Masseter, Bruxismus, Hyperhidrose.

Zum Bereich →
Nächster Termin

Di · 28. Apr · 14:30

Termin sichern →
Index-Zeile
Eyebrow / Mono
01 — EinleitungÄrztlich geführtBerlin · Charlottenburg
Termin-Pill
05 — Muster

Drei Layouts.

Jede Sektion folgt einem von drei Grundmustern. Das schafft Rhythmus — und verhindert Improvisation.

Pattern · 01

Asymmetrischer Header

1fr / 2fr · Titel links, Lede rechts

7/12 + 5/12
Pattern · 02

Editorial 2-up

Gleichgewichtete Split-Section

6/12 + 6/12
Pattern · 03

Index-Liste

Volle Breite, Reveal-Zeilen

12/12
06 — Stimme

Wie wir
schreiben.

Kurz. Klinisch. Vertrauenswürdig. Ohne Beauty-Ton, ohne Marketing-Adjektive. Wir raten ab, wenn wir abraten.

— Nein

„Entdecken Sie Ihre strahlende Schönheit in unserer exklusiven Premium-Beauty-Klinik im Herzen Berlins!"

— Ja

„Eine Praxis, die aktiv abrät, mehr zu machen. Ärztlich geführt. Berlin Charlottenburg."