![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><path d="M 1.414 5.707 L 0.707 6.414 L 0 5.707 L 0.707 5 Z M 18.414 13.707 C 18.414 14.259 17.966 14.707 17.414 14.707 C 16.862 14.707 16.414 14.259 16.414 13.707 Z M 5.707 11.414 L 0.707 6.414 L 2.121 5 L 7.121 10 Z M 0.707 5 L 5.707 0 L 7.121 1.414 L 2.121 6.414 Z M 1.414 4.707 L 11.414 4.707 L 11.414 6.707 L 1.414 6.707 Z M 18.414 11.707 L 18.414 13.707 L 16.414 13.707 L 16.414 11.707 Z M 11.414 4.707 C 15.28 4.707 18.414 7.841 18.414 11.707 L 16.414 11.707 C 16.414 8.946 14.175 6.707 11.414 6.707 Z" fill="rgb(0, 0, 0)" height="14.706999778747559px" id="R0D0X1fCH" width="18.413999557495117px"/></svg>)
WEB STYLEGUIDE
Das Design-System für den Webauftritt mit allen visuellen Komponenten, Regeln und Assets.
01. LOGO SYSTEM
ANWENDUNGEN
POSITIV
NEGATIV
BILDMARKE
FAVICON
02. FARMSYSTEM
60 / 30 / 10 PRINZIP
DOMINANT 60%
HEX
#FFFFFF
SEKUNDÄR 30%
HEX
#000000
AKZENT 10%
HEX
#00FF40
03. TYPOGRAPHIE
SCHRIFTSCHNITTE
HEADLINE TYPEFACE
ANTONIO
H1 - 64px
Digital Impact
H2 - 56px
Strategie & Design
H3 - 40px
Unsere Leistungen
H4 - 24px
Die visuelle Umsetzung
BODY TYPEFACE
GENERAL SANS
Body Large - 20px
Funktionales Design bedeutet nicht den Verzicht auf Ästhetik. Es bedeutet die absolute Konzentration auf das Wesentliche.
Body Default - 16px
Standardtext für lange Absätze. Visuelle Hierarchie entsteht durch Kontrast und Weißraum. Wir nutzen einen Zeilenabstand von 1.4 Em für optimale Lesbarkeit auf allen Geräten.
04. ICONS & GRAFIK-STIL
SYMBOL SYSTEM
05. MOTION PRINZIPIEN
TIMING & VERHALTEN
0.0s
INSTANT
Für UI-Feedback wie Hover-States. Keine Latenz.
0.4s
SMOOTH
Standard für Transitions und Mikro-Interaktionen.
0.8s
ELEGANT
Lange, dramatische Easing-Kurven für große Elemente.