Skip to main content

Introduction

Yle Design System (YDS) is the shared foundation for Yle's digital services. Designers and developers get the same building blocks — design tokens, components, icons and guidelines — so services stay consistent, accessible and on-brand without every team solving the same problems again.

Why YDS exists​

  • A shared language. Designers and developers use the same names for the same things, in Figma and in code.
  • Build once, use everywhere. Common UI solutions are built and tested once and reused across services, so teams can focus on what is new.
  • Accessibility and brand built in. Components and tokens carry Yle's visual identity and accessibility requirements, so services don't have to reinvent them.

What YDS covers​

  • Design tokens: colours and themes, typography, spacing, border radius, borders, shadows and transitions.
  • Components: accessible, generic UI building blocks such as buttons, form controls, notifications, dialogs and navigation, for React and React Native, with matching Figma components.
  • Icons and logos: basic icons, illustrative icons, Yle logos and graphical assets such as age-rating badges.
  • Infographics: colour themes, icons and chart components for data visualisation.
  • Guidelines: usage, content and accessibility guidance for each component, plus design principles such as motion.

What YDS doesn't cover​

  • Service-specific components and layouts. YDS components are deliberately generic building blocks. Services compose them into their own views, and components that only one service needs stay in that service.
  • Native iOS and Android components. Native apps can use YDS icons and colour tokens, but YDS doesn't provide native UI components.
  • Brand guidelines beyond digital UI. Marketing and other non-digital touchpoints follow Yle's brand guidelines.

Who it's for​

  • Designers work with the Figma libraries or prototype with AI agents. See For designers.
  • Developers use the npm packages. See For developers.
  • Everyone building Yle's services, product owners and editors included, can use these docs to see what is available and how it is meant to be used.
  • AI agents read the documentation as plain Markdown and install the same packages. See For AI agents.

Accessibility​

YDS aims to meet WCAG 2.2 level AA in every component and token pairing. Components handle keyboard interaction, focus, semantics and colour contrast. Services remain responsible for their content, page structure and how components are combined. Each component page has an Accessibility section that lists what the component provides.

How YDS is maintained​

Yle's design system team maintains YDS. Designers and developers from Yle's services contribute to it, and new components start from needs in the services. See Support and contributing for how to ask, report and propose.

Next steps​