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.

Usage

Example

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).
  • A koro shape can be rotated in 45 degree increments. For more information see the Angled koro variant documentation below.

Variations

Default

There are six 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.

Dense

The dense Koro variant introduces a smaller wave size with the same shapes. You can choose either the Default or the Dense variant for your project. Read more about Koro usage on the HDS Foundation - Wave motifs page.

Angled

Koro shapes can be angled in 45 degree increments. The allowed angle properties are 45deg, 90deg, 135deg, 180deg, 225deg, 270deg and 315deg. Angles outside of these options should be avoided.