About Project
For the 2025 launch of the new ZDF streaming platform, I led the conception and development of the 'DetLines' design system as a UI Designer at JAKALA. In close partnership with ZDF, we transformed the visual vision into a comprehensive, cross-platform design and component library. This system serves as ZDF's new digital foundation: it ensures visual consistency across all products and interfaces while providing a future-proof framework for efficient development on web, mobile apps, and smart TV. Furthermore, it establishes the design cornerstone for the major strategic 'Streaming OS' initiative in cooperation with ARD.
Areas
Design System
Strategy
Cross-Platform
Client
ZDF bei JAKALA Germany
Industry
Media & Entertainment
Why DetLines?
With a vast ecosystem of ZDF applications, a shared foundation became essential to ensure an inclusive and high-performance streaming experience. The resulting design system consolidates technical expertise, integrates editorial requirements, and accelerates workflows. By using reusable, consistently named components across both design and code, new features can be implemented significantly faster. Clear naming conventions ensure that building blocks are easy to find and streamline team alignment. At the same time, handoffs become more precise, QA processes more efficient, and reuse rates increase. This foundation simplifies onboarding, fosters knowledge transfer, and strengthens the collaboration between design and development teams.
Foundation: Tokens, Grids, and Styles
The system is built on central design tokens for colors, typography, spacing, interactions, and responsive grids. These ensure a consistent look and feel across all touchpoints while providing full scalability: any adjustment is managed centrally and propagates immediately across all products.
Components, Patterns, and Pages
Based on these design tokens, we create reusable components such as buttons, input fields, and notifications. These are then assembled into more complex patterns like navigation bars, modals, or hero modules. These modular building blocks can be flexibly combined and adapted to specific platforms, resulting in brand-consistent interfaces. Platform-specific enhancements—including hover states, keyboard focus, and native controls—ensure that all interfaces are implemented consistently and remain context-aware.
Documentation and further development
All rules, components, and examples are centrally documented in Zeroheight and closely linked to code samples in Storybook. This establishes a consistent "Single Source of Truth" with identical components across Figma, documentation, and code. DetLines is continuously evolving, featuring more flexible theming options, a more automated tokenization pipeline, and additional guidelines to systematically integrate new features.
