Design System

savvean Brand Guidelines

Extrahierte Design-Tokens und Komponenten von savvean.com als Grundlage für savvean.ai und alle zukünftigen digitalen Produkte.

01
Farbpalette
Primärfarbe / Akzent
Primary Red
#E94D4F
rgb(233, 77, 79)
Primary Hover
#D43D3F
Primary Light
rgba(233,77,79,0.15)
Dunkle Hintergründe
Dark Primary
#0E0F11
rgb(14, 15, 17)
Dark Secondary
#18191D
rgb(24, 25, 29)
Dark Accent
#3B3C3C
rgb(59, 60, 60)
Helle Hintergründe
White
#FFFFFF
Off-White 1
#F9F9F9
Off-White 2
#F2F3F5
Textfarben
Aa
White (auf Dunkel)
#FFFFFF
Aa
White 70%
rgba(255,255,255,0.7)
Aa
Dark (auf Hell)
#222222
Aa
Dark Secondary
#333333
02
Typografie
Heading Font
Gilroy Bold

Eingesetzt für H1, H2, H4 Überschriften. Klare, markante Darstellung mit negativem Letter-Spacing.

Body Font
Instrument Sans

Eingesetzt für Fließtext, Labels, Navigation und UI-Elemente. Google Font, frei verfügbar.

Heading 1 / H2
FontGilroy Bold
Size46px
Line Height53px
Letter Spacing-0.69px
Weight400 (inherent bold)
Heading 4 / Card Title
FontGilroy Bold
Size24px
Line Height32px
Letter Spacing-0.36px
Body Text / Fließtext: Instrument Sans in 17px. Eingesetzt für Beschreibungen, Absätze und allgemeine Textinhalte auf der Website. Gute Lesbarkeit durch angemessene Zeilenhöhe.
FontInstrument Sans
Size17px
Weight400
Line Height1.6
Overline / Label Text
FontInstrument Sans
Size13px
Weight600
TransformUppercase, 2px spacing
Navigation / UI Label (16px, Medium)
FontInstrument Sans
Size16px
Weight500
Letter Spacing0.24px
03
Buttons
Primary Button
Small Lerne uns kennen Large Button
Background#E94D4F
Text#FFFFFF
Border Radius60px (Pill)
Border1px solid #E94D4F
FontInstrument Sans, 15px, 500
Ghost / Outline Button
Small Termin buchen Large Ghost
Backgroundtransparent
Text#FFFFFF
Border1px solid rgba(255,255,255,0.3)
Border Radius60px (Pill)
Secondary Button (heller Hintergrund)
Primär auf Hell Ablehnen Ghost auf Hell
04
Logo & Markenzeichen
Wortmarke (auf Dunkel)
savvean Logo

savvean_logo.svg (300 x 32px)

Bildmarke / Icon
savvean Bildmarke

savvean_logo_bildmarke.svg (150 x 150px)

Dekoratives Element: S-Kurven

Geschwungene S-Kurven in Grautönen als dekoratives Hintergrundelement im Hero-Bereich.

05
Navigation
Header Navigation
savvean
Termin buchen
Hintergrund#0E0F11
PositionSticky on scroll
Linksrgba(255,255,255,0.7), Active: #FFF underline
CTAGhost Button rechts
06
Layout-Muster
Dark Section (Standard)

Wer wir sind

savvean

Beratung, Coaching, Mentoring
für digitale Produkte und Transformation

Lerne uns kennen
Light Section

Was wir tun

Unser Angebot

Als Service-Agentur haben wir uns spezialisiert auf Beratung und Coaching.

Angebotsbereich (3-Spalten Cards)
01

Consulting

Digitale Produktentwicklung und Transformation.

02

Produkt Coaching

Coaching auf allen Ebenen der Produktentwicklung.

03

Mentoring

1:1 Mentoring zur persönlichen Weiterentwicklung.

07
CSS Custom Properties (Token-Referenz)
TokenWertVerwendung
--color-primary#E94D4FCTAs, Links, Akzente
--color-dark-bg#0E0F11Haupthintergrund
--color-dark-bg-2#18191DCards, sekundärer Hintergrund
--color-dark-accent#3B3C3CSubtle UI-Elemente
--color-offwhite-1#F9F9F9Helle Sektionen
--color-offwhite-2#F2F3F5Helle Sektionen (Variante)
--color-text-white-70rgba(255,255,255,0.7)Sekundärtext auf Dunkel
--font-headingGilroy BoldÜberschriften H1-H4
--font-bodyInstrument SansFließtext, UI, Navigation
--radius-pill60pxButtons
--radius-md12pxCards, Container
08
Assets & Quellen
AssetURL / PfadFormat
Logo (Wortmarke)savvean_logo.svgSVG, 300x32
Logo (Bildmarke)savvean_logo_bildmarke.svgSVG, 150x150
Font: Gilroy BoldCustom (self-hosted)WOFF2
Font: Gilroy SemiboldCustom (self-hosted)WOFF2
Font: Instrument SansGoogle FontsVariable
CMS / FrameworkWordPress + Avada Theme + LayerSlider-
savvean Design System — Extrahiert am 13. April 2026 von savvean.com
Grundlage für savvean.ai und zukünftige digitale Produkte