Zum Dashboard
Inhalte

Style Guide

ZSH GmbH · Version 1.0 · Juli 2026

Design-System für die ZSH GmbH Finanzdienstleistungen. Exakte Styles von zsh.de extrahiert.

1. Farben
#1A3D77
ZSH Navy
Primärfarbe
#060E1B
Darker Navy
Hover / Deep
#18629F
Medium Blue
Sekundärfarbe
#58ABE0
Link Blue
Links / Akzente
#ABD5EF
Light Blue
Heller Akzent
#E9F4FB
Very Light Blue
Hintergrund
#255757
Teal
Akzentfarbe
#C2E5E5
Light Teal
Teal-Hintergrund
#CC3366
Pink-Red
Akzent-Text
#8F5C94
Purple
Akzent
#B3D6AC
Green
Akzent
2. Typografie
Display / H1 — Roboto Condensed Light 300
Finanzberatung für jedes Einkommen
Heading / H2 — Roboto Condensed Light 300
Beratungsangebote für Ihre Zukunft
Subheading / H3 — Roboto Condensed Light 300
Versicherung und Vorsorge
Body — Roboto SemiBold 600
Die ZSH GmbH Finanzdienstleistungen bietet umfassende Beratung in den Bereichen Versicherung, Vorsorge und Finanzplanung.
Navigation — Open Sans Regular 400 (uppercase)
Unternehmen · Beratungsangebote · Karriere · Blog · Kontakt
3. Buttons

ZSH nutzt flache Buttons mit border-radius: 5px, box-shadow: none, Roboto Condensed Light 300, uppercase.

padding: 0 10px; height: 40px; border-radius: 5px; font-weight: 300; text-transform: uppercase;
4. Badges & Tags
Standard Aktiv Neu Premium
5. Formulare

ZSH nutzt Bottom-Border-Inputs (nur border-bottom: 1px solid), border-radius: 5px, height: 40px.

6. Formen & Radien
15px — Cards
5px — Buttons
14px — Toggle
0px — Nav-Links
7. Abstände
4px
8px
12px
16px
24px
40px
70px — Card-Padding
107px — Section
8. Effekte & Transitions
Transition — Standard
transition: 0.1s ease-in-out;
Transition — Langsam
transition: 0.4s ease-in-out;
Shadows
Keine! ZSH verwendet box-shadow: none überall.
CTA Arrow Hover
width: 17px → 22px; transition: 0.2s ease-out;
9. Do's & Don'ts
Do

Verwende border-radius: 15px für Cards und 5px für Buttons.

Nutze Roboto Condensed Light 300 für alle Headlines.

Halte das Design FLAT — keine Schatten.

Don't

Verwende niemals box-shadow — ZSH ist flach.

Keine eckigen Buttons (0px radius) — immer mindestens 5px.

Keine fetten Fonts (700) für Headlines — nur Light 300.