Overview

Toyota Europe

Important note:

Starting with the CSS (Cascading Style Sheets) update in Summer 2017, TME is aiming at regularly (yearly) refreshing the look & feel of the websites, comparable to a yearly “window dressing” exercise. Most of these visual refreshes will be done through changes of the central CSS.

It is therefore important that all TME and NMSC departments and their agencies follow two main principles when building local variants of central content or fully local web pages and applications:

  1. Never use an element because of its “looks” - but always in the visual and functional context foreseen for it and which is explained in this style guide.

    Why?

    a) Because the visual appearance of elements is part of an overall user experience concept, that will be broken if elements are used out of context.

    b) Because TME plans to frequently update the CSS so that elements out of the foreseen context might suddenly look bad when the underlying CSS changes.

  2. When building local webpages and applications, always link as close as possible to the TME CSS structure and conventions in the code of the pages, so that it will be easy to adapt to more frequent CSS changes.

    You might choose to use a copy of the TME CSS in your local web pages & applications, so that you can control its replacement by a newer version. Ideally, replacing the CSS file should give you the visual update without the need to rewrite code.

    Please share the two points above with your agencies and technical partners if applicable

Another important note:

Another thing to take into account when consulting this styleguide is the fact that not everything should be used by NMSCs or 3rd party of the T1 project.

In fact some sections of this styleguide are reserved to the t1-client and t1-server projects.

In each styleguide pages you will find items suffixed by CORE, those may be used by any NMSCs or 3rd party of the T1 project without any "risks". But on the other hand items that are suffixed by EXTENDED are reserved to the "t1-client" & "t1-server" project and might evolved in a non-expected way for anyone using them out of those two projects.

Digital design guidelines

The following guidelines are a summary of basic online brand elements that should be used when designing for Toyota websites, content and apps. Whilst some descriptions and definitions are specific to the Toyota Europe websites, overall adherence is important to establish visual consistency across all digital touch points.

This Online Styleguide is intended as a set of examples and guidelines through the Toyota ONE website.

Please use the main menu to navigate between pages and the bottom right bar to display the components responsively.

Inspiration

Visual design research

Key design principles

Simplicity

  • All design elements must be centered on the idea of simplicity.
  • Strong simple layout responds well to mobile.

Product focus

The visual language of the new website should enhance the product not fight it.

Colour with purpose

Colour guides the user, whilst establishing the brand language.

Movement

Animations and transitions embody the brand identity.

Typography

Toyota Display remains on H1 and H2 levels, all text smaller than that changes to Noto Sans.

Buttons

Simplified library of buttons helps to signal actions clearly and consistently