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
Status
The single semantic scale for system states — deliberately desaturated so they sit beside terracotta. Consumed by status callouts (.callout--info/--success/--warning/--error) and .list--ok.
Info
#3E6FB0
--color-info
Neutral system notices (callout--info)
Success
#2F8A5C
--color-success
Positive states (callout--success, list--ok)
Warning
#B5822C
--color-warning
Caution states (callout--warning)
Error
#BB4A37
--color-error
Failure states (callout--error)
Gradients
Soft terracotta radial glows for dark surfaces — built from the existing terracotta at low opacity, so they add depth without introducing a new colour. Used on the centred hero backdrop (.hero--glow) and inside the .video-frame. The bloom is intentionally subtle; each field below is a full square so it reads.
Glow · Top
--gradient-glow-top
Centred-hero backdrop — bloom from top-centre
Glow · Center
--gradient-glow-center
Media/video well — bloom behind the play button
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 |