# Yle Design System (YDS)

> Yle Design System is a shared design system for Yle (the Finnish Broadcasting Company).
> It provides reusable UI components, design tokens, icons, and design principles
> for building consistent user interfaces across Yle products.

Documentation site: https://design-system.yle.fi

## Full documentation

- [Complete documentation (single file)](/llms-full.txt)

## Get started

- [for-ai-agents](/llm/get-started/for-ai-agents.md)
- [for-designers](/llm/get-started/for-designers.md)
- [for-developers](/llm/get-started/for-developers.md)
- [introduction](/llm/get-started/introduction.md)
- [overview](/llm/get-started/overview.md)
- [support](/llm/get-started/support.md)

## Components

- [index](/llm/components/index.md)
- [Accordion](/llm/components/Accordion/Accordion.md)
- [ActionMenu](/llm/components/ActionMenu/ActionMenu.md)
- [Badge](/llm/components/Badge/Badge.md)
- [BannerNotification](/llm/components/BannerNotification/BannerNotification.md)
- [BottomSheet](/llm/components/BottomSheet/BottomSheet.md)
- [Button](/llm/components/Button/Button.md)
- [ButtonGroup](/llm/components/ButtonGroup/ButtonGroup.md)
- [Checkbox](/llm/components/Checkbox/Checkbox.md)
- [ChoiceBox](/llm/components/ChoiceBox/ChoiceBox.md)
- [ChoiceButton](/llm/components/ChoiceButton/ChoiceButton.md)
- [ComboboxSingleSelect](/llm/components/ComboboxSingleSelect/ComboboxSingleSelect.md)
- [Dialog](/llm/components/Dialog/Dialog.md)
- [DropdownMenu](/llm/components/DropdownMenu/DropdownMenu.md)
- [DropdownMenuGroup](/llm/components/DropdownMenuGroup/DropdownMenuGroup.md)
- [FormElementDescription](/llm/components/FormElementDescription/FormElementDescription.md)
- [FormElementLabel](/llm/components/FormElementLabel/FormElementLabel.md)
- [FormGroupLabel](/llm/components/FormGroupLabel/FormGroupLabel.md)
- [Link](/llm/components/Link/Link.md)
- [LiveSearchInput](/llm/components/LiveSearchInput/LiveSearchInput.md)
- [Menu](/llm/components/Menu/Menu.md)
- [Modal](/llm/components/Modal/Modal.md)
- [NavigationTabs](/llm/components/NavigationTabs/NavigationTabs.md)
- [Notification](/llm/components/Notification/Notification.md)
- [PageIndicator](/llm/components/PageIndicator/PageIndicator.md)
- [ProgressBar](/llm/components/ProgressBar/ProgressBar.md)
- [Radio](/llm/components/Radio/Radio.md)
- [SearchInput](/llm/components/SearchInput/SearchInput.md)
- [SectionTabs](/llm/components/SectionTabs/SectionTabs.md)
- [Select](/llm/components/Select/Select.md)
- [Slider](/llm/components/Slider/Slider.md)
- [Spinner](/llm/components/Spinner/Spinner.md)
- [Switch](/llm/components/Switch/Switch.md)
- [Tag](/llm/components/Tag/Tag.md)
- [TagFilter](/llm/components/TagFilter/TagFilter.md)
- [TagLink](/llm/components/TagLink/TagLink.md)
- [TextArea](/llm/components/TextArea/TextArea.md)
- [TextInput](/llm/components/TextInput/TextInput.md)
- [ToastNotification](/llm/components/ToastNotification/ToastNotification.md)
- [YdsThemeProvider](/llm/components/YdsThemeProvider/YdsThemeProvider.md)

## Patterns

- [index](/llm/patterns/index.md)

## Design Tokens

- [border](/llm/design-tokens/border.md)
- [border-radius](/llm/design-tokens/border-radius.md)
- [global-colors](/llm/design-tokens/global-colors.md)
- [index](/llm/design-tokens/index.md)
- [shadows](/llm/design-tokens/shadows.md)
- [spacing](/llm/design-tokens/spacing.md)
- [theme-colors](/llm/design-tokens/theme-colors.md)
- [transitions](/llm/design-tokens/transitions.md)
- [typography](/llm/design-tokens/typography.md)

## Icons and Logos

- [graphical-assets](/llm/icons-and-logos/graphical-assets.md)
- [icons](/llm/icons-and-logos/icons.md)
- [illustrative-icons](/llm/icons-and-logos/illustrative-icons.md)
- [index](/llm/icons-and-logos/index.md)
- [logos](/llm/icons-and-logos/logos.md)

## Design Principles

- [index](/llm/design-principles/index.md)
- [motion-language-principles](/llm/design-principles/motion-language-principles.md)

## Using YDS

- [breaking-changes-in-v3](/llm/using-yds/development/breaking-changes-in-v3.md)
- [css-conventions](/llm/using-yds/development/css-conventions.md)
- [get-started-with-v3](/llm/using-yds/development/get-started-with-v3.md)
- [styled-components-to-css](/llm/using-yds/development/styled-components-to-css.md)