Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFooterIconKorosPrinciplesAccessibilityUsageDemos & APILoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Koros

StableAccessible

Koros, also known as Wave motifs, are part of the visual identity of City of Helsinki. The Koros can be used as visual elements, for example as part of the hero image or the footer and as a divider of content in the user interface.

Principles

  • Koros width should always match the screen width.
  • Koros is a very powerful visual element. Use them sparingly in one view.
  • Koros should only be used as filled. Do not use empty fill koros with borders.
  • Use koros as part of a background. Do not create new visual elements using koros.
  • It is allowed to animate Koros shapes (not included in the HDS yet).

Accessibility

  • It is allowed to use Koros in all brand colors. When choosing colours, refer to colour guidelines to ensure accessibility.

Usage

There are five Koro styles. An added visual interest is brought to the identity by means of the Koros. Using Koros adds high visual impact and makes the user interface recognisable as part of Helsinki city services. You can read more about using Koros in Helsinki Visual Identity Guidelines - Wave motifs.





React code example:

<Koros type="basic" />
<Koros type="beat" />
<Koros type="pulse" />
<Koros type="wave" />
<Koros type="storm" />

Demos & API

Core

Koros in hds-core

React

Koros in hds-react

Koros API