Spiegel Design System Deep Dive

1. Brand Overview

Spiegel.de is the digital home of Der Spiegel, one of Germany’s most established news brands. The vibe is unapologetically editorial — hard news up front, opinionated layouts, and visual cues that scream “serious journalism” rather than lifestyle gloss. The design philosophy here is rooted in clarity, hierarchy, and authority: you’re meant to trust what you read, and the UI reinforces that trust by staying disciplined.

It’s also a brand that knows it’s old — in a good way. The serif-heavy headings give the site an almost print-like gravitas, while the sans-serif UI text keeps navigation and interactive elements feeling modern. There’s no attempt to chase flashy trends; Spiegel’s front end is workmanlike, not ornamental.

The audience? People who read long-form investigative reporting and want quick access to breaking news. The site is for someone who is willing to scroll through dozens of headlines and expects the typography to signal importance without ambiguity. You’ll see heavy use of bold weights for headlines, tightly controlled line heights, and a restrained color palette built around the brand’s iconic red.

Tailwind CSS powers the utility classes under the hood, but you’d barely notice — the implementation is strict, with few arbitrary flourishes. The breakpoints are tuned for content-first layouts, and the grid feels like it’s designed to adapt the newspaper column model to screens.

In short: Spiegel’s design system is a digital translation of print-era discipline. It’s not here to surprise you; it’s here to deliver information with minimal cognitive friction. The brand’s DNA — serious, credible, German — is baked into every color swatch and line-height choice.

2. Color System

2.1 Primary Colors

The main brand color is rgb(235, 14, 48) — normalized as #eb0e30. This is a deep, saturated red, bordering on crimson. It’s aggressive, in the way a stop sign is aggressive. Perfect for a news brand that wants its CTAs and masthead to stand out instantly.

Red in this hue carries urgency and authority. It’s not a playful cherry red; it’s a command red. Compared to competitors like Süddeutsche Zeitung (more muted tones) or The Guardian (blue), Spiegel’s red is confrontational. It says: “Pay attention.”

The palette also includes a secondary red (#e64415), which is warmer and more orange — this functions as an accent for buttons and highlights.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally good: primary red on white passes WCAG AA for large text, though smaller text might need bold weight to maintain readability. Dark gray (#5c5a58) on light gray backgrounds is borderline — fine for body text, but not great for small captions. Section colors are strong enough to stand alone; the dark tones are deep, the light tones are pastel.

Dark mode isn’t explicit here, but the dark: utility classes in Tailwind show a readiness for inversion — deep tones become backgrounds, light tones become text.

2.4 Usage Guide

• Primary Red (#eb0e30) — Use sparingly. Masthead, major CTAs. Avoid using it for long text blocks; it tires the eye.
• Accent Red-Orange (#e64415) — Buttons, link accents. Works well with white text.
• Neutrals — Light gray backgrounds with dark gray text keep the reading experience calm.
• Section Colors — Each thematic section gets its own palette. Keep them isolated to avoid a rainbow effect.
• Avoid pairing primary red with accent red-orange; they clash. Use one per element.
• White and dark section colors are safe high-contrast pairs.

3. Typography

3.1 Font Families

Spiegel uses custom fonts: SpiegelSlabCdUI, SpiegelSerifUI, SpiegelSansUI, SpiegelSans, and SpiegelSerifDisplayUI. Fallbacks are sensible: Constantia, Georgia for serif stacks; system-ui, Segoe UI, Roboto for sans stacks.

No Google or Adobe Fonts — these are proprietary.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is clear: slab serifs for big headlines, sans for UI and smaller headings. Bold weights (700–800) dominate headlines, while body/caption text drops to 400 weight. Line heights are tight for headlines (1.08–1.26), looser for body (1.38–1.50). This keeps the news feel — compressed headlines, readable body.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints: 300px, 520px, 719px, 720px, 1011px, 1012px, 1019px, 1020px. This is a tight cluster around tablet and desktop cutoffs, suggesting fine-tuned responsive shifts for headline wrapping and grid changes.

5. Visual Elements

Border Radius

Values:

• 0px 0px 1.5px 1.5px — subtle rounding on bottom corners of images/cards.
• 1.5px — micro-rounding, used on inputs, divs.
• 1.5px 1.5px 0px 0px — top-only rounding (headlines).
• 8px — standard card rounding.
• 8px 8px 0px 0px — top-only rounding for images.
• 24px — pill buttons.
• 50% — full circle (avatars, icons).

Shadows

Minimal:

• Subtle: rgba(0,0,0,0.1) 0px 1px 4px
• Accent inset: rgb(230,68,21) 0px 0px 0px 2px inset
• One rare deeper: rgba(0,0,0,0.3) 0px 0px 4px

Mostly flat design — depth comes from borders.

Borders

Predominantly 1px solid in neutral tones (#989694, #dddbd9). Dividers use bottom borders.

6. Components

6.1 Buttons

Variant 1 — Circular icon button:

• Default: bg white, text black, 50% radius, 1px border #989694
• Hover: bg #be0f32
• Focus: bg #78061d

Variant 2 — Primary action:

• Default: bg #e64415, text white, 1.5px radius
• Hover: bg #be0f32
• Focus: bg #78061d

Variant 3 — Dark pill:

• Default: bg #1A3A4A, text white, 24px radius, padding 8px 16px 8px 12px
• Hover/Focus: same red states

Variant 4 — Outline pill:

• Default: transparent bg, text #1A3A4A, 1px border #1A3A4A, 24px radius
• Hover/Focus: red states

6.2 Links

Variants:

• Dark brown (#811D00), bold
• White, regular
• Accent red-orange (#e64415), bold
• Black, regular
• Light gray (#f1efed), regular
• Mid gray (#bbb9b7), regular

No underline by default.

6.3 Forms

No detailed input styles in data — likely minimal, 1px border, small radius.

6.4 Cards

Padding tends to be 24px, rounded corners at 8px, subtle shadow or border.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #eb0e30;
  --color-accent: #e64415;
  --color-bg-light: #dddbd9;
  --color-text-dark: #5c5a58;
  --color-white: #ffffff;
  --color-text-mid: #bbb9b7;
  --ml-geldanlage-color-dark: #163683;
  --ml-work-color-dark: #1A3A4A;
  --ml-weekend-color-light: #F2F1EC;
  --ml-genuss-color-light: #FFEFED;
  --ml-health-color-dark: #004746;
  --ml-loveletter-color-dark: #811D00;
  --ml-genuss-color-dark: #112A29;
  --ml-fitness-color-light: #CAFBD9;
  --ml-elf-color-dark: #000000;
  --ml-weekend-color-dark: #1B3333;
  --ml-geldanlage-color-light: #DDE7FE;
  --ml-fitness-color-dark: #264C32;
  --ml-work-color-light: #C2E2F2;
  --ml-elf-color-light: #FFF3E2;
  --ml-money-color-light: #E7E3FF;
  --ml-loveletter-color-light: #FFE5DE;
  --ml-money-color-dark: #4F2A5F;
  --ml-health-color-light: #CEFFF9;
  --ml-leadership-weekly-color-dark: #48288D;
  --ml-leadership-weekly-color-light: #F1EBFF;

  /* Typography */
  --font-spiegel-slab-cd-ui: "SpiegelSlabCdUI", Constantia, Georgia;
  --font-spiegel-serif-ui: "SpiegelSerifUI", Constantia, Georgia;
  --font-spiegel-sans-ui: "SpiegelSansUI", system-ui, Segoe UI, Roboto;
  --font-spiegel-sans: "SpiegelSans";
  --font-spiegel-serif-display-ui: "SpiegelSerifDisplayUI", Constantia, Georgia;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* Radius */
  --radius-xs: 1.5px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.1) 0px 1px 4px;
  --shadow-inset-accent: rgb(230,68,21) 0px 0px 0px 2px inset;
}

8. AI Coding Assistant Prompt

# Spiegel Design System Specification

System Prompt:
You are a Spiegel design expert. Build UIs matching their visual language exactly.

Brand Context:
Spiegel’s design is editorial, disciplined, and authoritative. It uses a restrained palette, tight typography, and minimal ornamentation. The layouts are content-first, echoing the structure of print journalism.

Color Palette:
- Primary Red: #eb0e30 — Masthead, key CTAs
- Accent Red-Orange: #e64415 — Buttons, highlights
- Light Gray: #dddbd9 — Backgrounds
- Dark Gray: #5c5a58 — Body text
- White: #ffffff — Base surfaces
- Mid Gray: #bbb9b7 — Secondary text
- Dark Blue: #163683 — Geldanlage dark section
- Deep Teal: #1A3A4A — Work dark section
- Light Beige: #F2F1EC — Weekend light section
- Pale Pink: #FFEFED — Genuss light section
- Dark Green: #004746 — Health dark section
- Dark Brown: #811D00 — Loveletter dark section
- Deep Green: #112A29 — Genuss dark section
- Mint Green: #CAFBD9 — Fitness light section
- Black: #000000 — Text, Elf dark section
- Deep Teal-Green: #1B3333 — Weekend dark section
- Pale Blue: #DDE7FE — Geldanlage light section
- Forest Green: #264C32 — Fitness dark section
- Sky Blue: #C2E2F2 — Work light section
- Cream: #FFF3E2 — Elf light section
- Lavender: #E7E3FF — Money light section
- Peach: #FFE5DE — Loveletter light section
- Purple: #4F2A5F — Money dark section
- Aqua: #CEFFF9 — Health light section
- Violet: #48288D — Leadership Weekly dark section
- Pale Lavender: #F1EBFF — Leadership Weekly light section

Typography:
Fonts:
- SpiegelSlabCdUI — headlines
- SpiegelSerifUI — secondary headlines
- SpiegelSansUI — UI, headings
- SpiegelSans — links, body
- SpiegelSerifDisplayUI — decorative headings

Sizes:
| Level | Font | Size | Weight | Line Height | Use |
| H1 | SpiegelSlabCdUI | 36px | 800 | 1.08 | Main headlines |
| H1 | SpiegelSerifUI | 32px | 700 | 1.26 | Secondary headlines |
| H1 | SpiegelSansUI | 32px | 700 | 1.08 | UI headlines |
... (include full table from above)

Spacing & Grid:
Base: 8px. Scale: 1px, 2px, 4px, 6px, 8px, 12px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 64px.
Use multiples for padding, margins, grid gaps.

Border Radius:
- micro: 1.5px — inputs, small buttons
- sm: 8px — cards
- lg: 24px — pills
- full: 50% — avatars, circular icons

Shadows:
- subtle: rgba(0,0,0,0.1) 0px 1px 4px
- inset accent: rgb(230,68,21) 0px 0px 0px 2px inset
Flat design preferred — borders over shadows.

Component Specifications:
Primary Button:
Default: bg #e64415, color #ffffff, padding 0 8px, radius 1.5px
Hover: bg #be0f32
Focus: bg #78061d

Secondary Button (Outline):
Default: bg transparent, color #1A3A4A, border 1px solid #1A3A4A, radius 24px
Hover/Focus: bg #be0f32

Icon Button:
Default: bg #ffffff, color #000000, border 1px solid #989694, radius 50%
Hover: bg #be0f32
Focus: bg #78061d

Layout & Responsive Rules:
Breakpoints: 300px, 520px, 719px, 720px, 1011px, 1012px, 1019px, 1020px.
Content-first — adjust typography and grid at each breakpoint.

Interaction Rules:
150ms ease for color changes
No complex animations
Focus states must be visible

DO List:
- Use only palette colors
- Maintain 8px grid
- Use SpiegelSlabCdUI for main headlines
- Keep line height tight for headlines
- Use bold weights for headlines

DON'T List:
- Don't add drop shadows to text
- Don't mix serif and sans in same headline
- Don't use primary red for body text
- Don't round corners inconsistently

Code Examples:
```css
.btn-primary {
  background: #e64415;
  color: #ffffff;
  padding: 0 8px;
  border-radius: 1.5px;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #be0f32; }
.btn-primary:focus { background: #78061d; }

.btn-outline {
  background: transparent;
  color: #1A3A4A;
  border: 1px solid #1A3A4A;
  border-radius: 24px;
  padding: 6px;
}
.btn-outline:hover { background: #be0f32; }

.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-subtle);
}
```

9. Summary

TL;DR — Spiegel’s design system is tight, editorial, and authoritative. Red drives attention, serif headlines carry gravitas, and the 8px grid keeps the UI orderly.

Brand Keywords:

• print-disciplined
• urgent-minimalist
• german-editorial
• content-first
• authority-driven