Auf dieser Seite
Logos
Logo Variants
Every logo is one combination of three choices: the mark (how the wordmark is composed), the frame (canvas shape & padding), and the surface (background & ink). Pick a combination below to preview and download it, or open the full gallery to scan all 84 variants. SVGs are outlined — they render without the font installed.
Mark
Frame
Surface
All 84 variants
Monogram
Stacked
Inline
Colors
Color Palette
Primary
Warm Cream
#F9F7F4
--color-cream
Default page/document background
Warm Black
#1E1C1A
--color-black
Dark sections: nav, hero, footer
Terracotta
#D4784A
--color-terracotta
Primary accent: CTAs, borders, tags
Terracotta Dark
#C2653A
--color-terracotta-hover
Hover state for terracotta
rgba(212,120,74,0.12)
--color-terracotta-tint
rgba(212,120,74,0.28)
--color-terracotta-tint-strong
Light Accent
#E8865A
--color-accent
Inline accent on dark backgrounds
Warm Light
#F5F3F0
--color-light
Primary text on dark backgrounds
Muted
#C4BEB8
--color-muted
Secondary text on dark backgrounds
Subtle
#807A74
--color-subtle
Tertiary text: descriptions, labels
Body Text
#5C5650
--color-body
Default body copy on light backgrounds
Near Black
#1A1816
--color-text
Headings, strong text on light backgrounds
#3D3A36
--color-doc-text
#E8E5E0
--color-doc-border
Secondary
Kommt (Blue)
#3B82F6
--color-blue
Tag: upcoming (kommt)
Tun (Green)
#16A34A
--color-green
Tag: action (tun)
Usage Rules
- On cream: text headings, body copy, terracotta accents
- On black: light headings, muted copy, terracotta/accent accents
- Never pure #000 or #fff
- Max 2 accent colors per asset
Typography
Typography Scale
| Role | Font | Weight | Size | Line Height | Color |
|---|---|---|---|---|---|
| Hero H1 | Space Grotesk | 700 | 54–72px | 1.08 | light (on dark) |
| Card Title / H3 | Space Grotesk | 600 | 20px | 1.3 | text |
| Document H1 | Space Grotesk | 700 | 22px | 1.25 | text |
| Document H2 | Space Grotesk | 700 | 17px | 1.3 | terracotta |
| Document H3 | Space Grotesk | 600 | 14px | 1.35 | text |
| Newsletter H2 | Manrope | 700 | 22–23px | 1.3 | text |
| Eyebrow | Manrope | 600 | 13px | — | terracotta (uppercase, 2px tracking) |
| Badge / Tag | Manrope | 600 | 11px | — | varies (uppercase, 1px tracking) |
| CTA Button | Manrope | 600 | 15–16px | — | white |
| Website Body | Inter | 400 | 15px | 1.7 | body |
| Newsletter Body | Manrope | 400–500 | 14–15px | 1.7 | body |
| Document Body | Inter | 400 | 13px | 1.75 | #3D3A36 |
| Stat Value | Space Grotesk | 700 | 28px | — | terracotta |
| Logo | Space Grotesk | 700 | 20–22px | — | text + terracotta |
Spacing
Spacing & Layout
Container Widths
| Context | Max Width | Horizontal Padding |
|---|---|---|
| Default | 1100px | 40px |
| Narrow (documents) | 620–900px | 40px |
| Tablet (≤768px) | fluid | 24px |
| Mobile (≤480px) | fluid | 16px |
Border Radius
| Element | Radius |
|---|---|
| Cards, wrappers | 12px |
| Buttons | 8px (web), 6px (email) |
| Badges / tags | 4px |
| Code blocks | 6px |