An Introduction to the giosg Visual Style

Just here for the files? Click here to download a package with all our new assets!

This page shows a selection of elements from the new giosg visual style. The aim is to provide a set of elements and instructions that make it possible for all designers and employees to adopt a single, consistent giosg look.

For now, this is a placeholder site primarily used to deliver the new logo files along with some documentation for the new giosg visual style. It will later be replaced by a more comprehensive collection of all the design assets and guidelines used both in the giosg services and for the giosg brand.

If you have a question about anything related to the guidelines that is not answered by this page, ask the design team. We will update the documentation as needed.

giosg Typography

This section details the typefaces and cuts used in giosg designs. The font selections are final, but the sizing and usage are very likely to change and grow as the style is further used.

The primary display typeface for headers is Rubik Bold. It is used for large headlines on the web as well as in presentations. It has a wide, slightly rounded and soft style, and combined with the body typeface, it creates a strong but friendly look.

The primary body typeface for giosg is Nunito Sans. It is used for body text across all platforms and for all text in our UI designs. For the web and in presentations it is combined with Rubik Bold for headlines, but for longer passages of text and in smaller sizes, Nunito Sans is also used for the smaller headers.

Header Types

These are some of the header styles.

Body Styles

The sizes listed here have been selected so that one font size can be used on all devices. The font is readable on mobile devices and on desktops it has a wide, modern look.

Where Are the Fonts Located?

All our fonts are included in the giosg assets pack. You can also download the fonts directly on Google Fonts:

How Can I Use the Fonts?

When creating new presentations, always use our presentation template on Google Slides (once it's made available to all). It already includes all our fonts and styles. It is best to duplicate the existing template to create a new presentation, that way you get all the assets included in the file.

If you need to create another document on Google, you can also find our fonts in the fonts menu. If they do not show up instantly, click on More fonts and search for Rubik and Nunito Sans. Note that Rubik and Rubik Mono One are not the same, and Nunito is not the same as Nunito Sans!

To install the fonts locally on a Mac, download or copy the zip files on your computer. Extract the archive. Open the Font Book app in the Applications folder. Drag the folder for both fonts into the Font Book window.

To install the fonts locally on Windows, try a bit of googling.

Delivering Files to External Parties

In order to avoid missing or broken fonts, always use Google Slides to create and present your slides. If you need to deliver a presentation to a client, export it as a PDF. This way the fonts will be included in the file.

Please note that PowerPoint files do not carry the font files over to the recipient, and the result will look broken. Avoid using PowerPoint and use Google Slides instead, or export your presentations as PDF files before sending them out.

Fallback Fonts

Some very rare cases can appear where we can’t use our brand typefaces and need to use fallback fonts instead, selected from the set of system fonts that are available on nearly all computers. These fonts are chosen because of similar characteristics with the correct fonts, but they are far from perfect. In these cases, our Rubik typeface can be replaced with Arial Black, and Nunito Sans can be replaced with Verdana.

These fonts apply only to the cases where we simply do not have a choice – if the correct fonts can be used, they must be used.

The giosg Color Palette

giosg is a truly multicolor brand, with a set of delicious colors appearing against an off-white or white background. The giosg look is fresh, bright and colorful, with contrast where it’s needed. A set of gray tones has been created to support the bright and saturated main colors, and to suit our UI needs.

Color is introduced to the layouts often, but primarily through our shapes, CTAs and other visual elements – not so much as large background areas. Whitespace is an important part of the giosg style.

Although the giosg palette contains darker tones as well, they should be used in moderation. The primary look is always darker tones on a brighter background, not the other way around. This principle can be broken in cases that demand a certain appearance, such as footers or code snippets, but should be avoided elsewhere, especially in cases where a visitor or potential customer is exposed to giosg for the first time — the first impression must always be bright and colorful.

Colors on Screen

This is the giosg color palette for all digital uses.

Colors in Print

These are giosg color tones adjusted for print. Because of differences in the color production process, exact same tones can't be achieved on screens and in print.

Note: the off-white and off-black tones should not be used for backgrounds or text in print, white and K100% should be used instead.