Two live demos from the early design-system work for Telekom: a component and template lab — navigation with and without the brand bar, key-visual placements, text and list sections, overlays, sliders, product teasers — and the introduction that explains the system behind it.
Both are still up, which is more than most demos of that era manage.
| Fact | Detail |
|---|---|
| Demo 1 | Component / template lab (VC) |
| Demo 2 | Introduction and documentation |
| Scope | Navigation variants, templates, product teasers |
| Period | 2014–2016 |
What's in it
Navigation with brand bar, without it, logged-in state, in front of the key visual — the variants were the documentation.
The lab showed composed pages, which is how stakeholders judge a design system.
In detail
What is actually inside it
Showing navigation in four states — brand bar, no brand bar, logged in, in front of the key visual — communicates the rules faster than any prose page.
The lab showed composed pages. Stakeholders judge a design system by pages, so pages were what it demonstrated.
| Detail | Value |
|---|---|
| Demo 1 | Component / template lab (VC) |
| Demo 2 | Introduction and documentation |
| Period | 2014–2016 |
Technical notes
The decisions behind it
Why do these still matter?
Inside the lab
Eight template pages and a live configurator
#keyvisual-demo-1 … -4), each a background image and a transparent content PNG moving on separate data-throttleSpeed values.TeleIconUi and Telekom-Icon, shipped as eot, woff, ttf and svg for the IE-era font stack.col-s-12 col-m-6 col-l-3 with offsets on a 12-column grid at 320 / 640 / 1024 / 1500 px; the fixed container is 1009 px wide, 1297 px above 1500.Eight pages, each a whole template rather than a component gallery: navigation-with-brandbar, navigation-without-brandbar, navigation-before-keyvisual, text-elements, text-sections, list-elements, overlay and slider.
Navigation is the largest of them. .l-navigation.nav-main holds up to seven mega-dropdown columns, with separate top-level trees for private and business audiences (Privatkunden / Geschäftskunden) next to a DE/EN toggle. Under 640 px the whole thing becomes a drill-down — .nav-mobile-container#drilldown-root with js-drilldown-back, walking one level at a time instead of stacking an accordion. The brand bar is a logo SVG plus a slogan SVG; the logged-in variant is the same page with the entire l-brandbar-wrap block deleted and <body class="l-without-brandbar"> set. That is the whole difference between the two files.
Key visuals are treated as a placement problem, so there are four of them: each .keyvisual pairs a background image with a content PNG, with data-throttleSpeed="2" on one layer and "4" on the other driving the parallax. The three navigation templates exist again under /configurator/, with a control panel beside the live page — nav style (ULTRA / Regular), 21 px or 18 px navigation type, light/dark theme, sub-navigation, icons, call-to-action, product name, private/business, dropdown type (normal / mega / none), key-visual behaviour (fixed, fixed + parallax, movable, hidden) and footer size (large dark / medium dark / small light). The panel is part of the demo: a stakeholder can flip the rules and watch the page answer.
The rest is the section vocabulary: a three-step headline scale plus a separate product headline, an eyebrow kicker and text-intro lead, two-column text/image blocks that flip with has-image-left, two-column tariff teasers (.c-text-image-product), content lists that expand in place (is-expandable, has-expandable-section), overlays in small / large / fullscreen, and Slick sliders in a dots and a title-navigation flavour. Sticky navigation gets an explicit .l-navigation-sticky-spacer element rather than a sticky-position trick.
How it was built
Two layers, Grunt, and no public repository
Two style layers, intentionally kept apart. components.min.css (81 KB) is the brand base — fonts, buttons, forms, tables, icons, the 12-column grid — and a second sheet, rm-visual_consistensy.css (70 KB), owns everything the templates add: brand bar, navigation, footers, sections, teasers and the configurator. The same split holds in JavaScript (components.min.js 68 KB, rm-visual_consistensy.js 110 KB). The rm- prefix is the project's internal name, Ruhmesmeile; the demo pages title themselves "VC" for visual consistency.
The conventions are readable in the class names and they never drift: l- for layout (.l-section, .l-footer, .l-navigation), c- for components (.c-brandbar, .c-text-image-wrap), is- / has- for state (.is-dark, .is-sticky, .is-expandable, .has-dropdown), and js- for behaviour hooks (.js-drilldown-back, .js-open-mobile-menu) so script and style never share a selector. Responsive helpers are classes too: hidden-m, hidden-l, hidden-xl, text-s-left.
The build is documented in the introduction, and it is a Grunt build. npm install pulls the devDependencies; grunt tests then distributes, with --force carrying it past a known csslint false positive on @-moz-document; dist-css, dist-js, dist-html and dist split the outputs; grunt watch rebuilds on change with livereload. CSS is compiled by Ruby Sass (grunt-contrib-sass, Sass 3.4.10 on Ruby 2.0.0p247), checked by scss-lint 0.33.0, JavaScript is unit-tested with QUnit under PhantomJS, and the 17-page documentation is generated by Jekyll 2.2.0 from Markdown. jQuery 1.11.2 loads from Google's CDN, and html5shiv and Respond.js sit behind an <!--[if lte IE 8]> conditional — IE8 was a supported target, not a footnote.
The published versions read like the tooling era they come from. The release notes run from 2.0.0-alpha [12.06.2014] through 2.0.0-beta.10 [01.06.2015], 2.0.0 [08.06.2015] and 2.0.1 [26.06.2015] — twelve dated prereleases in a year — alongside pinned dependency versions (npm 1.3.11, DevKit 4.7.2 built 2013-02-24, Jekyll 2.2.0). That is Grunt tasks, Ruby Sass, Jekyll and PhantomJS: before bundlers, PostCSS, ES modules and token pipelines were the default. The deployed files carry their own stamps — the lab serves Telekom Components v2.1.0 [2016-10-17], the introduction v2.0.1 [2015-06-25], both "Copyright 2014–2016 Deutsche Telekom AG" — so the system kept shipping after the introduction documented it.
components.min.*, rm-visual_consistensy.*, the optional theme-bevel, theme-dark and theme-debug sheets the documentation site loads, and the introduction's own installation and release notes.Links
Where to find this one