Helsinki Design System (HDS)

For example, citizens of Helsinki need to:

The Helsinki Design System was created to unify the user experience

HDS is part of the city strategy

HDS is a tool for building the digital presence and brand of the City of Helsinki. HDS supports creating equal and functional city services.

Digitalisation is a key enabler of city services and the new city strategy. The city strategy emphasises creating accessible services for all citizens, regardless of the time and place. HDS provides building blocks for such services and enables projects to solve actual user problems instead of rebuilding essential elements. HDS has accessibility baked in so that the end user projects using the ready components are one step closer to accessible services.

The brand of Helsinki is present in the physical and digital worlds. One Helsinki is the guideline for visual identity in digital services. The goal is for digital services and websites to be recognised as the City of Helsinki services at first glance, emphasising consistent user experience and trust towards city services. HDS is a cornerstone for building this consistent user experience and bringing the brand to the digital world.

HDS team vision consists of five cornerstones

Multi-disciplinary collaboration

The City of Helsinki didn't buy a ready design system but instead gathered the best professionals in the same team. This way, the City of Helsinki owns and maintains the design system. When team members change, the processes but also the existing design system must be well documented so that it's possible to transfer the knowledge.

HDS is developed as an open-source project so that anyone can benefit from it. The source code is available onGitHubfree of charge, and even the designs are shared for those interested. Building an open-source design system has many valuable points:

• Open-source is one way to share the benefits to larger community
• Open-source projects enables collaboration with other cities and companies as well, allowing contributions from the community
• Open-source creates transparency

A fundamental principle is to pay attention to accessibility from the first drafts to the final component. Accessibility specialists audit every component before we release it.

Accessibility is ensured throughout the process

HDS ensures accessibility in every stage of component development. HDS components always meet at least the WCAG 2.1 AA level and often reach the AAA level. HDS components and patterns are tested with the newest NVDA on Windows and VoiceOver on Mac and iOS.

Collaboration and support are built-in into the processes. The City of Helsinki has a dedicated slack channel to handle discussions and requests from the projects across the city organization.

Some of our key metrics