Helsinki Design System (HDS)

# Helsinki Design System (HDS) — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by City of Helsinki. "Helsinki Design System (HDS)" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Helsinki Design System (HDS)
**Owner:** City of Helsinki
**Official documentation:** https://hds.hel.fi/
**Visual character:** City-transport color coding — Bus blue, Tram green, Brick red — set in Helsinki Grotesk with Nordic squared-off candor.

---

## Summary

Open-source design system for the City of Helsinki's digital services.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Bus Blue | `#0000bf` | `--color-bus` | Primary brand and actions |
| Coat of Arms Blue | `#0072c6` | `--color-coat-of-arms` | Secondary blue |
| Black 90 Text | `#1a1a1a` | `--color-black-90` | Primary text |
| White | `#ffffff` | `--color-white` | Surfaces |
| Black 5 | `#f1f1f1` | `--color-black-5` | Subtle background |
| Black 20 Border | `#cccccc` | `--color-black-20` | Borders |
| Brick Red | `#bd2719` | `--color-brick` | Errors |
| Tram Green | `#008741` | `--color-tram` | Success |
| Summer Yellow | `#ffc61e` | `--color-summer` | Highlights |

## Typography

- **Body:** Helsinki Grotesk — weights 400, 500, 700 — `'Helsinki Grotesk', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xl | `48px` | `56px` |
| heading-l | `32px` | `40px` |
| heading-m | `24px` | `32px` |
| body-m | `16px` | `24px` |
| body-s | `14px` | `20px` |

## Spacing

Base unit: `4px (spacing-4-xs)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| box-shadow-m | `0 2px 10px 0 rgba(0,0,0,0.07)` |

## Quick start (CSS)

```css
/* Helsinki Design System (HDS) — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://hds.hel.fi/ */

:root {
  /* Color */
  --color-bus: #0000bf; /* Primary brand and actions */
  --color-coat-of-arms: #0072c6; /* Secondary blue */
  --color-black-90: #1a1a1a; /* Primary text */
  --color-white: #ffffff; /* Surfaces */
  --color-black-5: #f1f1f1; /* Subtle background */
  --color-black-20: #cccccc; /* Borders */
  --color-brick: #bd2719; /* Errors */
  --color-tram: #008741; /* Success */
  --color-summer: #ffc61e; /* Highlights */

  /* Typography */
  --font-body: 'Helsinki Grotesk', Arial, sans-serif;

  /* Type scale */
  --text-heading-xl: 48px /* line-height 56px */;
  --text-heading-l: 32px /* line-height 40px */;
  --text-heading-m: 24px /* line-height 32px */;
  --text-body-m: 16px /* line-height 24px */;
  --text-body-s: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-default: 0;

  /* Elevation */
  --shadow-box-shadow-m: 0 2px 10px 0 rgba(0,0,0,0.07);
}
```

## Engineering profile

- **Ships for:** Web Components, React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Helsinki Design System (HDS) by City of Helsinki — Open-source design system for the City of Helsinki's digital services. Character: City-transport color coding — Bus blue, Tram green, Brick red — set in Helsinki Grotesk with Nordic squared-off candor. Use a primary colour near #0000bf, the typeface "Helsinki Grotesk" (or a close equivalent), corner radius around 0, a spacing rhythm on a 4px (spacing-4-xs) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Helsinki Design System (HDS) documentation](https://hds.hel.fi/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/helsinki-hds) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._