Focus Design System Deep Dive

1. Brand Overview

Focus.de is Germany’s digital news brand with a very recognisable red badge identity. The design language on their site is tight, no-frills, and extremely systemised. This isn’t a site that’s trying to be flamboyant or “design for design’s sake” – it’s engineered for speed and clarity. The whole thing feels like it’s built with a pragmatic newsroom mentality: get the information to the reader, make the interactions obvious, and keep everything aligned to a strict grid.

There’s a slight duality here: you get a crisp, restrained UI in the header and content blocks, but that signature red pops out on active tabs, badges, and links. That balance between grey and white neutrality and the shouty red allows them to emphasise urgency — which makes sense in a news context where speed and “attention capture” is key.

Typography is modern sans — "Inter Tight" with fallback stacks — locked into consistent sizes with predictable line heights. It feels engineered rather than ornamental. No decorative flourishes, no unneeded italics or scripts. That’s deliberate — in a high-density content environment, any excess style is just noise.

Spacing is an 8px grid with a few oddball pixel values for very specific elements (42.85px being my favourite weird one). That grid discipline gives them a predictable vertical rhythm. Combine that with sharp-cornered dividers (2px and 4px corner radii in limited use), and you have a strong sense of containment for each content module.

Overall, the vibe: efficient, slightly conservative, but not boring. It’s confident in its colour signalling, functional in its typography, and dead serious about spacing discipline. The red accents are emotional; the grey and white base is structural. This is a design system built for scaling hundreds of content types without breaking visual cohesion.

2. Color System

2.1 Primary Colors

The real brand hero is #ee001c — a pure, saturated red. It’s used for the most attention-demanding states: header menu selected tabs, key action links, badges. The psychology here is obvious: red grabs attention and conveys urgency. In a news context, it’s shorthand for “breaking” or “important.”

Contrast that with their primary neutral #333333 (from the semantic primary “rgba(51, 51, 51, 0.55)”). This very dark grey sets body text and icon colours without going full black, lending a softer feel for reading.

The secondary semantic colour is rgb(248, 248, 248) — a near-white surface background. It keeps sections distinct from the pure white type, bringing just enough warmth to stop it feeling sterile.

Blue (#156fbc) is the accent for links — cooler, less emotional than red, but still high-contrast. It’s for engagement rather than alerting.

2.2 Complete Palette

2.3 Color Relationships

They’ve avoided the trap of mixing too many brand colours — just two accents (red, blue), two greys (dark, medium), and white. That’s strong discipline.

Contrast notes:

• #ee001c on white easily passes WCAG AA for large text and most UI elements — red is highly visible.
• #156fbc on white is excellent for accessibility; above 4.5:1 ratio.
• #333333 on #ffffff is ~15:1 — perfect readability.
• The light grey #adadad fails for small text on white — used intentionally only in non-essential UI states.

Dark mode isn’t implemented here — palette is fixed toward light backgrounds.

2.4 Usage Guide

What works:

• Red (#ee001c) paired with white for maximum urgency (e.g., badge text white).
• Blue (#156fbc) for link text — stands apart from red CTAs in hierarchy.
• Dark grey (#333333) for primary body text — easy reading.
• Medium grey (#666666) for secondary meta info — date stamps, bylines.

Avoid:

• Using red for non-critical elements — undermines urgency signal.
• Grey text on grey backgrounds — kills legibility.
• Mixing blue and red together in the same block without clear hierarchy — feels messy.

3. Typography

3.1 Font Families

Primary: "Inter Tight"
Fallbacks: "Open Sans", "Helvetica"
No variable fonts. No Google Fonts load — likely self-hosted.

“Inter Tight” is condensed compared to standard “Inter” — fits more characters per line while keeping modern styling. Perfect for news headlines. The consistent stack ensures graceful fallback that’s still sans-serif and legible.

3.2 Type Scale

3.3 Hierarchy

They rely on weight shifts more than big jumps in size. The 16px base is everywhere — links, buttons, body text — with headings stepping up to 20px and 28px for prominence. Captions are 14px and 12px. Tight line heights (1.20–1.38) help control headline blocks, while body text breathes at 1.50–1.66. This is efficient typographic hierarchy without excessive scaling.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common multiples:

Odd values like 40.75px and 56.7344px point to precise pixel-perfect alignment in some modules.

4.2 Layout

Breakpoints cover a wide range from 250px to 1200px, with many intermediate points — this suggests they fine-tune component behaviour rather than sticking to classic 3-breakpoint systems. 576px, 768px, 992px, 1200px are familiar bootstrap-like anchors, but the extra ones (577px, 659px, 995px) show responsive micro-adjustments.

5. Visual Elements

Border Radius: Minimal.

• 2px: the most common (112 uses) — barely rounded.
• 4px: rare (5 uses) — used for badges.
• 50%: used for circular elements (dots, avatars).

Shadows: Rare, subtle.

• rgb(224, 224, 224) 0px 2px 4px 0px — soft elevation
• No heavy drop shadows. Mostly flat design.

Borders: Dark grey or light grey, 1px solid — used more than shadows for separation. Blue and red borders only appear for specific interactive elements.

6. Components

6.1 Buttons

Carousel Nav Button

Default:

• Background: rgba(33, 37, 41, 0.9)
• Color: #333333
• Padding: 1px 6px
• Border radius: 0px
• Border: none Focus:
• Outline: transparent solid 2px

Carousel Dot Active

Default:

• Background: #ee001c
• Color: #333333
• Radius: 50%
• Size: fixed circle

Carousel Dot Inactive

Default:

• Background: #adadad

6.2 Links

Variants:

• White text, bold 700 — hover: underline, color var(--text-title)
• Dark grey 400 — hover: underline
• Red 400 — hover: underline
• Blue bold 700 — hover: underline

Underline only appears on hover — clean default state.

6.3 Forms

No extracted text inputs — forms likely custom-styled elsewhere.

6.4 Cards

No explicit extraction — but shadows are subtle (rgb(224, 224, 224) 0px 2px 4px 0px) indicating slight elevation. Padding matches grid (16px–32px).

7. Design Tokens

:root {
  /* Colors */
  --color-dark-grey: #333333;
  --color-medium-grey: #666666;
  --color-white: #ffffff;
  --color-red: #ee001c;
  --color-blue: #156fbc;
  --color-light-grey: #adadad;
  --border-bg: #e4e2e3;
  --text-success: #00b752;

  /* Typography */
  --font-primary: "Inter Tight", "Open Sans", Helvetica;
  --font-size-xxl: 28px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;
  --line-height-tight: 1.20;
  --line-height-head: 1.30;
  --line-height-body: 1.50;
  --line-height-loose: 1.60;
  --letter-spacing-normal: 0.2px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-42: 42.85px;
  --space-56: 56.25px;
  --space-70: 70px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-light: rgb(224, 224, 224) 0px 2px 4px 0px;

}

8. AI Coding Assistant Prompt

# Focus Design System Specification

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

## Brand Context
Focus.de is a German news brand. The design is functional and efficient with high-contrast urgency signals. Strict 8px grid, restrained palette with strategic red accents, modern condensed sans-serif typography.

## Color Palette
- Dark Grey: #333333 — Body text, icons, dividers
- Medium Grey: #666666 — Secondary text
- White: #ffffff — Text on dark, backgrounds
- Brand Red: #ee001c — Primary actions, alerts, headline badges
- Link Blue: #156fbc — Secondary CTAs, hyperlinks
- Light Grey: #adadad — Disabled dots, inactive states
- Border Grey: #e4e2e3 — Neutral dividers
- Success Green: #00b752 — Positive feedback

## Typography
Font: "Inter Tight", "Open Sans", Helvetica.

| Level | Size   | Weight | Line Height | Use |
|-------|--------|--------|-------------|-----|
| H1 XL | 28px   | 700    | 1.30        | Main headlines |
| H1    | 20px   | 700    | 1.30        | Section heads |
| Body  | 16px   | 400    | 1.50        | Paragraph text |
| Button| 16px   | 400    | 1.60        | Labels |
| Link  | 16px   | 700    | 1.50        | Navigation |
| Caption | 14px | 400/700| 1.57        | Meta info |
| Small  | 12px  | 400/700| 1.50        | Labels, tags |
| XSmall | 10px  | 400    | 1.00/1.60   | Tight labels |

## Spacing & Grid
Base: 8px grid. Scale: 2px, 4px, 6px, 8px, 10px, 16px, 24px, 32px, 42.85px, 56.25px, 70px.

## Border Radius
- none: 0px — Square buttons
- sm: 2px — Cards
- md: 4px — Badges
- full: 50% — Circular dots

## Shadows & Depth
- Light: rgb(224, 224, 224) 0px 2px 4px 0px — Cards, surfaces
Flat design emphasis.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #ee001c;
  color: #333333;
  padding: 0;
  border-radius: 50%;
  border: 0 solid #333333;
  font-weight: 400;
  font-size: 16px;
}
.btn-primary:focus { outline: transparent solid 2px; }
```

### Carousel Button
```css
.carousel-btn {
  background: rgba(33,37,41,0.9);
  color: #333333;
  padding: 1px 6px;
  border-radius: 0;
  border: none;
}
.carousel-btn:focus { outline: transparent solid 2px; }
```

### Link Styles
```css
a.link-red { color: #ee001c; text-decoration: none; }
a.link-red:hover { text-decoration: underline; }
a.link-blue { color: #156fbc; font-weight: 700; text-decoration: none; }
a.link-blue:hover { text-decoration: underline; }
```

## Layout & Responsive Rules
- Adjust at breakpoints: 250px, 330px, 360px, 576px, 659px, 768px, 992px, 1200px.
- Keep section gaps multiples of 8px.

## Interaction Rules
- Hover: underline links
- Focus: outline transparent 2px for buttons
- No active states extracted — keep consistent

## DO
- Use palette strictly
- Maintain 8px spacing multiples
- Use Inter Tight for all text
- Reserve red for urgent/interactions
- Keep corners consistent — 2px or full circle

## DON'T
- Invent new colours
- Use heavy shadows
- Mix corner styles in same module
- Place grey text on grey background
- Overuse red — dilutes signal

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ee001c;
  color: #333333;
  border-radius: 50%;
  border: none;
  font: 400 16px/1.60 "Inter Tight", "Open Sans", Helvetica;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 2px;
  padding: 16px;
  box-shadow: rgb(224,224,224) 0px 2px 4px 0px;
}
```

### Link
```css
a {
  color: #156fbc;
  font-weight: 700;
  text-decoration: none;
}
a:hover { text-decoration: underline; }
```

9. Summary

TL;DR — Focus.de’s design system is a strict, neutral grid punctuated by urgent red accents. Typography is condensed sans, colour palette is disciplined, spacing is rigid multiples of 8px. Corners are sharp except for very specific circular elements.

Brand Keywords: news-urgent, grid-disciplined, sans-condensed, red-accented, functional-minimal