onlinewachsen.de
Wachstum ist kein Zufall
Wir verbinden Design, Technologie und Strategie zu digitalen Erlebnissen, die Marken nach vorne bringen.
Logo
OW Logo App Icon
OW Logo Icon
OW Logo Icon White Transparent
OW Logo Text White Transparent
OW Logo Text Black Transparent
OW Logo Full whitemode Transparent
OW Logo Full darkmode Transparent
Farben
Hauptpalette
Die Kernfarben der Marke. Eine Hero-Farbe als Anker, dazu die Stützfarben für Text, Hintergründe und Borders.
Aa
Aa
Background
#F8F8F8
Aa
Container
#00000005
Aa
Border
#00000012
Aa
Überschrift
#000000
Aa
Text
#1C1C1C
Secondary Palette
Aa
Red
#F73B3B
Aa
Green
#08FD65
Aa
Orange
#FF6B03
Aa
Purple
#C800FF
Aa
Light Blue
#94C2FF
Aa
Yellow
#FFAE14
Darkmode-Palette
Farben für das Dark-Theme. Diese werden im Preview & Editor angewendet, wenn das Theme aktiv ist.
Aa
Background
#0A0A0A
Aa
Container
#FFFFFF05
Aa
Border
#FFFFFF12
Aa
Überschrift
#F5F5F5
Aa
Text
#F5F5F5
Typografie
Schrift-Bibliothek
Typografie-Skala
H1
Aa
SchriftPlus Jakarta Sans
Size64 px
Weight500 Medium
Line1.1
Tracking-0.05em
H2
Aa
SchriftPlus Jakarta Sans
Size48 px
Weight600 Semibold
Line1.15
Tracking-0.04em
H3
Aa
SchriftPlus Jakarta Sans
Size32 px
Weight600 Semibold
Line1.2
Tracking-0.03em
H4
Aa
SchriftPlus Jakarta Sans
Size24 px
Weight500 Medium
Line1.3
Tracking-0.02em
H5
Aa
SchriftPlus Jakarta Sans
Size17 px
Weight500 Medium
Line1.4
Tracking-0.015em
H6
Aa
SchriftPlus Jakarta Sans
Size16 px
Weight500 Medium
Line1.4
Tracking-0.01em
Paragraph
Aa
SchriftPlus Jakarta Sans
Size14 px
Weight400 Regular
Line1.6
Tracking-0.01em
Spacing
xs
4px
sm
8px
md
16px
lg
24px
xl
40px
2xl
64px
3xl
96px
Buttons
Primary
Hintergrund#007CFF
Text#FFFFFF
Border0 px · #007BFF
Radius5 px
Padding12 · 24 px
SchriftDefault · Regular
Size14 px
Secondary
Hintergrund#FFFFFF
Text#0A0A0A
Border1 px · #EBEBEB
Radius5 px
Padding12 · 24 px
SchriftDefault · Regular
Size14 px
Outline darkmode
Hintergrund#FFFFFF00
Text#FFFFFF
Border1 px · #FFFFFF
Radius5 px
Padding12 · 24 px
SchriftDefault · Regular
Size14 px
Outline whitemode
Hintergrund#00000000
Text#000000
Border1 px · #000000
Radius5 px
Padding12 · 24 px
SchriftDefault · Regular
Size14 px
Icons
Spezifikation
| Stil | Line |
|---|---|
| Form | Eckig |
| Strichstärke | 2 px |
| Größe | 24 px |
Beispiel-Icons
Menü-Icon · 2 Linien
Komponenten
Card
Card-Titel
Eine kurze Beschreibung, die in der Card platziert wird. Hier kann beliebiger Inhalt stehen.
Form-Feld
name@beispiel.de
Badges
Neu
Beta
Default
Tags
Design
Branding
UI
Bildsprache
Beispiel-Bilder
Voice und Tone
Du
Ansprache
Direkte, persönliche Ansprache. Augenhöhe statt Distanz.
So klingt die Marke
So klingt die Marke nie
“onlinewachsen.de verbindet Design, Entwicklung und Strategie zu digitalen Lösungen, die nicht nur gut aussehen, sondern messbar weiterbringen.