Designsprache

Farbe &
Typografie

Die visuelle Sprache hinter jeder Marke — kuratierte Farbwelten und vier Schriftfamilien, die Haltung tragen.

Farbwelten

Ästhetik
in Farbe

Jede Palette erzählt eine Geschichte. Welche passt zu Ihrer Marke?

#1a1a1a
#f5f0eb
#c8b89a
#8b7355
#2d2420
Editorial
#fdfdfd
#f0efed
#d8d7d4
#9e9d9a
#3d3d3d
Minimal
#0d0b0a
#1a1510
#b8964a
#d4af6e
#f5ece0
Luxuriös
#2b2225
#6b5458
#a68a8e
#d4c4c6
#f0eaea
Elegant
#0f1419
#1d2939
#3b82f6
#93c5fd
#f8fafc
Modern
#f4f0e8
#ddd5c5
#a09080
#6b5d50
#3a2f28
Zeitlos
#1a2744
#2e4070
#c9a84c
#e8d5a0
#f5f0e0
Klassisch
#fcfcfc
#efefed
#d4d4d2
#8a8a88
#161616
Puristisch
#f5f5f5
#d0d0d0
#909090
#505050
#151515
Reduziert
#fdf7f4
#f0ddd5
#d4a898
#b07870
#7a4a44
Fein
#f5f0f0
#e8ddd8
#d4c4bc
#b8a099
#8a7068
Weich
#3d3525
#5e5038
#8b7355
#c4aa82
#f0e8d4
Organisch
#2a2a2a
#444444
#808080
#b8b8b8
#ececec
Strukturiert
#191612
#302c2c
#6e655d
#b0a898
#e7e6e4
Architektonisch
#1c1814
#2a2420
#8b7040
#c8a84c
#f0e8d0
Hochwertig
#ffffff
#f0f4f8
#d0e0f0
#7aaccf
#1a4a6a
Klar
#f4f2ee
#ddd8ce
#b8b0a0
#8a8078
#3a3530
Ruhig
#0a0a0a
#1a1a1a
#cc2200
#ff5533
#f5f5f5
Mutig
#000000
#111111
#888888
#dddddd
#ffffff
Kontrastreich
#fdfaf7
#ede5da
#c8b89a
#9a8070
#4a3828
Filigran
#0a0a0a
#2a2a2a
#555555
#888888
#cccccc
Monochrom
#1a1a1a
#f5f0eb
#c8b89a
#8b7355
#2d2420
Editorial
#fdfdfd
#f0efed
#d8d7d4
#9e9d9a
#3d3d3d
Minimal
#0d0b0a
#1a1510
#b8964a
#d4af6e
#f5ece0
Luxuriös
#2b2225
#6b5458
#a68a8e
#d4c4c6
#f0eaea
Elegant
#0f1419
#1d2939
#3b82f6
#93c5fd
#f8fafc
Modern
#f4f0e8
#ddd5c5
#a09080
#6b5d50
#3a2f28
Zeitlos
#1a2744
#2e4070
#c9a84c
#e8d5a0
#f5f0e0
Klassisch
#fcfcfc
#efefed
#d4d4d2
#8a8a88
#161616
Puristisch
#f5f5f5
#d0d0d0
#909090
#505050
#151515
Reduziert
#fdf7f4
#f0ddd5
#d4a898
#b07870
#7a4a44
Fein
#f5f0f0
#e8ddd8
#d4c4bc
#b8a099
#8a7068
Weich
#3d3525
#5e5038
#8b7355
#c4aa82
#f0e8d4
Organisch
#2a2a2a
#444444
#808080
#b8b8b8
#ececec
Strukturiert
#191612
#302c2c
#6e655d
#b0a898
#e7e6e4
Architektonisch
#1c1814
#2a2420
#8b7040
#c8a84c
#f0e8d0
Hochwertig
#ffffff
#f0f4f8
#d0e0f0
#7aaccf
#1a4a6a
Klar
#f4f2ee
#ddd8ce
#b8b0a0
#8a8078
#3a3530
Ruhig
#0a0a0a
#1a1a1a
#cc2200
#ff5533
#f5f5f5
Mutig
#000000
#111111
#888888
#dddddd
#ffffff
Kontrastreich
#fdfaf7
#ede5da
#c8b89a
#9a8070
#4a3828
Filigran
#0a0a0a
#2a2a2a
#555555
#888888
#cccccc
Monochrom
#2a1a0a
#5a3520
#9a6040
#d4905a
#f5d4a8
Warm
#f2f4f6
#d8dde4
#9aaab8
#4a6a80
#1a2a3a
Sachlich
#0a0808
#181414
#3a3030
#8a8088
#e8e4e8
Exklusiv
#f5f2ec
#e8e0d0
#2a2018
#8b4513
#c8702a
Magazinartig
#0a0a0a
#f5f5f0
#d4c8b0
#8a7a60
#3a2a18
Typografisch
#1a1408
#3a2a18
#6e5a3a
#b09870
#e8dcc0
Serif-betont
#1a1a2e
#16213e
#0f3460
#533483
#e94560
Geometrisch
#f5f0f5
#e0d0e4
#b8a0c0
#785890
#3a1848
Poetisch
#fdf5f0
#f0e0d4
#d4a898
#b07860
#6a3828
Feminine
#0e1014
#1c2028
#2e3a48
#5a7080
#c0ccd8
Maskulin
#050505
#1a0a1a
#4a0a6a
#a020d0
#e080ff
Avantgardistisch
#0c1828
#1a3050
#2e5888
#6894c0
#c4d8ec
Strategisch
#1a1a18
#2e2e2c
#545452
#9a9a98
#e4e4e2
Kontrolliert
#e8e4e0
#d0c8c0
#a89888
#706050
#3a2a1a
Atmosphärisch
#1c1410
#3a2c24
#7a5a3a
#c09060
#ecdcc0
Raffiniert
#f8f8f6
#e0e0de
#aaaaaa
#444444
#0a0a0a
Präzise
#f8f6f3
#ede9e2
#d4ccc0
#a09488
#5a5048
Subtil
#e8e4e0
#c8c0b8
#908880
#585048
#201c18
Skulptural
#f5f0e8
#d8c8a8
#a08858
#606838
#282e18
Natürlich
#f5f3f0
#ddd8d0
#a09890
#505048
#181610
Balanced
#2a1a0a
#5a3520
#9a6040
#d4905a
#f5d4a8
Warm
#f2f4f6
#d8dde4
#9aaab8
#4a6a80
#1a2a3a
Sachlich
#0a0808
#181414
#3a3030
#8a8088
#e8e4e8
Exklusiv
#f5f2ec
#e8e0d0
#2a2018
#8b4513
#c8702a
Magazinartig
#0a0a0a
#f5f5f0
#d4c8b0
#8a7a60
#3a2a18
Typografisch
#1a1408
#3a2a18
#6e5a3a
#b09870
#e8dcc0
Serif-betont
#1a1a2e
#16213e
#0f3460
#533483
#e94560
Geometrisch
#f5f0f5
#e0d0e4
#b8a0c0
#785890
#3a1848
Poetisch
#fdf5f0
#f0e0d4
#d4a898
#b07860
#6a3828
Feminine
#0e1014
#1c2028
#2e3a48
#5a7080
#c0ccd8
Maskulin
#050505
#1a0a1a
#4a0a6a
#a020d0
#e080ff
Avantgardistisch
#0c1828
#1a3050
#2e5888
#6894c0
#c4d8ec
Strategisch
#1a1a18
#2e2e2c
#545452
#9a9a98
#e4e4e2
Kontrolliert
#e8e4e0
#d0c8c0
#a89888
#706050
#3a2a1a
Atmosphärisch
#1c1410
#3a2c24
#7a5a3a
#c09060
#ecdcc0
Raffiniert
#f8f8f6
#e0e0de
#aaaaaa
#444444
#0a0a0a
Präzise
#f8f6f3
#ede9e2
#d4ccc0
#a09488
#5a5048
Subtil
#e8e4e0
#c8c0b8
#908880
#585048
#201c18
Skulptural
#f5f0e8
#d8c8a8
#a08858
#606838
#282e18
Natürlich
#f5f3f0
#ddd8d0
#a09890
#505048
#181610
Balanced

Jede Farbwelt ist auf Ihre Markenidentität abgestimmt — kein Template, keine Zufälligkeit.

Unsere eigene Palette: Architektonisch
Typografie · vier Schriftfamilien

Schrift
als Architektur

„Buchstaben sind die kleinsten Bausteine von Bedeutung — präzise gesetzt, tragen sie Haltung."

01Serif
StilleCormorant
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
300 · 400 · 500 · 600 Normal · ItalicÜberschriften · Editorial · Fließtext
02Script
SeeleAllura
abcdefghijklmnopqrstuvwxyz
0123456789
400 · Script KalligrafischAkzente · Dekorativ · Signatur
03Sans
KlarheitGeist
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
100 · 200 · 300 · 400 500 · 600 · 700 · 900UI · Navigation · Subheadings
04Mono
PräziseGeist Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
100–900 · Variable MonospaceLabels · Captions · Code
Cormorant — Gewichte
300Verfassung
400Lichtblick
500Aufbruch
600Wandlung
300 ItalicSehnsucht
400 ItalicStimmung
600 ItalicGeheimnis
Schriftgrad-Skala
DisplayStille.
HeadingLichtblick
SubheadAufbruch
LeadKlang der Form
BodyZwölf Boxer jagen Viktor quer über den Sylter Deich.
SmallDer Wert liegt im Detail.
CaptionMinimalistisch Design · Schrift als Architektur
Geist — Gewichte
ThinArchitektur
ExtraLightArchitektur
LightArchitektur
RegularArchitektur
MediumArchitektur
SemiBoldArchitektur
BoldArchitektur
BlackArchitektur
Laufweiten
-0.04emRAUM
0emRAUM
0.15emRAUM
0.32emRAUM
0.55emR A U M
0.8emR A U M
Ein Satz — vier Stimmen · Pangram
Cormorant · 300
Zwölf Boxer jagen Viktor quer über den großen Sylter Deich.
Cormorant · Italic 400
Zwölf Boxer jagen Viktor quer über den großen Sylter Deich.
Geist · 300
Zwölf Boxer jagen Viktor quer über den großen Sylter Deich.
Geist · 700
Zwölf Boxer jagen Viktor quer über den großen Sylter Deich.
Geist Mono · 400
Zwölf Boxer jagen Viktor quer über den großen Sylter Deich.
Allura · 400 · Script
Zwölf Boxer jagen Viktor.
das Prinzip

„Form folgt Inhalt.
Inhalt folgt Haltung."

Minimalistisch Design
Cormorant GaramondSerif · 300–600 · Italic
AlluraScript · 400
GeistSans · 100–900 · Variable
Geist MonoMono · 100–900 · Variable
Ikonografie

Symbole &
Zeichen

Handgezeichnete SVG-Symbole. Kein Icon-Framework — jedes Zeichen für exakt einen Zweck konstruiert.

NAVNavigation
ArrowDiag
Externe Links
ArrowRight
Weiter
ArrowLeft
Zurück
ChevronDown
Aufklappen
ACTAktion
Close
Schließen
Check
Bestätigt
ZoomIn
Vergrößern
ZoomOut
Verkleinern
Expand
Alles anzeigen
COMKommunikation
Mail
E-Mail
Lock
Datenschutz
Shield
Sicherheit
File
Dokument
ARCArchitektur
CornerMark
Rahmen-Ecke
Crosshair
Zielmarke
Grid
Raster
Ruler
Maßlinie
FehuMark
Markenzeichen
Prinzip
Strichstärke
1px konsistent
Stil
Offen, nicht gefüllt
Raster
12 × 12 px Basis
Bewegung

Easing &
Timing

Bewegung ist Charakter. Jede Kurve trägt eine Aussage — von explosiv bis meditativ.

01
Ausfahrend
power2.out

Schnell starten, weich landen — Standardkurve für Elemente die einblenden

Hero, Panels, Drawer
02
Ein & Aus
power2.inOut

Sanft beschleunigen und abbremsen — für Übergänge zwischen Zuständen

Page Transition, Modal
03
Explosiv
expo.out

Sehr schneller Start, fast keine Bewegung am Ende — für dramatische Effekte

Zoom, Reveal-Animationen
04
Linear
none (linear)

Konstante Geschwindigkeit — für Loops und kontinuierliche Bewegungen

Marquee, Endlos-Animationen
DURTiming-Skala
Micro
100ms
Short
200ms
Medium
350ms
Long
600ms
Slow
900ms
0ms300ms600ms900ms
Implementiert mit GSAP — GreenSock Animation Platform
Abstände & Raster

Spacing &
Grid

Abstände als architektonisches System — 4px-Basis, 12-Spalten-Raster, kein willkürliches Pixel.

SPCAbstands-Skala
Basis: 4px
1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px
24
96px
32
128px
032px64px96px128px
GRDSpalten-Raster
12 Spalten — Desktop
1
2
3
4
5
6
7
8
9
10
11
12
12
8
6
5
4
3
Gutter
16px (1rem)
Margin
24px / 64px
Breakpoints
640 / 768 / 1024 / 1280px