For developers

Helsinki Design System provides a collection of ready-made components for building accessible websites and applications that are in line with the Helsinki City Design Language.

Getting started

1. Have a look at Helsinki Design System in GitHub. You'll probably want to read the repo README first and to take a peek at the hds-react and hds-core.
2. Explore the Components documentation and HDS storybook, to see what’s there and how to implement them.
3. If you want to contribute, see the Contributing page for more information. Please follow the Git Feature Branch Workflow.
4. Take a look at Develop with Helsinki site for practical details for developing open source code for the City of Helsinki.

Core styles

The core package provides Helsinki City brand colors, typography and base styles as css-styles and variables.

React components

Helsinki Design System React library provides a collection of React component for building websites and applications. Using the components will help developers to rapidly create user interfaces that are in line with the Helsinki City Design Language as well as accessible and consistent in behavior across applications.

Using the React components library

Install the package:

$ yarn add hds-react

Import components:

import { TextInput } from "hds-react";
// or
import { TextInput } from "hds-react/components/TextInput";