Welt Design System Deep Dive

1. Brand Overview

Welt is one of Germany’s leading news brands, and its design system projects a mix of authority, clarity, and an editorial edge. The site feels like it’s built for daily, habitual use — for people reading articles, checking live TV schedules, and navigating dense content without friction. The design choices here are deliberate, but not ornamental. Nothing feels superfluous; everything seems in service of the content.

The vibe is journalistic: muted color palette punctuated by a deep teal (#064b71) that’s instantly identifiable as the “brand” shade. They’re not trying to dazzle you with flashy gradients or over-styled buttons. Instead, they stick to solids, straightforward typography, strict spacing discipline, and consistent interaction states.

Welt’s visual language puts typography in the driver’s seat. The dominant use of FF Mark — a strong, geometric sans — gives headlines a solid, confident presence. Serif accents via Freight add just enough editorial flavour without tipping into “old newspaper” territory. Lots of uppercase. Lots of bold weights. It reads as serious, modern, and slightly formal.

Padding and spacing are structured on an 8px base grid. You can tell there’s underlying design token discipline — the repeated use of specific pixel values, not random numbers. Same story with border radius: you’ll never find a rogue 6px; it’s all tokenised.

The interactive elements (buttons, links) are minimal. The primary navigation button uses brand teal with uppercase, bold text and no padding overrides. Hover states dim the background opacity to 0.7 and swap the background to pure black — high drama compared to the otherwise quiet interface. They want you to notice when something is interactive.

Overall: Welt’s design system is for content-heavy, precision-driven environments. It strikes a balance between legibility for long-form reading and the visual authority you expect from a major news outlet. Functional first. Brand second. And that works.

2. Color System

2.1 Primary Colors

The semantic primary color is pure white (#ffffff). That’s unusual. Most brands set a distinct hue as primary; Welt treats white as the canvas and uses the secondary — deep teal (#064b71) — for brand emphasis. White as a primary reinforces the editorial minimalism: it keeps pages clean and allows text and images to dominate.

The secondary teal is saturated and cool. Psychologically, it signals trust, calm, and authority — fitting for a news brand. Compare this to CNN’s red or the Guardian’s deep blue, and you see Welt’s teal positioning it as modern and less sensational.

2.2 Complete Palette

CSS variables add more specifics:

• --header-center--bg-color: #064b71 — Core brand banner/nav bg
• --page--outline-color: #fe347e — Outline color (interesting — bright magenta, likely functional highlight)
• Functional greys like #383e42, #1c1f2c for multimedia and EPG backgrounds.

2.3 Color Relationships

Strong dark-light contrast. Black/grey shades against white pass WCAG AA easily for normal text. The orange accent (#f18825) pops against dark backgrounds but risks contrast issues on light — need dark text or border support.

The teal (#064b71) on white is fine; teal on black is strong. Magenta (#fe347e) is used sparingly — likely for outlines or functional focus states; it’s high contrast against any dark tone.

No obvious dark mode variant in extracted data, but they have enough deep greys and dark backgrounds to create “dark sections” inline.

2.4 Usage Guide

Works:

• White background + black-ish text (#090909) — clean, legible
• Teal (#064b71) for navigation and key actions on light backgrounds
• Orange (#f18825) with bold font for CTAs, links in editorial sections
• Magenta outline (#fe347e) for focus states

Avoid:

• Orange on white for body text — fails contrast
• Teal on dark navy (#003a5a) — too low contrast
• Using magenta as body text color — it’s too hot

3. Typography

3.1 Font Families

Primary: FF Mark (ffmark, fallback ffmark-fallback) — geometric sans serif, heavy use for headings and UI text.
Secondary: Freight (freight, fallback freight-fallback) — serif, used in selective link contexts.
Fallbacks like Helvetica Neue, Helvetica, Arial in smaller elements and captions. No Google Fonts; no Adobe Fonts — these are custom/self-hosted.

3.2 Type Scale

3.3 Hierarchy

Super-bold uppercase headlines. Line heights often under 1.2 — makes blocks tight, compact. Body copy hits the 16px standard, with sans serif default. Small caps and ultra-light weights in captions are rare — most small text is still bold, keeping the tone confident.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Values are mostly in multiples of 1–4px, showing micro-adjustments for typographic rhythm.

Frequent values (top counts):

• 13px (343 uses) — oddly common, maybe a default margin in text blocks
• 10px (169 uses) — padding in buttons, inputs
• 15px (117 uses) — moderate gaps
• 20px (95 uses) — section component padding

The rest fill in between: 1px, 2px, 3px, 4px, 5px, 8px, etc.

4.2 Layout

Breakpoints: 350px up to 1600px with fine granularity — they target lots of specific device widths. This is not “mobile/tablet/desktop” crude breakpoints; instead, they fine-tune for various popular devices (375px, 414px, 768px, 1136px, etc.). Vuetify detected — they leverage its Flex/Grid system.

5. Visual Elements

Border Radius

Values:

• 0 — used in listboxes, minimalist buttons
• 1px — subtle rounding on SVGs
• 2px, 2.5px — small rounding, divs/spans
• 3px — badges, buttons
• 8px — larger badges
• 50% — circles for avatars, icons

Strict set — no random numbers beyond these.

Shadows

Two shadows:

• rgba(0,0,0,0.5) 0px 2px 14px — heavy drop for modals/overlays
• rgba(0,0,0,0.25) 0px 4px 4px — lighter, rare.

This is not a “flat” aesthetic — shadows exist but are restrained.

Borders

Complex combinations:

• 3px solid underline in navy (#003a5a) for links → visual emphasis
• 1px solid grey (#dfdfdf) for dividers
• Orange (#f18825) borders for emphasis states

6. Components

6.1 Buttons

Primary Navigation Button (.c-navigation__secondary.c-navigation__button):

• Default: bg #064b71, text white, no padding, no radius, bold (800), 12px font size.
• Hover: bg #000000, opacity 0.7, text changes via var.
• Active: outline none.
• Focus: box-shadow none, outline none.

Opinion: Zero border radius keeps them aligned with nav bars. The hover-to-black is dramatic — clear intent to give feedback.

6.2 Links

Five link styles:

• Black (#090909) — default body links
• White (#ffffff) — for dark backgrounds
• Orange (#f18825) — accent links in highlighted copy
• Dark grey (#1d1d1d) — heavy-weight UI labels
• Navy (#003a5a) — strong emphasis links.

No underlines; hover changes color via a CSS var.

6.3 Forms

Text input (button-type in data):

• Transparent bg, black text, no border, 10px padding.
• On focus: no outline, no shadow.

Minimal styling — likely relying on container context.

6.4 Cards

No explicit card data, but borders in greys and subtle shadows suggest they rely on neutral surfaces (#f2f2f2, #dfdfdf) + rounded corners if needed (2–8px depending on context).

7. Design Tokens

/* Colors */
--color-primary: #ffffff;
--color-secondary: #064b71;
--color-blackish: #090909;
--color-deep-navy: #003a5a;
--color-dark-grey: #1d1d1d;
--color-mid-grey: #333333;
--color-absolute-black: #000000;
--color-orange-accent: #f18825;
--color-grey-neutral: #808080;
--color-light-grey: #f2f2f2;
--color-medium-grey: #9c9c9c;
--color-light-neutral: #dfdfdf;
--color-header-bg: #064b71;
--color-outline-magenta: #fe347e;
--color-bg-multimedia: #383e42;
--color-bg-epg-hover: #1c1f2c;

/* Typography */
--font-primary: "ffmark", ffmark-fallback;
--font-secondary: "freight", freight-fallback;
--font-fallback-sans: "Helvetica Neue", Helvetica, Arial;
--font-fallback-serif: Arial;
--font-size-xxl: 24px;
--font-size-xl: 22px;
--font-size-lg: 20px;
--font-size-md: 16px;
--font-size-sm: 14px;
--font-size-xs: 13px;
--font-size-xxs: 12px;
--font-size-xxxs: 11px;
--font-size-xxxxs: 10px;
--font-size-micro: 8px;

/* Spacing */
--space-1: 1px;
--space-2: 2px;
--space-3: 3px;
--space-4: 4px;
--space-5: 5px;
--space-55: 5.5px;
--space-6: 6px;
--space-7: 7px;
--space-75: 7.5px;
--space-8: 8px;
--space-9: 9px;
--space-10: 10px;
--space-11: 11px;
--space-13: 13px;
--space-14: 14px;
--space-15: 15px;
--space-20: 20px;
--space-26: 26px;
--space-29: 29px;
--space-30: 30px;

/* Radius */
--radius-none: 0;
--radius-xs: 1px;
--radius-sm: 2px;
--radius-sm2: 2.5px;
--radius-md: 3px;
--radius-lg: 8px;
--radius-full: 50%;

/* Shadows */
--shadow-lg: rgba(0,0,0,0.5) 0px 2px 14px;
--shadow-sm: rgba(0,0,0,0.25) 0px 4px 4px;

8. AI Coding Assistant Prompt

# Welt Design System Specification

You are a Welt design expert. Build UIs matching their visual language exactly.

## Brand Context
Welt is a German news brand. Their design prioritises clarity, typographic authority, and restrained color use. They use strong sans-serif headings, minimal border radius, and an 8px grid.

## Color Palette
- Primary White: #ffffff — page backgrounds
- Secondary Teal: #064b71 — navigation bg, primary buttons
- Black-ish: #090909 — body text
- Deep Navy: #003a5a — link underlines, header tools
- Dark Grey: #1d1d1d — containers, UI bg
- Mid Grey: #333333 — secondary text
- Absolute Black: #000000 — hover bg for buttons
- Orange Accent: #f18825 — CTA links
- Grey Neutral: #808080 — disabled icons
- Light Grey: #f2f2f2 — section bg
- Medium Grey: #9c9c9c — secondary labels
- Light Neutral: #dfdfdf — dividers
- Outline Magenta: #fe347e — focus outlines

## Typography
- Headings: "ffmark", ffmark-fallback
- Secondary Serif: "freight", freight-fallback
- Fallback Sans: "Helvetica Neue", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 24px | 800 | 0.92–1.17 | Page titles |
| H2 | 22px | 800 | 1.18–1.27 | Section headings |
| Link Lg | 20px | 800 | 1.30 | Large nav links |
| Body | 16px | 400–800 | 1.40 | Article body |
| SM Link | 14px | 400–800 | 1.43 | Secondary links |
| Caption | 12px | 200–800 | 1.25–2.33 | Metadata |

## Spacing & Grid
Base: 8px  
Scale: 1px, 2px, 3px, 4px, 5px, 8px, 10px, 13px, 15px, 20px, 26px, 29px, 30px

## Border Radius
- None: 0 — nav buttons
- XS: 1px — SVG icons
- SM: 2px — spans
- SM2: 2.5px — divs
- MD: 3px — badges/buttons
- LG: 8px — badges
- Full: 50% — avatars

## Shadows & Depth
- Large: rgba(0,0,0,0.5) 0px 2px 14px — overlays
- Small: rgba(0,0,0,0.25) 0px 4px 4px — rare UI depth

## Component Specifications

### Primary Button
Default:  
```css
background-color: #064b71;
color: #ffffff;
padding: 0;
border-radius: 0;
font-weight: 800;
font-size: 12px;
border: none;
box-shadow: none;
outline: none;
text-transform: uppercase;

Hover: bg #000000 with 0.7 opacity
Focus: no outline
Active: no outline

Link (Black variant)

Default: color #090909; text-decoration none
Hover: color var(--highlight-stage--cta-background-border-color)

Input Field

Transparent bg, black text, 10px padding, no border; focus with no outline.

Layout & Responsive Rules

• Fine-grained breakpoints: 350px → 1600px
• Maintain 8px grid
• Vuetify Flex/Grid system

Interaction Rules

• Hover: color swap or opacity change (150ms ease)
• Focus: magenta outline for keyboard nav

DO List

• Use only defined palette colors
• Use bold uppercase for nav buttons
• Maintain 8px grid for spacing
• Keep border radius consistent
• Apply Teal bg to primary buttons

DON'T List

• Add drop shadows to buttons
• Use underlines on links
• Introduce non-palette colors
• Use inconsistent radii
• Overuse magenta outline

Code Examples

Primary Button:

.btn-primary {
  background: #064b71;
  color: #ffffff;
  padding: 0;
  border-radius: 0;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #000000;
  opacity: 0.7;
}

Card:

.card {
  background: #f2f2f2;
  border-radius: 8px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.25) 0px 4px 4px;
}

Input:

.input-text {
  background: transparent;
  color: #000000;
  padding: 10px;
  border: none;
}
.input-text:focus {
  outline: none;
}

---

## 9. Summary

**TL;DR** — Welt’s design system is sharp, disciplined, and unapologetically minimal. Strong sans-serif typography, minimal radius, teal and white dominance, 8px grid. No fluff.

**Brand Keywords**  
- editorial-minimalist  
- teal-driven  
- typography-first  
- grid-disciplined  
- contrast-confident