Skip to main content

Yle Design System

Components, tokens, icons and patterns that Yle designers, developers and AI agents build with. Co-created by Yle employees for a more accessible and consistent customer experience. Use it and contribute to its development!

Kickstart YDS for agents​

llms.txt gives your coding agent every component, token and pattern page as Markdown.

  • Introduction

    What YDS is, what it covers and who it is for.

  • For designers

    Designing in Figma or prototyping with AI, using the same components and tokens.

  • For developers

    Package access and setup for web, React Native and native apps.

  • Components

    Accessible building blocks with usage guidance and live examples.

  • Design tokens

    Colours, typography, spacing and more, shared by Figma and code.

  • Icons and logos

    Basic icons, illustrative icons, logos and graphical assets.

Questions or ideas? See Support and contributing.