We want to ensure our customers have a consistent experience when interacting with our products across all digital platforms. To facilitate better understanding for our customers we have created guidelines that follow industry standard best practices.
User Interface
Accessibility
In General
For the smart.com rollout in 2022, all websites, tools and technologies are design to follow WCAG 2.1 Level A regulations.By providing an accessible website, smart ensures that all users, including people with disabilities, have a good user experience and can easily access information. This should always be considered in the design. The following links and recommendations are intended to provide guidance. Web accessibility includes all disabilities that affect access to the web, including:
- auditory
- cognitive
- neurological
- physical
- speech
- visual
- age-related impairments
Testing Tools
The following tools can help with the design and programming of accessible content:
- NVDA Screen Reader Software
- NVDA Focus tool
- Structured Contents Bookmarklet
- Web Developer Toolbar
- WAVE Chrome Extension
- Color Contrast Analyser (CCA)
- headingsMap (Chrome)
- headingsMap (Firefox)
- WCAG Contrast checker (Chrome)
- WCAG Contrast checker (Firefox)
Grid & Spacing
Our grid significantly determines the design of our digital touchpoints. Our grid must be strictly adhered to, as the spacing is defined via the grid.
Breakpoints and sizes
There is a matching grid for every viewport. Our grid is based on rem values (1rem = 4px) and is divided into seven breakpoints.
| 1rem = 4px | XS | S | M | L | XL | XXL | Oversize |
| <576px | ≥576px | ≥768px | ≥992px | ≥1200px | ≥1440px | ≥1680px | |
| Container | 332px | 488px | 720px | 920px | 1180px | 1320px | 1552px |
| Columns | 4 | 4 | 12 | 12 | 12 | 12 | 12 |
| Gutter | 3rem | 6rem | 3rem | 4rem | 5rem | 6rem | 8rem |
| Margin | 5,25rem | 11rem | 6rem | 9rem | 11,5rem | 15rem | 16rem |
Examples mobile and desktop grid
To understand our grid, you will find two examples (one for desktop and one for mobile).
Buttons
Buttons are graphical control elements that provide users a triggered event. They must contain a clear actionable text and additionally may contain icons. Buttons are more visually dominant than text links. They either guide user through the content as a visual highlight and/or act as a “call to action“.
Primary Buttons
Primary buttons are used when a direct purchase impulse should be triggered with a direct reference to the car. The version with icons is used when an item is added to the shopping basket or a purchase is completed.
Primary buttons always use the primary black or white color, always fully colored - considering the requirements for sufficient contrast.
Secondary Buttons
Secondary buttons are used when no direct purchase impulse is desired. These buttons lead through the digital application and mark normal command and control elements.
Secondary buttons only use black or white, only as an outline - considering the requirements for sufficient contrast.
Buttons – Structure
Buttons on image backgrounds
Primary Buttons black
Primary Buttons white
Secondary Button black
Secondary Button white