| layout | page |
|---|---|
| title | Design Toolkit |
Green Navigation adheres to Google's Material Design guidelines. This toolkit is intended to be used "on top" of the Material Design guidelines, with a few changes that reflect our brand identity.
There are two versions of the logo, to be used on white or dark green backgrounds.
{: .design-logo }
{: .design-logo }
Keep a margin of the length of the diameter of the navigation icon around the logo.
{: .design-logo }
{: .design-logo }
When possible, limit the number of colors used in the interface. Use the green color as the background color for the material design toolbar, buttons, as well as to underline certain paper-elements such as paper-tabs or paper-input.
Use the orange color only to draw user's attention to critical details or alerts. Use the blue color to style elements when the green color is becoming too much.
There are three main typefaces: Roboto, Roboto Slab, and Gotham. Gotham is used only in the logo, and since it is not a free font, we resort to using the open-sourced Roboto family font in our web interfaces.
In order to maintain our web interfaces clean, please use only Roboto in them, and use color and size to emphasize elements.
Use Roboto Slab only to emphasize HTML heading elements in the wiki.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789