{"id":22732,"date":"2025-07-01T11:10:46","date_gmt":"2025-07-01T09:10:46","guid":{"rendered":"https:\/\/janinegollub.com\/portfolio\/zdf-detlines-design-system\/"},"modified":"2026-06-11T15:33:55","modified_gmt":"2026-06-11T13:33:55","slug":"zdf-detlines-design-system","status":"publish","type":"portfolio","link":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/","title":{"rendered":"ZDF DetLines – Design System"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Client<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tZDF<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Agency<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tJAKALA<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
Job<\/h6>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tDESIGN SYSTEM ARCHITECT<\/span>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

DETLINES \u2013 THE DESIGN SYSTEM FOR ALL ZDF PRODUCTS<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all delivery platforms. The entire product landscape is always taken into account: web, mobile apps (iOS, Android), and big screen (TV-HTML, Android TV and TVOS). With DetLines, new features and applications can be implemented efficiently, consistently and across platforms, whilst providing the team with a unified understanding of tokens, components and patterns. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Goal<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The design system is based on the Atomic Design approach, meaning that, in addition to the ZDF streaming portal, further products for ZDF can be developed efficiently at any time. A clear set of guidelines assists in the use of components and patterns across all delivery channels and platforms. This helps to avoid special cases, facilitates coordination, improves collaboration and speeds up QA processes. All components and patterns have been developed with a focus on accessibility, ensuring inclusive use. By taking into account user studies, personas and user journeys, DetLines helps ensure that new products are always developed from the users\u2019 perspective. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"ZDF\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Challenge<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The large number of different platforms (web, mobile apps, big-screen broadcasts) and the requirements and expectations placed on a streaming portal called for a thorough understanding of systemisation and a deep knowledge of the technical challenges involved. <\/p>

The new ZDF streaming portal is centred on users and their individual interests and preferences. Thanks to an improved navigation structure, users are now guided intuitively through the platform. Automated and algorithmically generated page types ensure that content is presented in a clear and organised manner. <\/p>

The aim was to set entirely new standards for a modern, intuitive and inclusive streaming portal, and to provide a contemporary response to users\u2019 growing demands through its public service personalisation strategy. <\/p>

Strategically, the launch builds on key innovations from recent years: the \u201cOne ZDF for All\u201d strategy has already significantly expanded the range of new content available for on-demand viewing. Furthermore, thanks to the collaboration within the ARD\/ZDF streaming network, content from ARD and partner broadcasters can also be accessed via the ZDF streaming portal. <\/p>

With in-house solutions such as its proprietary recommendation system, ZDF can also draw on extensive experience in automation and personalisation. <\/p>

Due to these requirements for the new ZDF streaming portal, the old components and patterns had to be completely redesigned and, for the most part, redeveloped from scratch.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Design<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Thanks to this systematisation and a newly established single source of truth, all ZDF products can now be developed and implemented in a consistent, responsive manner, with uniform accessibility. <\/p>

All components and patterns are now stored only once in Figma and in the frontend, and are referenced elsewhere. Through the constant comparison with the set design principles a uniform design and image language as well as user experience can be guaranteed across all platforms. This approach helps to speed up decision-making processes regarding new components and patterns.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Clear, innovative, visually stunning.<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The new UI design stands out for its clarity, feels instantly fresh and is visually striking. Dynamic inspiration is the driving force behind the UI design and conveys the idea of personalised, endlessly engaging content on a visual level. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Simple, clear, catchy.<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In all decisions regarding the new UI, ease of use, clarity and intuitiveness are the key factors driving our decision-making. Our aim is for users to find their way around quickly and always discover content that suits them and appeals to them. In doing so, we want to inspire them in the moment and create a \u2018wow\u2019 effect. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Primary focus on dark mode<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Taking into account the \u2018lean-back\u2019 approach and the most common usage scenarios, we see the primary focus as being on dark mode.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

A consistent user experience across all platforms and products<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Our UI relies on cross-platform and cross-product components. We aim to deliver a consistent UX across all our platforms (where technically feasible) and products, without appearing overly uniform. Naturally, we take into account the specific operational requirements of individual touchpoints. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

DESIGN<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Principles<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
01<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We design for people.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
02<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We confidently show our competences.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
03<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We create an environment that presents the content in the best possible way.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
04<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We reflect the proximity to the user in the design.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t
\n\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t
05<\/h6>\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t

We learn from user feedback and work with empathy on further development.<\/h2>\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Design approach<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

target audience<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

DetLines is aimed at all product owners, UX and UI designers, front-end developers and the QA team. Our focus on this target audience has been a key factor in shaping the structure and architecture of DetLines. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

architecture<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In parallel with the UI development of the new ZDF streaming portal and the associated concept, the DetLines design system was completely overhauled. Our team spent over two years developing the current version of DetLines. This design system consists of a Foundation Library, an Icon Library, a Core Library and the respective Product Libraries in Figma, the accompanying documentation in Zeroheight, and the front-end libraries and documentation in Storybook for the front-end. <\/p>

In this context, Zeroheight acts as the central interface between UI\/UX design and front-end development, as it provides a direct link to Figma libraries and can integrate Storybook. The library demonstrates the behaviour, characteristics and, using live\/mock data, an accurate representation of the respective components and patterns. With the new DetLines Core Library, new products for ZDF \u2013 alongside the new ZDF streaming portal \u2013 can be designed and further developed efficiently and purposefully. With the product library for the ZDF streaming portal, the product itself gains a recipe library that contains all product-specific components and patterns, whilst referencing ZDF\u2019s core components and core patterns. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\"ZDF\t\t\t\t\t\t\t\t\t\t\t
Design System Architektur <\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

A common language<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Across all departments and disciplines (PO, UI, UX, Dev, QA, etc.), we were able to agree on a consistent terminology for tokens, components, patterns, types and states. This has improved coordination and communication and helped prevent misunderstandings. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

functional patterns<\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The current shift towards a ZDF streaming portal has led to fundamental changes in functional patterns. These have been incorporated into the new DetLines and form the core of the user experience. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Visual patterns<\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The new design language and the styles developed were intended to meet the objectives and requirements set for a modern streaming portal.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Processes for further development<\/span><\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

At the same time, we have been working on processes to structure the collaboration between the product teams and the Design System team. How are new components introduced? Who decides on components? How do they reach all stakeholders, and how can we ensure that all products are designed using the core components? The aim is to ensure that components and patterns are not developed twice. As the Design System team, we actively support the product teams in their work, implement requirements quickly and efficiently, provide onboarding, and offer assistance and guidelines for implementation and use, so that DetLines remains an integral part of ZDF. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Accessibility<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

During the entire process, all patterns were constantly checked from the point of view of accessibility. The results of BITV tests enabled targeted improvements to be made and inclusive use and participation to be ensured. New components and patterns must always comply with the BITV 2.0 accessibility requirements. DetLines has accelerated these processes in all trades and allows us to react more effectively and efficiently to changes in user needs. <\/p>

With the help of extensive additional programme data, content becomes more accessible, better categorised and clearly structured. Technical advancements, combined with a contemporary design and user-friendly content presentation, create an intuitive user experience for all target groups. <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Team<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The ZDF DetLines Design System was developed using an interdisciplinary approach:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

product owner<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Product owners have provided feedback from the user\u2019s perspective, managed the team, coordinated between product teams and overseen new developments.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

DESIGN<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A team of UI\/UX designers created a Foundation Library, an Icon Library and a Core Library for all of ZDF\u2019s digital products, as well as a Product Library for the new ZDF streaming portal, in Figma. For each component and pattern, all six display options\u2014including types and states\u2014are immediately accessible, making them intuitive and quick to use for users. <\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Development<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The front-end teams for each platform created their own libraries for the core components and the product-specific components and patterns \u2013 with a focus on reusability, testability and documentation for the front-end team.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

architecture<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A Design System Architect defined the overall structure and architecture of the components and patterns for the Core Library, Recipe Library and the interaction between the various libraries in Figma.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Documentation<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A team documented tokens, components and patterns in Zeroheight, set up the integration with Figma and incorporated Storybook.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

governance<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

A dedicated design system team is responsible for maintaining, quality-assuring and expanding the system.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Client ZDF Agency JAKALA Job DESIGN SYSTEM ARCHITECT DETLINES \u2013 THE DESIGN SYSTEM FOR ALL ZDF PRODUCTS DetLines is the…
Details »<\/a><\/p>\n","protected":false},"featured_media":21833,"menu_order":0,"template":"","meta":{"_pt_project_description":"","_pt_centered_description":false,"_pt_show_tags":true,"_pt_project_meta_one_label":"Date","_pt_project_meta_one_value":"","_pt_project_meta_two_label":"Client","_pt_project_meta_two_value":"ZDF","_pt_project_meta_three_label":"","_pt_project_meta_three_value":"","_pt_project_link_text":"Launch Website","_pt_project_link_url":""},"portfolio_cats":[],"portfolio_tags":[],"class_list":["post-22732","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","pth-projects__item"],"yoast_head":"\nZDF DetLines - Design System – Janine Gollub<\/title>\n<meta name=\"description\" content=\"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ZDF DetLines - Design System – Janine Gollub\" \/>\n<meta property=\"og:description\" content=\"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Janine Gollub\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-11T13:33:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/janinegollub.com\/wp-content\/uploads\/2025\/07\/Keyvisual_final-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1312\" \/>\n\t<meta property=\"og:image:height\" content=\"1312\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/\",\"name\":\"ZDF DetLines - Design System – Janine Gollub\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Keyvisual_final-1.jpg\",\"datePublished\":\"2025-07-01T09:10:46+00:00\",\"dateModified\":\"2026-06-11T13:33:55+00:00\",\"description\":\"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/#primaryimage\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Keyvisual_final-1.jpg\",\"contentUrl\":\"https:\\\/\\\/janinegollub.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Keyvisual_final-1.jpg\",\"width\":1312,\"height\":1312},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/portfolio\\\/zdf-detlines-design-system\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/janine-gollubdirector-ux-design-freelance\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ZDF DetLines – Design System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/\",\"name\":\"Janine Gollub\",\"description\":\"Director UX Design Freelance\",\"publisher\":{\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#\\\/schema\\\/person\\\/8740173e2a493925ed953c29e2f9077b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/janinegollub.com\\\/en\\\/#\\\/schema\\\/person\\\/8740173e2a493925ed953c29e2f9077b\",\"name\":\"Janine Gollub\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\",\"caption\":\"Janine Gollub\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ZDF DetLines - Design System – Janine Gollub","description":"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/","og_locale":"en_US","og_type":"article","og_title":"ZDF DetLines - Design System – Janine Gollub","og_description":"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.","og_url":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/","og_site_name":"Janine Gollub","article_modified_time":"2026-06-11T13:33:55+00:00","og_image":[{"width":1312,"height":1312,"url":"https:\/\/janinegollub.com\/wp-content\/uploads\/2025\/07\/Keyvisual_final-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/","url":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/","name":"ZDF DetLines - Design System – Janine Gollub","isPartOf":{"@id":"https:\/\/janinegollub.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/#primaryimage"},"image":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/janinegollub.com\/wp-content\/uploads\/2025\/07\/Keyvisual_final-1.jpg","datePublished":"2025-07-01T09:10:46+00:00","dateModified":"2026-06-11T13:33:55+00:00","description":"DetLines is the central design system for all ZDF products, ensuring that users enjoy a consistent user experience across all streaming platforms.","breadcrumb":{"@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/#primaryimage","url":"https:\/\/janinegollub.com\/wp-content\/uploads\/2025\/07\/Keyvisual_final-1.jpg","contentUrl":"https:\/\/janinegollub.com\/wp-content\/uploads\/2025\/07\/Keyvisual_final-1.jpg","width":1312,"height":1312},{"@type":"BreadcrumbList","@id":"https:\/\/janinegollub.com\/en\/portfolio\/zdf-detlines-design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/janinegollub.com\/en\/janine-gollubdirector-ux-design-freelance\/"},{"@type":"ListItem","position":2,"name":"ZDF DetLines – Design System"}]},{"@type":"WebSite","@id":"https:\/\/janinegollub.com\/en\/#website","url":"https:\/\/janinegollub.com\/en\/","name":"Janine Gollub","description":"Director UX Design Freelance","publisher":{"@id":"https:\/\/janinegollub.com\/en\/#\/schema\/person\/8740173e2a493925ed953c29e2f9077b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/janinegollub.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/janinegollub.com\/en\/#\/schema\/person\/8740173e2a493925ed953c29e2f9077b","name":"Janine Gollub","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g","caption":"Janine Gollub"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/087e761f752bfcc5a483298229cb33e837e2390b37d60c1751480367a509c8f3?s=96&d=mm&r=g"}}]}},"_links":{"self":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/22732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":4,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/22732\/revisions"}],"predecessor-version":[{"id":22737,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio\/22732\/revisions\/22737"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/media\/21833"}],"wp:attachment":[{"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/media?parent=22732"}],"wp:term":[{"taxonomy":"portfolio_cats","embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio_cats?post=22732"},{"taxonomy":"portfolio_tags","embeddable":true,"href":"https:\/\/janinegollub.com\/en\/wp-json\/wp\/v2\/portfolio_tags?post=22732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}