Getting started with HDS

The Helsinki Design System is a shared point of reference for designers and developers that helps teams work and communicate more efficiently.

The system provides working code, design resources, and guidelines that bring predictability to the product development process and help keep the City of Helsinki brand more cohesive throughout all digital services.

Helsinki Design System structure graph

The Helsinki Design System consists of several parts:

  • For designers, HDS offers a Figma library and a downloadable design kit. Both include the main design file of all components in the HDS component library. They help designers create beautiful, usable, and accessible user experiences that follow the City of Helsinki brand guidelines.
  • For developers, HDS offers component libraries (Core and React) that provide modular, accessible components for building scalable digital services efficiently.
  • For all, HDS offers visual assets like icons and logos to help keep the visual language consistent.
  • For all, HDS offers a documentation site that collects detailed information on how to use the HDS components, design tokens, and visual assets in practice, including design principles, accessibility and usage guidelines, examples, interactive demos, and API descriptions.