Brand Design System
Brand Design System
A comprehensive overview of our visual identity, brand colours, and typography standards.
Colors
Background Colors
Black #000
Grey Light #f1f0f0
Teal #363f50
Teal Light #4a6478
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
Kontakt Extended
„*“ 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 | … | … |