Helsinki Design SystemResources
Guidelines
Visual assets
Design tokens
Components
Patterns
About
Contributing
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
- 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.
- Explore the Components documentation and HDS storybook, to see what’s there and how to implement them.
- If you want to contribute, see the Contributing page for more information. Please follow the Git Feature Branch Workflow.
- 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 GitHubReact 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 GitHubUsing the React components library
Install the package:
$ yarn add hds-react
Import components:
import { TextInput } from "hds-react";// orimport { TextInput } from "hds-react/components/TextInput";