Shadow

Stable

Shadows can be used under certain elements to create visual distinction for content that otherwise would be hard to distinguish for the visually impaired or remain unnoticed.

Shadows are not officially part of City of Helsinki brand
Shadows should be used very sparingly if at all and always only to allow greater visual contrast between elements.

Principles

  • Shadows are not used to signify elevation of inline elements in HDS. Elements that require distinction, can however have shadows applied.
  • Do not use shadows to highlight elements. Elements with shadow around them should only have it for visual clarity.
  • Never use shadows on typography (heading nor body). Primary typographic contrast should always rely on colour contrast.
  • Never use shadows for effect. For the City of Helsinki brand to remain intact, do not rely on style based effects of any kind.

HDS offers examples of shadows used in carefully selected components that float on top of other content, such as Notification toast variant and Dialog.