Skip to main content

Patterns

A pattern describes how to solve a recurring user need across Yle's services: what to do, why, and how to build it with YDS components, tokens and content. Patterns capture design decisions that otherwise live only in designers' heads, and write them down so that designers, developers and AI agents apply them the same way.

Patterns, principles and components​

  • Design principles describe how YDS designs in general, for example how motion guides and expresses. They apply everywhere and don't prescribe a solution.
  • Patterns solve one recurring need, such as confirming a destructive action or showing an empty state. They often combine several components with content and behaviour across a flow.
  • Components are the building blocks a pattern uses. A component page explains one element; a pattern explains how elements work together.

What a pattern page contains​

Every pattern follows the same structure, so it is quick to scan and easy for agents to apply:

  • Problem: the situation and the user's need.
  • When to use, and when not to: the conditions, with alternatives.
  • Rules: the decisions, written as explicit must, should and must not statements.
  • Solution: how the pattern works, with the YDS components and tokens it uses.
  • Behaviour and states: loading, empty, error and success states, and responsive behaviour.
  • Content guidelines: wording, with examples in Finnish where relevant.
  • Accessibility: focus, keyboard and screen reader behaviour.
  • Examples: live examples and services where the pattern is used.
  • Rationale: why this is the shared solution.

Available patterns​

The first patterns are being defined. They will be listed here as they are published.