Telekom Brand Design System Deep Dive

1. Brand Overview

Telekom’s visual language is loud, sharp, and unmistakably theirs. They don’t shy away from their signature magenta — #e20074 — it’s everywhere you expect a brand anchor to be. You see it in primary buttons, hover states, and link highlights. It’s meant to scream “Telekom” while still feeling polished.

The site is visually heavy on contrast. Dark grays (#262626, #000000) ground the interface, white (#ffffff) is used for breathing space, and magenta is the accent that catches your eye. This isn’t a pastel-friendly, airy system. It’s corporate, confident, and engineered to perform in high-information contexts — think plan comparison tables, device galleries, and service menus.

Typography is custom: TeleNeo is the house font, with weights spanning 300 to 900. It’s geometric enough to feel modern, but still readable in long-form copy. They use it everywhere — headings, buttons, links — with the occasional Consent-TeleNeo variant in modal/dialog contexts. There’s no external dependency on Google or Adobe Fonts here; it’s a controlled, proprietary system.

Spacing follows a practical 8px scale, but they don’t stick to clean multiples religiously. You’ll spot oddities like 6.7px padding — clearly tuned for visual balance rather than strict math. Border radii are similarly varied: 3.99996px for buttons, 999px for pill shapes, 40px for large containers.

The vibe? Corporate tech optimism. Telekom wants you to feel they’re both a giant telecommunications provider and a lifestyle enabler. They’re not chasing minimalism. They’re chasing clarity and brand recall. Every UI decision reinforces that.

2. Color System

2.1 Primary Colors

The hero color is Magenta — rgb(226, 0, 116) / #e20074. This hue sits between red and pink, leaning into emotional energy. It’s bold, youthful, but also aggressive enough to cut through noise. In the telecom sector, magenta sets Telekom apart from the blue-heavy competitors (think O2, AT&T) and green-oriented brands (T-Mobile US).

Psychologically, this magenta signals action. It’s used for primary CTAs (“Buy now”, “Check availability”) and hover states. Telekom’s magenta isn’t a subtle accent — it’s the brand’s handshake.

2.2 Complete Palette

2.3 Color Relationships

Contrast is high. White-on-magenta is readable. Magenta-on-gray works because gray is dark enough. They avoid low-contrast combinations — you won’t see magenta on light gray backgrounds.

Accessibility-wise, most text meets WCAG AA contrast ratios. The possible issue is magenta on medium gray (#6b6b6b), which can drop below the AA threshold for small text.

Dark mode? Not explicitly implemented here — color palette is already high-contrast and works against both white and dark backgrounds.

2.4 Usage Guide

• Use Magenta for interactive elements only — buttons, link hover, key icons.
• Dark Gray and Black for text-heavy sections.
• Deep Teal Blue (#00739f) for external link indicators — a functional color, not brand primary.
• Avoid mixing magenta and teal in the same component unless it’s a link with a hover state.
• Light Grays for secondary text — don’t use them for primary actions.

3. Typography

3.1 Font Families

• TeleNeo — Primary brand font. Custom Telekom typeface.
• Consent-TeleNeo — Variant used in consent dialogs and some modals.
• Fallbacks: Helvetica, Arial (common system fonts).

No Google Fonts, no Adobe Fonts — this is all proprietary.

3.2 Type Scale

3.3 Hierarchy

They use tight line heights for headings (1.0–1.12) — keeps titles compact. Body and link text sits around 1.25–1.33 for readability. Weights jump between 400 and heavy 800–900 for emphasis; no medium weights for headings, which keeps hierarchy clear.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common deviations (like 6.7px) are likely visual tweaks for component alignment.

4.2 Layout

Breakpoints are plentiful — they’ve clearly tuned for many devices:

• Mobile: 320px, 360px, 375px
• Tablet: 768px, 800px
• Desktop: 1024px, 1366px, 1440px, 1680px

Responsive approach is granular — they’re not sticking to just 3–4 breakpoints; they adjust for niche widths.

5. Visual Elements

Border Radius

Varies heavily:

• 3.99996px — Buttons
• 8px — Links, small cards
• 10px — Images
• 16px — Div containers
• 24px — Badges, larger images
• 40px — Large div containers
• 999px — Pill buttons
• 100% — Circular images

Shadows

Minimal use:

• rgba(0,0,0,0.15) 0px 2px 9px — Rare drop shadow
• inset shadows for some inner elements

Mostly flat design with occasional shadow for depth.

Borders

Functional, not decorative:

• 1px solid #6b6b6b — Neutral outlines
• White borders for contrast (1px solid #ffffff)

6. Components

6.1 Buttons

Outline Button

Default:

• Background: transparent
• Color: white
• Padding: 6.7px 24px
• Radius: 3.99996px
• Border: 1px solid #ffffff

Hover:

• Color: #262626
• Background: #737373
• Outline: blue #125fcc
• Transform: scale(1.2)

Focus:

• Border: 1px dotted #2c2c2c
• Transform: scale(1.1)

Active:

• Background transparent
• Opacity: 0.6

Solid Gray CTA

Default:

• Background: #6b6b6b
• Color: white
• Padding: 6.7px 24px
• Border: 1px solid #d0d0d0

Hover:

• Same hover as outline — scale(1.2)

Pill Magenta Button

Default:

• Background: #e20074
• Color: white
• Padding: 4px 20px
• Radius: 999px

Hover:

• Background: #737373
• Color: magenta

6.2 Links

Variants:

• Blue #00739f default → magenta hover underline
• Dark gray #262626 bold → magenta hover underline
• White bold → magenta hover no underline

6.3 Forms

No text inputs extracted here — likely styled similarly to buttons with rounded corners and subtle borders.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #262626;
  --color-white: #ffffff;
  --color-deep-teal-blue: #00739f;
  --color-black: #000000;
  --color-light-gray-1: #b2b2b2;
  --color-light-gray-2: #929292;
  --color-magenta: #e20074;
  --color-medium-gray: #6b6b6b;
  --color-off-white: #ededed;

  /* Typography */
  --font-primary: "TeleNeo", Helvetica, Arial;
  --font-consent: "Consent-TeleNeo";
  --font-size-h1-xl: 60px;
  --font-size-h1-lg: 48px;
  --font-size-h1-md: 36px;
  --font-size-h1-sm: 24px;
  --font-size-body-lg: 21px;
  --font-size-body-md: 18px;
  --font-size-body-sm: 16px;
  --font-size-body-xs: 15px;
  --font-size-caption: 14px;
  --font-size-caption-sm: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-6-7: 6.7px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-36: 36px;
  --space-48: 48px;
  --space-60: 60px;
  --space-62: 62px;

  /* Border Radius */
  --radius-sm: 3.99996px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-xxl: 24px;
  --radius-huge: 40px;
  --radius-pill: 999px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.15) 0px 2px 9px 0px;
  --shadow-inset-sm: rgba(0,0,0,0.15) 0px 1px 2px 0px inset;
}

8. AI Coding Assistant Prompt

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

Brand Context: Telekom's design language is bold, corporate, and high-contrast. Magenta (#e20074) is the brand anchor, supported by dark grays and bright whites. Typography is custom (TeleNeo) with geometric precision and heavy weights for hierarchy.

Color Palette:
- Primary Magenta: #e20074 — Primary buttons, link hovers, key accents
- Dark Gray: #262626 — Headers, body text, dark backgrounds
- White: #ffffff — Page background, text on dark
- Deep Teal Blue: #00739f — External links
- Black: #000000 — Icons, strong text
- Light Gray 1: #b2b2b2 — Secondary text
- Light Gray 2: #929292 — Secondary labels
- Medium Gray: #6b6b6b — Button backgrounds
- Off White: #ededed — Light surface backgrounds

Typography:
- Primary Font: "TeleNeo", Helvetica, Arial
- Consent Font: "Consent-TeleNeo"
- Sizes:
  - H1 XL: 60px, 800, lh 1.12
  - H1 LG: 48px, 800/900, lh 1.00
  - H1 MD: 36px, 800/300, lh 1.00–1.11
  - H1 SM: 24px, 400–800, lh 1.13–1.21
  - Body LG: 21px, 500–700, lh 1.33
  - Body MD: 18px, 400–700, lh 1.20–1.33
  - Body SM: 16px, 400–700, lh 1.25
  - Body XS: 15px, 400–700, lh 1.20–1.33
  - Caption: 14px, 700, lh 1.00
  - Caption SM: 12px, 400, lh 1.33

Spacing & Grid:
- Base: 8px grid with exceptions (6.7px for buttons)
- Tokens: 1, 3, 4, 6, 6.7, 8, 12, 14, 18, 20, 24, 36, 48, 60, 62px

Border Radius:
- sm: 3.99996px — Buttons
- md: 8px — Small cards
- lg: 10px — Images
- xl: 16px — Containers
- xxl: 24px — Badges
- huge: 40px — Large divs
- pill: 999px — Pill buttons
- full: 100% — Circular images

Shadows & Depth:
- Minimal shadows: rgba(0,0,0,0.15) 0px 2px 9px
- Mostly flat design — use borders for separation

Component Specifications:
- Primary Button:
  Default: bg #e20074, color #fff, padding 4px 20px, radius 999px
  Hover: bg #737373, color #e20074
  Active: bg transparent, opacity 0.6
  Focus: bg #6b6b6b, border 1px dotted #2c2c2c, color #e20074
- Outline Button:
  Default: bg transparent, color #fff, padding 6.7px 24px, radius 3.99996px, border 1px solid #fff
  Hover: bg #737373, color #262626, outline #125fcc
- Solid Gray Button:
  Default: bg #6b6b6b, color #fff, padding 6.7px 24px, border 1px solid #d0d0d0

Links:
- External: color #00739f → hover #e20074 underline
- Dark bold: color #262626 → hover #e20074 underline
- White bold: color #fff underline → hover #e20074 no underline

Layout & Responsive Rules:
- Breakpoints: 320, 360, 375, 768, 800, 1024, 1366, 1440, 1680px
- Maintain spacing tokens for section gaps

Interaction Rules:
- Transitions: 150ms ease
- Focus outlines in brand colors (#125fcc, #e20074)
- Hover transforms: scale(1.1–1.2) on buttons

DO:
- Use magenta only for primary interactive elements
- Stick to spacing tokens
- Maintain consistent TeleNeo usage
- Keep high contrast between text and background
- Scale buttons on hover

DON'T:
- Invent new colors
- Mix sharp and rounded corners in same component
- Use heavy shadows
- Reduce contrast below WCAG AA

Code Examples:

Primary Button CSS:
```css
.btn-primary {
  background: #e20074;
  color: #ffffff;
  padding: 4px 20px;
  border-radius: 999px;
  font-weight: 655;
  font-size: 18px;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: #737373;
  color: #e20074;
}
.btn-primary:focus {
  background: #6b6b6b;
  border: 1px dotted #2c2c2c;
  color: #e20074;
}

Outline Button CSS:

.btn-outline {
  background: transparent;
  color: #ffffff;
  padding: 6.7px 24px;
  border-radius: 3.99996px;
  border: 1px solid #ffffff;
  font-weight: 700;
  font-size: 18px;
  transition: transform 150ms ease;
}
.btn-outline:hover {
  background: #737373;
  color: #262626;
  outline: solid 0.125rem #125fcc;
  transform: scale(1.2);
}

Card CSS:

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #d0d0d0;
}

---

## 9. Summary

**TL;DR** — Telekom’s design system is high-contrast, magenta-driven, and unapologetically corporate. TeleNeo typography, tight spacing, and varied radii give components a controlled yet approachable feel.

**Brand Keywords**:
- magenta-dominant  
- corporate-bold  
- grid-disciplined  
- high-contrast  
- tech-confident