Mazda Style Guide Elements

45px tall button. 13px Mazda Type Bold. Minimum padding of 23px left and right of text. Black turns to White on dark backgrounds.

All buttons turn red on hover to indicate an interaction.

The primary button has a clear stronger visual weight over the secondary button. This is to guide the user towards that action.

13px Mazda Type Bold. 2px tall rectangle for underline button starts 9px under text then shifts up 2px on hover. 18px SS-Gizmo for icons. Dark Gray and Black turns to White on dark backgrounds.

Even tertiary links turn red on hover to indicate an interaction. It’s important to note, never to make text red because it conveys confusing interaction.

Tertiary links are important elements to help not to overwhelm the user with buttons and provide a subtle way to include many buttons/links in one section.

45px tall field. 13px Mazda Type Bold for main title and 16px Mazda Type Regular for text input. All text input form field have a White fill.

1px stroke Black at 20% opacity. 2px stroke Red for selected option. Red bar should remain the width of two columns of grid (170px). 13px Mazda Type Bold. Black for active state, Dark Gray for inactive state.

The red bar is to again indicate an action but also indicate a selected state.