Design Language System

2023

Getting started

The Einride Brandpad contains guidance, examples, and best practices for applying the Einride brand across a range of mediums – including digital, UI, photography and hardware. This is a living document that features latest updates as the brand continues to evolve.

For questions or feedback reach us on Slack: #design-help.

Design principles

Guiding standards

Tone of voice

Persona and writing principles

Logo

Space and usage

Color

Color system and proportions

Typography

Text, cases and weights

Layout

Columns, margins and gutters

Moodboards

User interface

How the brand moves

Physical applications

Downloads

Einride logo

Download ↓

Einride fonts

Download ↓

Einride color system

Browse on Figma ↗︎

Design language system

Go to Figma ↗︎

Inspirational mood boards

Go to are.na ↗︎

01 Design principles

Einride's design principles help to ensure that the products, solutions and content we bring to the world are coherent and speak the Einride brand.

Brave

Ambitious but not arrogant

Our design looks at the big picture, disrupting outdated standards and creating better alternatives.

Refined

Simple but with personality

From a button to a billboard – every element of our design feels balanced, practical and clear.

Optimistic

Inspiring yet realistic

Our design has a better future in mind and contributes to a world that is fair and friendly.

Resilient

Long-lasting but versatile

Our design feels timeless and fresh. It does not date in the same way that technology might.

Culture-driven

Inclusive and genuine

Our design incorporates the community and culture as part of the experience.

02 Tone of voice

Persona

The following three descriptors guide how Einride sounds, overall, as a brand. When we communicate, our voice should be:

Clean

We choose words carefully and avoid unnecessary jargon.

Intelligent

We convey sharp ideas that capture our forward-thinking nature.

Alive

We connect with audiences on a human level.

Writing principles

Einride drives change and lays the foundation for a resilient tomorrow. Our choice of words reflects how we see and move the world. Below is a toolkit to guide our execution of copy.

Our outlook:

Optimistic but not idealistic

Ambitious but not pretentious

How we engage with our audience:

Kind but not chatty

Sincere but not sentimental

How we express ourselves:

Firm but not harsh

Concise but not simplistic

03 Logo

Our logo lives with us in physical and digital applications. It's our mark, our shield, our badge of pride. Although simple in form, it contains nuanced curves and subtle shifts, and it works across many sizes. In this section, we provide guidance on using it correctly. We always show the full lockup.

Einride logos: Download ↓︎

Lockup

Hover over the image to see the clear space

Partnerships

When showing our brand beside other logos, ensure you protect the logo with enough clear space. Balance the size of other logos optically so the sizes are harmonious.

04 Color

We generally use black and white while featuring dashes of color.

Photography, video and texture are the main ways we bring color into our designs, from web pages to digital products to hardware. When we use color, we make it count.

Einride color system: Browse on Figma ↗︎

Proportions

Einride's autonomous vehicle is a fitting example of how to use color at Einride. It is mostly white (about 80%) with a black, bold face for contrast (about 20%) and color elements – like the lights – for functionality.

Text on color

Contrast is a key element to ensure readability across our designs. The color map on the right can help you find the right combination. For most colors, use tones 60 and up on light mode, and 40 and below on dark mode. The same applies to text written on top of those colors: tones 60 and up should use white text; 40 and below should use black.

05 Typography

Typography is one of our most distinctive brand elements. It sets our brand apart, and it shows that our regard for design runs down to the final detail.

Suisse Int'l, our typeface of choice, is a neo-grotesque design with sharp, clean lines. It offers strong contrast and hints at the rich legacy of post-1950s European design.

Our typographical scale was designed with two core principles in mind: contrast and restraint. There is a contrast between different text elements, such as big and bold headlines that contrast against clear and concise body copy. And there is restraint in the number of tools we use to create hierarchy in a layout: often, we use no more than two sizes.

Scale

Mega

80/80 Medium, 500

Title 1

40/48 Medium, 500

Title 2

28/32 Medium, 500

Title 3

24/32 Medium, 500

Paragraph

18/24 Book, 450

Caption

14/16 Book, 450

Upper case

ABCDEFGHIJKL

MNOPQRSTUVWXYZ

Lower case

abcdefghijkl

mnopqrstuvwxyz

Numbers

1234567890

Use monospaced numbers and slashed zeros

Punctuation

(¡¿!?.:,;…)[&&@#]{-–—|¦·}‹›«»‘’“”‚„'"•/\

Symbols

&%‰©℗®™°§¶*†‡#№

Weights

Suisse Int’l Medium

We use Suisse Int’l Medium for big headlines. In those cases,

we want the type to stand out from the rest of the content on

the page and give some extra power.

Suisse Int’l Book

The Book version of Suisse is the main weight. The Book weight

is designed to be extra readable when printed. The open counters

also help with recognition of rounded letters on screens.

06 Text mark

The text mark communicates Einride simply and consistently while avoiding logo overuse. On hardware, in physical locations, on film and in photography, the text mark creates unity in the way we communicate.

Text mark component: Browse on Figma ↗︎

Text mark

The default text mark features two lines and can be extended to a maximum of three.

Hover over the image to see the construction of the text mark.

07 Layout

Tight margins and equal gutters. A clear and easy-to-use grid system allows us to create layouts that adapt to each medium while ensuring they feel consistent.

Define columns

Our horizontal layouts have 12 columns and our vertical layouts have 8 columns.

Define margins

Start by defining the margins. The portrait A4 example uses a 16 px margin – the same as in digital layouts for mobile and tablet devices. The landscape example uses a 54 px margin suitable for text on video.

Define gutter

To keep the sleek and minimalistic look, use the same gutter width as you used for margins.

Define layout

When the grid is done, make your layout. The layout will always differ from case to case. A book, for example, would need to take slugs and spaces for fingers into consideration. But a good rule of thumb is to set the horizontal spacing to 1.5 times the size of the margin.

Application examples

Printed materials

Posters and advertising

09 Photography

Einride's photography captures everything from landscapes to people to products. It can highlight the natural world's beauty, present the human faces of Einride, document our valued partnerships, or showcase our broad range of solutions in an optimistic, human and edgy way.

People

When we photograph people, we do it in a documentary style. It's our way of telling a story through an image by capturing unplanned moments that reveal something about the subject. It should feel genuine and optimistic.

Environment

When photographing an environment, we work with natural lighting to create authentic images that convey the essence of our subject – whether the shot is taken in a warehouse or against a mountain range.

Product

Generally, products should be in use when they are photographed. Apply attention to detail to ensure they are shown in their best light. Where applicable, include real people who use the products and capture them in a natural setting. This adds a richer sense of authenticity and realism.

10 UI

Crisp, simple, and distinctively Einride. We use typography and white space as the main vehicles to create a hierarchy on the website or on the Einride Saga platform. Color is used with care, not as decoration but to guide the user and to create glanceable experiences. The Einride magic is in the details of animations, map interactions, and finer elements.

Access our UI components and templates on Figma ↗︎

Baseline

We use 8 pt grid and baseline where all items and components are set. Tight margins give the content all the space it deserves.

Mapping

Maps are an important part of how we show movement in our UI. They indicate that we are operational and that electrification is around you.

Universal

We design with everyone in mind. Our products adapt to our users and to the surrounding environment, whether that's at a desk or on the go.

11 Motion

Our brand moves purposefully. We use motion to help tell stories, elevate our designs, and emphasize the messaging.

Einride’s usage of motion falls under two categories: film and UI.

Motion in film can play a supporting role in film production (such as text and title plates, lower thirds, and transitions) or a major role when used as a storytelling device (such as infographics and visuals). It adapts to other variables such as music, tempo, screen size, shot duration, and composition.

UI in motion aims to evoke a feeling of responsiveness and organic movement – which is why its Bézier curves are strong and snappy.

Whether in film or UI, motion curves can be created in Adobe After Effects by:

1. Installing Flow (script for After Effects)

2. Loading the Einride curves library (for Flow)

Frame rate

Motion in film

The default frame rate for Einride film is 25 FPS. The same value thus applies to motion for film.

Motion

Examples

Ease in

(0.18, 0.55, 0.46, 1)

Ease out

(0.55, 0, 0.83, 0.47)

Einride text plate template

Frame rate

UI in motion

UI in motion is based on milliseconds. If the software doesn’t support this unit, use 50 FPS instead.

Motion

Easing

Ease in

(0.21, 0.69, 0.2, 1)

Ease out

(0.84, 0, 0.94, 0.65)

Ease in/out

(0.84, 0, 0.33, 1)

Motion

Duration, delay and overlapping

Duration and easing should be utilized in combination based on the use case. Default durations have been set depending on the size of the object or values of transformation.

Delay: Animation or keyframes will be delayed when the aim is to divide objects from one another.

Overlap: Animation or keyframes will be overlapped in a staggered shape when the aim is to make them feel like part of the same body.

Default duration

Suggested easings

100 ms

Ease in; Ease out

200 ms

Ease in; Ease out

300 ms

Ease in; Ease out; Ease in/out

500 ms

Ease in; Ease out; Ease in/out

Examples

12 Foiling & signage

Einride's foiling balances functionality with minimalism. It should be clearly legible to all intended readers while embodying a refined look.

The Einride logo should be placed on relatively flat surfaces with sufficient surrounding space. It can be either black or white, depending on the background color. The text mark logo can be used to share some basic information about the product.

With respect to other types of foiling, identification numbers are always placed on the lower parts of the products in a grey reflective foil, so as to be clearly visible to users. An electric green sticker detail can be added to the handles of electric vehicles and chargers, as these are the areas our users interact with.

Vehicles