T‑Online Design System Deep Dive

1. Brand Overview

T‑Online’s design language is a mix of corporate precision and editorial accessibility. This is a news and services platform, but it’s not trying to look like a broadsheet or a tech startup. It feels like a hybrid — the magenta accent screams Telekom heritage, but the rest of the palette is muted, neutral, and comfortable for long reads. There’s no gimmicky gradients or over‑engineered skeuomorphism; everything is clean, flat, and legible.

The vibe: solid and trustworthy, but with a pop of energy when the magenta hits. This is a brand that wants to carry its parent company’s corporate confidence into a consumer‑friendly space. The muted greys and blues keep the editorial feel grounded, while the dense typography scale gives them flexibility for headlines, teasers, and body text without breaking hierarchy.

Audience: wide. News readers, service users, casual visitors. The design works for anyone, but you can tell it’s optimised for clarity and scannability — no overly large hero sections, no heavy motion. The colour system makes CTAs obvious without shouting, and the typography keeps content readable at a glance.

Philosophy: consistency first. Every spacing value sits on an 8px‑based scale. Border radii are deliberate — you don’t see random rounded corners — and shadows are subtle, functional, never decorative. The Tailwind CSS under the hood enforces utility‑driven styling, so this is a system meant to be modular and predictable. I love how they’ve kept their corporate magenta sharp (#E20074) but use it sparingly, so it never overwhelms the content.

Odd choice: they’ve got some extreme radii (9999px pills, 100px large rounds) mixed with tight 4px and 8px corners. It works visually, but you have to be disciplined when building components to avoid mismatched curvature.

Overall, the T‑Online site reads as a mature, well‑maintained design system that knows its heritage colours, keeps typography tight, and uses spacing as its invisible grid. It’s not flashy, but it’s confident.

2. Color System

2.1 Primary Colors

Primary brand colour: Magenta — #E20074 (rgb(226, 0, 116)).

This is Telekom’s signature magenta. It’s high‑energy, high‑contrast against the neutrals they use for background and text. Psychologically, magenta is bold, modern, and slightly unconventional — it’s not red (danger) and not pink (soft), it’s somewhere in between, which makes it a strong identity colour. Competitors in the news space (e.g., Spiegel, Zeit) lean on reds or blues; magenta is an instant differentiator.

2.2 Complete Palette

2.3 Color Relationships

They rely on high‑contrast pairs: magenta (#E20074) on white (#FFFFFF) for CTAs; dark grey (#474C59) on light grey (#EBEFF7) for body content. The palette has enough range to handle light and dark surfaces without introducing new colours.

Accessibility: magenta on white passes WCAG AA for large text, but small text needs careful font weight. Dark grey on light grey is comfortable and safe. Coral red (#EE3F54) is strong enough for alert text but should be paired with white for readability.

Dark mode: not explicitly implemented here, but the presence of dark neutrals (Ebony, Salemsfur, Black) suggests they could flip easily.

2.4 Usage Guide

• Use magenta only for interactive elements or key brand highlights.
• Backgrounds: light grey, catskill white, cararra — keep content grounded.
• Text: dark grey for main, medium grey for secondary; avoid pure black unless on very light neutral.
• Avoid pairing magenta with coral red — too much colour conflict.
• Blue accents (#005FCC, #00A0DE) are rare — keep them for specific functional states.

3. Typography

3.1 Font Families

Two main families:

• Roboto — fallback to Arial. Sans‑serif, modern, clean.
• Roboto Serif — fallback to Georgia. Serif for editorial emphasis.

No Google Fonts or Adobe Fonts sources listed; likely self‑hosted.

3.2 Type Scale

3.3 Hierarchy

They’ve got a dense scale — from 40px down to 10px — which allows micro‑typography for captions, labels, and timestamps. Headings often mix Roboto and Roboto Serif to add editorial flavour. Uppercase with tracking is used for small UI labels, giving them visual separation from body copy. The line heights are tight (mostly 1.20), which keeps blocks compact and readable.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Values:

Heavy use of 8px, 12px, 16px, and 24px — these are your bread‑and‑butter gaps and paddings.

4.2 Layout

Breakpoints:

• 480px
• 769px
• 1200px
• 1441px
• 1900px

Responsive strategy: clear mobile, tablet, desktop, large desktop, ultra‑wide tiers. Tailwind CSS utilities make switching between them straightforward.

5. Visual Elements

Border Radius System

Values:

• 0px — menus, divs (flat edges)
• 4px — small buttons, menu items
• 8px — cards, buttons, images (common)
• 8px 8px 0px 0px — top‑rounded cards/images
• 100px — large pill shapes (region selector, buttons)
• 9999px — full pill/round avatars
• 50% — perfect circles (icons)
• 100% — full containers

Shadows

Mostly subtle:

• rgba(125,152,178,0.2) with 4px, 8px, 12px offsets — functional depth
• One magenta shadow (rgba(226,0,116,0.62)) — rare, maybe focus ring effect
• No heavy drop shadows — this is flat with light elevation.

Borders

1px solid light grey (#EBEFF7) is the standard divider. Occasionally use #CFD5E5 for input borders. Magenta borders appear on buttons for emphasis.

6. Components

6.1 Buttons

Primary Button
Default: bg #E20074 (magenta), text #F7F9FC (rgb(247,249,252)), padding 0px 12px, radius 8px, no border.
Hover: not defined (likely same but with minor tone shift).
Font: Roboto 14px, weight 500.

Secondary Button
Default: bg white, text magenta, padding 14px 12px, radius 4px, border 1px solid #CFD5E5.
Font: Roboto 14px, weight 500.

Tertiary / Panel Button
Default: bg #F7F9FC, text dark (#171B26), padding 12px, radius 0px 0px 8px 8px, shadow with 12px offset.
Font: Roboto 14px, weight 400.

Neutral Button
Default: bg #EBEFF7, text #474C59, padding 16px 15px 14px, radius 8px, border 1px solid #CFD5E5.
Font: Roboto 14px, weight 500.

6.2 Links

Variants:

• Secondary text link: #8D93A6, no underline, hover magenta (var(--color-magenta)).
• Body link: #171B26, no underline, hover magenta.
• Underlined link: #474C59, underline, hover magenta.
• Magenta link: #E20074, bold, no underline, hover magenta.
• White link: #FFFFFF, no underline, hover magenta.

6.3 Forms

Text input: transparent bg, dark text (#171B26), no border, left padding 16px. No visible focus style in data (likely handled via JS/Tailwind).

6.4 Cards

Backgrounds in light grey or catskill white, radius 8px, subtle shadow. Borders: 1px solid #EBEFF7 or #CFD5E5.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #E20074;
  --color-dark-grey: #474C59;
  --color-light-grey: #EBEFF7;
  --color-white: #FFFFFF;
  --color-medium-grey: #8D93A6;
  --color-coral-red: #EE3F54;
  --color-royal-blue: #005FCC;
  --color-cadetBlue: #A3AABF;
  --color-ebony: #262C3B;
  --color-cararra: #E7E6E0;
  --color-salemsfur: #171B26;
  --color-bright-blue: #00A0DE;
  --color-catskillwhite: #DEE2F0;
  --color-blackMarlin: #332817;
  --color-botticelli: #CFD5E5;
  --color-bridesmaid: #FEECEE;
  --color-goldenSand: #F5E198;
  --color-black: #0A0C14;
  --color-green: #0D8033;
  --color-screenYellowDark: #DBAD39;
  --color-magentaLight: #F9CCE3;

  /* Typography */
  --font-roboto: "Roboto", Arial, sans-serif;
  --font-robotoSerif: "RobotoSerif", Georgia, serif;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-9: 9px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-66: 66px;
  --space-363: 363.375px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 100px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-lg: rgba(125, 152, 178, 0.2) 0px 12px 24px 0px;
  --shadow-md: rgba(125, 152, 178, 0.2) 0px 8px 16px 0px;
  --shadow-sm: rgba(125, 152, 178, 0.2) 0px 4px 8px 0px;
  --shadow-magenta: rgba(226, 0, 116, 0.62) 0px 0px 0px 1.17987px;
}

8. AI Coding Assistant Prompt

# T‑Online Design System Specification

You are a T‑Online design expert. Build UIs matching their visual language exactly.

## Brand Context
T‑Online blends corporate Telekom magenta with a muted, editorial neutral palette. The design is clean, flat, and utility‑driven, using an 8px spacing grid and predictable typography hierarchy. Shadows are subtle; borders define structure.

## Color Palette
- Primary Magenta: #E20074 — CTAs, primary buttons, key highlights
- Dark Grey: #474C59 — Main text, icons
- Light Grey: #EBEFF7 — Backgrounds, dividers
- White: #FFFFFF — Page background, text on magenta
- Medium Grey: #8D93A6 — Secondary text
- Coral Red: #EE3F54 — Alerts/warnings
- Royal Blue: #005FCC — Hover/focus accents
- Cadet Blue: #A3AABF — Neutral UI elements
- Ebony: #262C3B — Dark text backgrounds
- Cararra: #E7E6E0 — Background blocks
- Salemsfur: #171B26 — Dark text
- Bright Blue: #00A0DE — Informational accents
- Catskill White: #DEE2F0 — Panels, cards
- Black Marlin: #332817 — Rare dark accent
- Botticelli: #CFD5E5 — Borders, inputs
- Bridesmaid: #FEECEE — Special bg state
- Golden Sand: #F5E198 — Highlights
- Black: #0A0C14 — Dark mode text
- Green: #0D8033 — Success states
- Screen Yellow Dark: #DBAD39 — Warning icons
- Magenta Light: #F9CCE3 — Background on hover

## Typography
Fonts:
- Roboto, Arial fallback — UI, headings
- RobotoSerif, Georgia fallback — Editorial headings

Type scale (sizes in px, line height in unitless):
| Level | Font | Size | Weight | LH |
| H1 | Roboto | 40 | 700 | 1.20 |
| H1 | Roboto | 32 | 700 | 1.20 |
| H1 | Roboto | 28 | 700 | 1.20 |
| H1 | RobotoSerif | 28 | 600 | 1.20 |
| H1 | RobotoSerif | 24 | 500 | 1.20 |
| H1 | Roboto | 22 | 700 | 1.20 |
| H1 | RobotoSerif | 22 | 600 | 1.20 |
| Body | Roboto | 18 | 400 | 1.20 |
| Button | Roboto | 14 | 500 | 1.20 (uppercase, 1.4px tracking) |
| Caption | Roboto | 12 | 700 | 1.40 (uppercase, 1.2px tracking) |
| Small | Roboto | 10 | 400 | 1.20 (uppercase) |

## Spacing & Grid
Base: 8px. Tokens: 1, 2, 3, 4, 8, 9, 11, 12, 14, 16, 20, 24, 32, 66, 363.375px.
Use multiples for padding, margins, gaps.

## Border Radius
- none: 0px — flat edges
- sm: 4px — inputs, small buttons
- md: 8px — cards, buttons
- lg: 100px — large pill shapes
- full pill: 9999px — avatars, pill buttons
- circle: 50% — icons
- full: 100% — full containers

## Shadows & Depth
- sm: rgba(125,152,178,0.2) 0px 4px 8px
- md: rgba(125,152,178,0.2) 0px 8px 16px
- lg: rgba(125,152,178,0.2) 0px 12px 24px
Avoid heavy decorative shadows.

## Component Specifications

### Primary Button
Default:
```css
background: #E20074;
color: #F7F9FC;
padding: 0 12px;
border-radius: 8px;
border: none;
font: 500 14px/1.20 var(--font-roboto);
```
Hover: lighten magenta slightly.
Focus: outline: 2px solid #E20074.
Disabled: opacity: 0.5.

### Secondary Button
Default:
```css
background: #FFFFFF;
color: #E20074;
padding: 14px 12px;
border-radius: 4px;
border: 1px solid #CFD5E5;
font: 500 14px/1.20 var(--font-roboto);
```

### Navigation Links
Default: #8D93A6 or #171B26 depending on context, no underline.
Hover: color: var(--color-magenta).

### Input Fields
Default:
```css
background: transparent;
color: #171B26;
border: none;
padding-left: 16px;
```
Focus: add border-bottom: 1px solid #E20074.

### Cards
Background: #EBEFF7 or #DEE2F0, radius: 8px, shadow: var(--shadow-sm), padding: 24px.

## Layout & Responsive Rules
Breakpoints:
- sm: 480px
- md: 769px
- lg: 1200px
- xl: 1441px
- xxl: 1900px

## Interaction Rules
- Transition: 150ms ease for hover/focus
- Focus rings in magenta for interactive elements
- Hover states: color change, no motion

## DO
- Use only palette colours
- Maintain 8px grid
- Use Roboto for UI, RobotoSerif for editorial headings
- Keep shadows subtle
- Respect breakpoints

## DON'T
- Invent new colours
- Mix sharp and rounded corners arbitrarily
- Overuse magenta — keep it for CTAs
- Apply heavy drop shadows

## Code Examples

### Primary Button (Tailwind)
```html
<button class="bg-[#E20074] text-[#F7F9FC] px-3 py-0 rounded-md font-roboto font-medium text-sm hover:bg-[#e63b93] focus:outline focus:outline-2 focus:outline-[#E20074]">Click</button>
```

### Card
```html
<div class="bg-[#EBEFF7] rounded-md shadow-sm p-6">
  Card content
</div>
```

### Input
```html
<input type="text" class="bg-transparent text-[#171B26] pl-4 border-b border-[#CFD5E5] focus:border-[#E20074]" placeholder="Search...">
```

9. Summary

TL;DR — T‑Online’s design system is a disciplined mix of Telekom magenta and a muted neutral palette, tight typography, and an 8px spacing grid. Components are flat with subtle shadows, and borders define structure. Use magenta sparingly, keep curvature consistent, and let the typography and spacing do the heavy lifting.

Brand Keywords: magenta‑accented, editorial‑neutral, utility‑driven, flat‑structured, corporate‑confident