Overview

The Helsinki Design System (HDS) is a collection of components and design elements designed to create accessible and customizable user interfaces. The system includes React components as well as CSS styles, allowing developers to choose the best option for their projects. HDS is in sync with the Helsinki brand and undergoes an accessibility audit before release. The system is divided into three separate packages: npm for brand colors, typography, and base styles; npm for React components; and npm for the basis of HDS, including design tokens. It is developed using Lerna for script running, versioning, and creating releases, and Yarn workspaces to manage dependencies.

Features

• Accessibility baked-in: All HDS components are designed with accessibility in mind and go through a third-party audit before release.
• React & CSS: HDS components are available both as React components and CSS styles, allowing flexibility in implementation.
• Customizable: The components are designed to be easily customizable, allowing users to express their own brand styles.
• Design and Implementation in sync: HDS uses Sketch libraries that are perfectly in sync with the implementation, ensuring accurate design representation.

Installation

1. Start by checking out the HDS - For developers page if you are a developer, or the HDS - For designers page if you are a designer.
2. Install the necessary packages:
   • hds-design-tokens:

     npm install hds-design-tokens
     

   • hds-core:

     npm install hds-core
     

   • hds-react:

     npm install hds-react
     

3. Follow the package-specific instructions to integrate the HDS packages into your project.

Summary

The Helsinki Design System (HDS) is a comprehensive collection of components and design elements that prioritize accessibility and customization. It offers both React components and CSS styles, allowing developers to choose the best option for their projects. HDS is designed to be in sync with the Helsinki brand and undergoes an accessibility audit before release. The system is divided into three separate packages, each serving a specific purpose. Installation and usage instructions are provided, making it easy for developers and designers to incorporate HDS into their projects. The system also encourages community contributions and provides various channels for users to provide feedback and collaborate.