Overview

YDS is made of a few parts that share the same tokens and names. Design tokens start as Figma variables and are built into code formats in @yleisradio/yds-core, so a colour or spacing value means the same thing in a design file and in an application.

Part	Used for	Where
Documentation	Guidelines, usage, API reference	This site
Figma libraries	Designing with components, tokens and icons	YDS Foundation and others, see below
npm packages	Building with tokens, components, icons and fonts	Yle's GitHub Packages registry, see below
Storybook	Trying out components and their props	Storybook
CDN	Fonts and native icon files without installing packages	design-system.cdn.yle.fi, see below
Source code	Packages, docs and Storybook	GitHub

What each part contains

• Tags show the platform packages: all works anywhere (CSS, JavaScript, SVG); react and react native are separate packages with those suffixes. For example, yds-components react is @yleisradio/yds-components-react.
• Dotted boxes are 0.x packages: usable, but their APIs may still change between minor versions.
• In the diagram below, yds-core stands for the token and theme packages, yds-icons for the icon packages and yds-components for the component packages.

How the parts connect

• Tokens are defined as Figma variables and built into CSS, JavaScript, SCSS, Less and Android formats in @yleisradio/yds-core.
• Icons are drawn in Figma, exported as SVG and generated into the icon packages for web, React and React Native.
• Components are built on the tokens and icons, shown in Storybook and released as npm packages together with the token and icon packages.
• Services and prototypes install the packages and follow the documentation. What they learn comes back as feedback and contributions to the Figma libraries and the code.

Figma libraries

Library	Contents
YDS Foundation	Design tokens as Figma variables, light and dark themes, text styles and shared components
YDS Global Colors	Global palettes and colour swatches
YDS Icons and Logos	Basic icons, illustrative icons, logos and graphical assets
YDS Infographics	Infographic colour themes, weather symbols and examples of simple infographic components

How to enable them: Using YDS in Figma.

Packages

All packages are published under the @yleisradio scope to Yle's GitHub Packages registry. Installing them requires access: see For developers.

Package	Contents	Platform
@yleisradio/yds-core	Design tokens and themes as CSS custom properties, JS/TS constants, SCSS, Less and Android colour resources	All
@yleisradio/yds-fonts	Yle Next font files	All
@yleisradio/yds-components-react	React components	Web
@yleisradio/yds-components-react-native	React Native components	Mobile
@yleisradio/yds-icons	Icon SVG files and icon name types	All
@yleisradio/yds-icons-react	Icons as React components	Web
@yleisradio/yds-icons-react-native	Icons as React Native components	Mobile
@yleisradio/yds-theme-custom	Generating accessible custom themes from a colour combination	Web
@yleisradio/yds-infographic-components-react	Column, line, area and donut charts, legends and accessible data tables	Web
@yleisradio/yds-infographic-icons	Infographic icon SVG files, such as weather symbols	All
@yleisradio/yds-infographic-icons-react	Infographic icons as React components	Web
@yleisradio/yds-infographic-icons-react-native	Infographic icons as React Native components	Mobile

Release notes for every package are in GitHub releases.

Storybook

Storybook shows every React component in isolation, with controls for trying out props and states. Component pages on this site link to the matching story.

React Native components have their own Storybook in the YDS repository. It isn't published on the web: run it locally on an iOS or Android simulator with yarn storybook:native. See the repository README for setup.

CDN

design-system.cdn.yle.fi serves static files that don't need a package install:

• Fonts: fonts.css loads Yle Next with @font-face rules. See Load Yle Next.
• iOS icons (SVG): basic icons, illustrative icons
• Android icons (VectorDrawable): basic icons, illustrative icons