Utilities / iOS / Android / Web

Telekom

Telekom is magenta and nothing else: one color on a white page, heavy headlines, small-corner buttons and pastel panels that calm the offers.

Download
  • #E20074
  • #262626
  • #EDEDED
  • #E2EFF5
  • #F8EFDC
  • #F5E194

Color

Every color token in the file, grouped by role.

Brand

  • primary#E20074
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF

Text

  • ink#262626
  • ink body#383838
  • ink faint#929292

Lines

  • scrim#00000080 (50%)

More

  • panel#EDEDED
  • sky#E2EFF5
  • cream#F8EFDC
  • yellow#F5E194

Typography

Each style is set with the file's own family, size, weight and spacing.

  • TeleNeoTeleNeo is private and not available in open fonts. Shown in Cabin, the closest open match.
  • display48px / 800 / 48px

    Telekom

  • headline36px / 800 / 36px

    Telekom

  • title21px / 700 / 25px

    Pack my box with five dozen liquor jugs

  • body18px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button18px / 700 / 24px

    Continue to checkout

  • small15px / 400 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • md8px
  • lg16px
  • xl24px
  • pill40px

Spacing

The spacing scale, drawn to size.

  • sm7px
  • md12px
  • base18px
  • lg24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • menu item
    menu-item
  • sky panel
    sky-panel
  • cream panel
    cream-panel
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 94 lines
version: alpha
name: Telekom-design-analysis
description: "A telecom shop in one unmistakable magenta (#e20074): near-black ink (#262626) on white and light gray, heavy TeleNeo headlines at weight 800, 4px corner buttons with pill chips and pastel sky, cream and yellow offer panels."
status: Draft
appVersion: "measured in a browser (German site), 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#e20074"
  on-primary: "#ffffff"
  ink: "#262626"
  ink-body: "#383838"
  ink-faint: "#929292"
  canvas: "#ffffff"
  panel: "#ededed"
  sky: "#e2eff5"
  cream: "#f8efdc"
  yellow: "#f5e194"
  scrim: "#00000080"

typography:
  # Font note: "TeleNeo" is a private font and is not available in open fonts. Closest open alternative: "Cabin".
  display:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 48px
  headline:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 800
    lineHeight: 36px
  title:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 25px
  body:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 24px
  small:
    fontFamily: "TeleNeo, Cabin, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 18px

rounded:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 40px

spacing:
  sm: 7px
  md: 12px
  base: 18px
  lg: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    height: 42px
    padding: 7px 24px
  menu-item:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    height: 29px
  sky-panel:
    backgroundColor: "{colors.sky}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px
  cream-panel:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 24px

Overview

Deutsche Telekom is Germany's largest telecom brand, and telekom.de is its shop. The look is one unmistakable magenta on white and near-black, with heavy TeleNeo headlines, rounded pills and pastel offer panels. [Observed]

What defines the look:

  1. One magenta. #e20074 fills primary buttons and large offer bands. [Measured]
  2. Near-black ink. Text is #262626 with #383838 body and gray #929292 for quiet labels. [Measured]
  3. Heavy headlines. TeleNeo at weight 800, 36 and 48, on a tight line height. [Measured]
  4. Small-corner buttons. 4px on a 42 high button with 24 side padding, and 40px pill chips. [Measured]
  5. Pastel panels. Sky #e2eff5, cream #f8efdc and yellow #f5e194, rounded 16 to 24. [Measured]

Source for this file: the telekom.de start page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The Scale design system documentation was not read. The customer center is behind login and was not measured. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Magenta#e20074Primary buttons and bands
Text#262626, #383838Titles and body
Faint text#929292Inactive menu items
Page#ffffffMain surface
Gray panel#edededSections
Sky#e2eff5Offer panels
Cream#f8efdcOffer panels
Yellow#f5e194Offer panels

Typography

TeleNeo throughout, loaded from 100 to 900. The hero is 48 on 48 at 800, page titles 36 on 36 at 800, card titles 21 on 25 at 700, body 18 on 24 at 400 and buttons 18 at 700. [Measured]

Shape and spacing

Buttons use a 4px corner and are 42 high with 6.7 by 24 padding. Chips and tags are 40px pills, panels 16 and 24, and small parts 2, 8 and 10. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the page measured. [Observed]

Platform: iOS

The Telekom iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of the service app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A magenta button for the main action. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the magenta, the ink and the type with the web. [Inferred]

Platform: Android

The Telekom Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of the service app. [Inferred]

Main action

Expected on Android: Floating action button.

A magenta button for the main action. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the magenta, the ink and the type with the web. [Inferred]

Platform: Web

The telekom.de start page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A top row for customer groups (private and business), a main menu and a magenta call to action. [Observed]

Main action

Expected on Web: Page-level button.

A magenta button, 42 high, 4px corner, bold white text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Magenta buttons and 40px pill chips. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 42 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the magenta, the heavy headlines and the small-corner buttons. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use the one magenta for the main action and big bands.
  • Set headlines heavy and tight.
  • Keep buttons at a 4px corner.
  • Use pastel panels for offers.

Don't

  • Don't add a second brand color.
  • Don't use light headline weights.
  • Don't round the main button into a pill.

Known Gaps

  • Product pages, the cart and the customer center were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The alternative for TeleNeo is a judgement call because its heavy weights are wider than any open humanist face.
  • The Scale design system documentation was not read, so role names are not given.