Helsinki Design System
Features
- Accessibility baked-in – All HDS components are designed from the ground up to be as accessible as possible. Components go through a third-party accessibility audit before release.
- React & CSS – Components are available both as React and CSS styles. Choose the one which suits best for your project.
- Customizable – HDS components are designed to be customizable to allow expressing the vibrant Helsinki brand.
- Design and Implementation in sync – Designers use a collection of Sketch libraries which are perfectly in sync with the implementation.
Packages
HDS is divided into three (3) separate packages:
– Helsinki City brand colors, typography and base styles as css-styles and variables
– Provides HDS components implemented using React
– Basis of the HDS which includes base colors, typography etc. as design tokens.
Getting started
:wrench: Are you a developer? If yes, start by checking out HDS - For developers page.
:art: Are you a designer? If yes, start by checking out HDS - For designers page.
Helsinki Design System uses Lerna for running scripts across the repo as well as versioning and creating releases of the packages. Yarn workspaces is used to manage dependencies. This allows the separate packages to reference each other via symlinks during local development.
Using the packages in your project
See the package specific instructions on how to get started using the packages.
Setting up local development environment
Start setting up your local development by going through the steps in the development guide.
Contributing
Before contributing, it is recommended to read [HDS Contribution - Before contributing page](https://hds.hel.fi/getting-started/contributing/how-to-contribute.
We are accepting new features, feature requests and help with improving the documentation. There are multiple ways you can contribute:
- Opening issues about bugs/improvements/new features/etc.
- Opening pull requests with changes/fixes/new features/etc.
- Opening branches in Abstract to propose new component designs or design changes. More information about design contribution can be found in HDS Contribution - Design page.
- Take part in discussion and commenting new HDS features. The easiest way to do this is to browse open issues and pull requests and leave a comment! If you have an access to the City of Helsinki Slack, you may also join the discussion there. More info about the ways to contact us can be found in HDS About - Support page.