_Brand Design System
Brand Design System
A comprehensive overview of our visual identity, brand colours, and typography standards.
Colors
Background Colors
Aubergine
#311123
Ivory
#f9f5f0
Beige
#ccc1b4
Rose
#fdd2cc
Orange
#FF6047
Mint
#d0f5da
Blue
#0827a0
Colors
Text
…
Focus (Hover Links)
…
Focus Visible (Accessibility)
…
Primary Shades
Primary
…
Primary 900
…
Primary 800
…
Primary 700
…
Primary 600
…
Primary 500
…
Primary 400
…
Primary 300
…
Primary 200
…
Primary 100
…
Neutrals
Black
…
Grey Dark
…
Grey Darker
…
Grey
…
Grey Lighter
…
Grey Light
…
White
…
Notifications
Text Error
…
Background Error
…
Text Warning
…
Background Warning
…
Text Success
…
Background Success
…
Text Notice
…
Background Notice
…
Typography
Display Sizes
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Headline Sizes
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Title Sizes
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Body Sizes
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Label Sizes
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Font Styles
Headlines
h1
The quick brown fox jumps over the lazy dog.
h2
The quick brown fox jumps over the lazy dog.
h3
The quick brown fox jumps over the lazy dog.
h4
The quick brown fox jumps over the lazy dog.
h5
The quick brown fox jumps over the lazy dog.
h6
The quick brown fox jumps over the lazy dog.
Paragraphs and Lists
Quiet hills gather beneath an italic silver morning while gentle breezes carry whispers strongly through open fields. Soft echoes drift between distant trees, inviting curious thoughts to wander without purpose. Every sentence flows naturally into the next, filling the page with balanced texture while revealing nothing of linked importance beyond its calm, steady cadence.
And here is an unordered list:
- Quiet hills gather beneath a silver morning while gentle breezes carry whispers through open fields.
- Soft echoes drift between distant trees, inviting curious thoughts to wander without purpose.
- Every sentence flows naturally into the next, filling the page with balanced texture while revealing nothing of importance beyond its calm, steady cadence.
And here is an ordered list:
- Quiet hills gather beneath a silver morning while gentle breezes carry whispers through open fields.
- Soft echoes drift between distant trees, inviting curious thoughts to wander without purpose.
- Every sentence flows naturally into the next, filling the page with balanced texture while revealing nothing of importance beyond its calm, steady cadence.
Form Styles
Contact Form Test
„*“ zeigt erforderliche Felder an
Other Variables
Layout
| Variable | ||
|---|---|---|
| Maximum Container Width | … | … |
| Maximum Container Width Narrow | … | … |
| Container Padding X | … | … |
| Container Padding Y | … | … |
Grid (for Gutters and Margins)
| Variable | ||
|---|---|---|
| Grid XL | … | … |
| Grid L | … | … |
| Grid M | … | … |
| Grid S | … | … |
| Grid XS | … | … |
Borders
| Variable | ||
|---|---|---|
| Border Radius L | … | … |
| Border Radius M | … | … |
| Border Radius XS | … | … |
| Main Border Radius | … | … |
| Main Border Width | … | … |
More
| Variable | ||
|---|---|---|
| Text Margin Bottom | … | … |
| Headline Margin Bottom | … | … |
| Padding Input Field X | … | … |
| Padding Input Field Y | … | … |
| Box Shadow | … | … |