Koros
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.
- Koros should be centered and have at least 2 full wave motif tips visible.
- Do not use Koro shapes as accent elements, for example to display active elements.
- It's recommended to use one Koro size and shape through the whole service.
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.