Visual Style Guide for Oskari

Version 1.1

This is Oskari Visual Style Guide. This document defines standards for the use of Oskari visual identity for marketing purposes.

Your own Oskari can be modified to what ever look you like :)

But we appreciate if you would use Oskari logo and visual style guidelines when presenting Oskari software to the community (e.g. meetups around Oskari, slideshows about Oskari and so forth). The goal is to develop a consistent message and image for Oskari.

The Visual Style Guide is evolving, so remember to check the latest guidelines from here every now and then.

This guide is based on a UX design from 2019 and a UX guide from 2015 and Oskari Otter design from 2019.

Logo

Black (use preferably with white background)

PNG: Black

SVG: Black


White (use preferably with black background)

PNG: White

PNG: White (401 * 114)

SVG: White


Orange with grey text

PNG: RGB

SVG: RGB


Typography

Open Sans

Oskari Otter

Oskari Otter is the maskot for Oskari Community. Use it with care.

Primary colors

Yellow

#ffd400 (primary-color)
#fdf8d9 (primary-light)
#ecb900 (primary-dark)

OLD:

  • #ffd400 (yellow) used as highlight color for icons and background for titles within website
  • #fdf8d9 (light yellow) used as highlight color for pop-ups and flyouts and within website panel title background
  • #f48036 (dark yellow) used with Otter and website

Secondary colors

Blue

#006ce8 (blue, light)
#003fc3 (blue, dark)

OLD:

  • #eef8ff (blue, light) used with hyperlinks and primary buttons
  • #428bca (blue) used with hyperlinks within website
  • #0091ff (blue, OLD) used with hyperlinks and primary buttons

Grey

#949494 (midgray)
#d9d9d9 (lightgray)
#595959 (darkgray)
#3c3c3c (textgray)
#fafafa (lightest-gray))
#f3f3f3 (bg)

OLD:

  • #262626 (dark grey) used with Otter and website
  • #3c3c3c (dark grey) used in map service
  • #D9D9D9 (grey) as background for titles within website
  • #e6e6e6 (grey) border color in tables
  • #f3f3f3 (light grey) background color for accordion element in Map Layers
  • #fafafa (light grey) background color for content boxes in map service

Warning-color

#f5222d (warning-red))
#fff1f1 (warning-light)

Icons

Sources

Last modified: Thu Sep 10 2020 12:09:56 GMT+0300 (Eastern European Summer Time)