Visual Style Guide for Oskari
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.
Black (use preferably with white background)
White (use preferably with black background)
Orange with grey text
Oskari Otter is the maskot for Oskari Community. Use it with care.
- #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
- #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
- #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
- Preferably use this Icon library for symbols
- 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)