Helsinki Design System
Helsinki Design System
Getting started
IntroductionFor designersFor developersGetting startedCore stylesReact components
Visual assets
Design tokens
Getting started for designers

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.

hds-core in GitHub

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.

hds-react in GitHub

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";