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)
White (use preferably with black background)
Orange with grey text
Typography
Open Sans
Oskari Otter
Oskari Otter is the maskot for Oskari Community. Use it with care.
Primary colors
Yellow
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
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
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
Icons
- Preferably use this Icon library for symbols
Sources
- New colors from a design by NLS-FI in 2019
- OLD colors from UX Guide from 2015
Last modified: Fri Mar 31 2023 13:15:51 GMT+0300 (Eastern European Summer Time)