Deutsche Telekom — Telekom's Stencil-built web-component system, open-sourced under a neutral theme.
Scale ships as a Stencil/TypeScript web-component library with a Sketch design library alongside it. Its CHANGELOG shows a v0.1.x line predating the April 2021 v3.0.0-beta rewrite, and the project describes itself as still in open beta. It is dual-themed: a Telekom-branded build and a neutral @telekom/scale-components-neutral build for non-Telekom use, because Deutsche Telekom reserves brand rights (the magenta color, wordmark, header/footer components) even though the code is MPL-2.0.
Maintained by Deutsche Telekom's open-source team; contributions go through GitHub pull requests reviewed against per-package CODEOWNERS, governed by the Contributor Covenant 2.0. Framework wrappers (Vue, Angular) are proxy packages auto-generated from the core Stencil components and were deprecated as of v3.0.0-beta in favor of using the custom elements directly.
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
core.color.grey.0
Base surface/white
core.color.blue.500
Interactive blue
core.color.red.500
Error/danger emphasis
core.radius.40
Default control radius
core.radius.900
Pill-shaped elements
core.motion.duration.fast
Default transition speed
Exactly what ships in telekom-scale-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Scale — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Deutsche Telekom. "Scale" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Scale **Owner:** Deutsche Telekom **Official documentation:** https://telekom.github.io/scale/ --- ## Summary Telekom's Stencil-built web-component system, open-sourced under a neutral theme. ## Design tokens (illustrative) | Token | Value | Role | | --- | --- | --- | | `core.color.grey.0` | `#FFFFFF` | Base surface/white | | `core.color.blue.500` | `#2238DF` | Interactive blue | | `core.color.red.500` | `#E82010` | Error/danger emphasis | | `core.radius.40` | `8px` | Default control radius | | `core.radius.900` | `999px` | Pill-shaped elements | | `core.motion.duration.fast` | `200ms` | Default transition speed | ## Origin Scale ships as a Stencil/TypeScript web-component library with a Sketch design library alongside it. Its CHANGELOG shows a v0.1.x line predating the April 2021 v3.0.0-beta rewrite, and the project describes itself as still in open beta. It is dual-themed: a Telekom-branded build and a neutral @telekom/scale-components-neutral build for non-Telekom use, because Deutsche Telekom reserves brand rights (the magenta color, wordmark, header/footer components) even though the code is MPL-2.0. ## Governance Maintained by Deutsche Telekom's open-source team; contributions go through GitHub pull requests reviewed against per-package CODEOWNERS, governed by the Contributor Covenant 2.0. Framework wrappers (Vue, Angular) are proxy packages auto-generated from the core Stencil components and were deprecated as of v3.0.0-beta in favor of using the custom elements directly. ## Known for - A genuinely framework-spanning core: one Stencil/web-component source compiles to React, Vue, and Angular proxy packages. - A neutral, de-branded distribution (@telekom/scale-components-neutral) that exists specifically so the code can be reused outside Deutsche Telekom without the trademarked magenta identity. - A dedicated data-grid component with built-in sort, multi-row selection, inline cell editing, and pagination. ## Underrated - The design-tokens repo is a separate, MPL-2.0 monorepo built with Style Dictionary, with a CI step that outputs Figma-ready token files even though there's no official Figma kit. - scale-date-picker wraps duet-date-picker but adds full localization (day/month names, first-day-of-week) and a controllable calendar opening direction. ## Watch out for - The Vue and Angular wrappers are legacy: current guidance is to consume the web components directly, so new projects on those frameworks get thinner official support than React. - Anything under the brand theme (magenta, wordmark, header/footer) is explicitly not free to reuse commercially — you must switch to the neutral theme, which changes the visual identity you're evaluating. ## Components worth studying - **scale-data-grid** — A Stencil data table taking fields/rows props, with sorting, multi-row selection, inline cell editing, pagination, and an optional frozen header. - **scale-date-picker** — ISO-8601 date input built on duet-date-picker, with configurable min/max range and full localization of button/day/month labels. - **scale-combobox** — Single-select combobox with a filterable option list and optional free-text entry via allowCustom. ## When to choose Scale Evaluate Scale for its web-component architecture and data-heavy components (data-grid, combobox, date-picker) if you're framework-agnostic or multi-framework. Don't evaluate it on its branded Storybook screenshots — pull the neutral package to see what you'd actually be able to ship. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Scale by Deutsche Telekom — Telekom's Stencil-built web-component system, open-sourced under a neutral theme. Lean into what it's known for: A genuinely framework-spanning core: one Stencil/web-component source compiles to React, Vue, and Angular proxy packages. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Scale Storybook docs](https://telekom.github.io/scale/) - [Scale on GitHub](https://github.com/telekom/scale) - [Design tokens source](https://github.com/telekom/design-tokens) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/telekom-scale) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Evaluate Scale for its web-component architecture and data-heavy components (data-grid, combobox, date-picker) if you're framework-agnostic or multi-framework. Don't evaluate it on its branded Storybook screenshots — pull the neutral package to see what you'd actually be able to ship.
Where next
