Visual Style Guide for Oskari

Version 1.0

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

The Visual Style Guide is a living document, initiated with the goal of developing a consistent message and image for Oskari. It is a “living” document because we expect it to expand as we cover more use cases where visual consistency is important and can be described using simpler rules. The standards and simple policies described here are designed to maintain the uniformity of presentation necessary for successful promotion and marketing efforts for the Oskari project.

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

Logo

Black (use preferably with white background)

Black svg


White small (use preferably with black background)

White (401 * 114)

White svg


Orange with grey text

RGB svg


Typography

Open Sans

Oskari Otter

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

Primary colors

Yellow

NEW:

  • #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

NEW:

  • #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

NEW:

  • #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

NEW:

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

Icons

Sources

Last modified: Tue May 26 2020 16:58:22 GMT+0300 (Eastern European Summer Time)