Here you will find frequently asked questions about HDS and answers to those questions. If you do not find an answer to your question on this page, you can always contact the HDS team for more information.
General
Design
Code
Accessibility
General
What is Helsinki Design System (HDS)?
Helsinki Design System (HDS) is an open-source design system built by the City of Helsinki. It consists of tools for
development and design as well as resources and guidelines for creating user-friendly, accessible solutions for the
city.
Who is developing Helsinki Design System?
Helsinki Design System is being developed and maintained by a 5-person team. The team consists of a product owner, two
developers, and two designers. It is also very common that projects using the HDS libraries will contribute to the
development via proposing designs, bug fixes, and new features.
Can I contribute to the Helsinki Design System?
Yes! We appreciate all contributions both from inside and outside of the city organisations. Contributions can relate
to design, implementation or documentation. You can find our contribution guidelines in the
We are always happy to help you and your project if you have issues with HDS. We also appreciate feedback. You can
find the recommended contact channels in the
HDS follows the guideline of the City of Helsinki related to browser support. This means that the following browsers are officially supported
Chrome
Firefox
Safari
Versions 6 months old and newer are supported.
Note: While these three (3) browsers are officially supported by the HDS, you can still report bugs and request support related to other browsers as well. HDS team will do their best to fix issues with other browsers and versions too.
How is mobile first taken into account in HDS?
HDS components and patterns are designed to be used on mobile devices right from the start. All HDS components are fully featured both on mobile and desktop screens, meaning that features are not degraded for mobile devices.
HDS uses two (2) methods to provide components for different screen sizes. The first method is to provide responsive components that react to the changing screen size (e.g. Navigation). The second method is to provide a separate small variant that can be used both on mobile screens as well as on more information-heavy user interfaces.
