Helsinki Design System
Helsinki Design System
Getting started
Guidelines
Visual assets
Design tokens
Components
About
Resources
Contributing

Introduction

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 building blocks

The Helsinki Design System consists of several parts:

  • For designers, HDS offers Abstract libraries and downloadable design kit. Both include design files 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) which provide modular, accessible components for building scalable digital services efficiently.
  • For all, HDS offers visual assets like icons and logos help keeping the visual language consistent.
  • For all, HDS offers documentation site which 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.