Logo

The logo is an extension from the main EDF logo. Think of the turbine from the EDF logo as a brush- each brush-stroke on the IZI logo, is a stroke with the turbine on paper.

Our logo symbolizes playfulness and de-dramatizes the notion of home renovations. It evokes a notion of being approachable, which refers to one of our main purpose.

Download the logo here.

Layout

The design team at IZI follows the 8px rule. Every measurement should be divisble by 8. This allows for continued consistency across teams and platforms. It also allows for quicker design process and easier design-decisions.

If you want to read more about the practise, check out Google's nifty handbook.

Colors

Color is one of the cornerstones of our designsystem. It makes our brand stand out and helps keep consistency across teams and platforms. We use colors to highlight certain areas and help guide our users through their journey and intended destination. Our colors are the key to set the tonality and to paint the scene of where our users navigate on their journey.

We have chosen a system of primary, secondary, and additional colors.

With bold, bright and playful colors, we tell our story.

Primary LIGHT

#1373F3

PRIMARY

#1669D8

Primary DARK

#095BC8

Secondary LIGHT

#394E98

SECONDARY

#001A70

Secondary DARK

#0A1B55

Turquoise LIGHT

#29E0E7

TURQUOISE

#0CCCD3

Turquoise DARK

#06BAC2

EDF LIGHT

#FF814F

EDF

#FE5716

EDF DARK

#FB3B0F

Body text

#0C273E

Grey Light

#F9F9FB

Grey

#F3F4F8

Grey Dark

#A8AFBC

Error

#F53669

Warning

#F3CE28

Success

#22D788

Typography

Our primary typeface is Noto Sans. We use this as a body typefont as it works extremely well across all platforms. It renders fast and is optimized for web usage.

Our additional typeface is TT Norms. We use it in areas we want to catch the user's attention, such as titles and CTA's. It's more of a traditional sans serif with a simple, clean and modern look. As we rely heavily on imagery, icons and patterns on our site - Norms offers a symetric form that is easy to read and balances well with our somewhat busy site. Just a heads up - don't forget to turn off the ligature.

We also use a logic of desktop vs responsive. In the sketch file, we separate all font sizes based on screen width. That means that anything below 769px is considered as responsive.

Body text

Noto Sans

Dark mode

Body

16/24

Regular

Mignonne

14/21

Regular

Perle

12/18

Regular

Titles

TT Norms

Dark mode

Mega

58/72

Bold

Hero

42/44

Bold

H1 Heading

34/46

Bold

H2 Heading

28/36

Bold

Lead Entry

20/25

Bold

Shadows

Shadows are a great way of creating depth perception. We use it mostly when we want to highlight certain areas - both on hover interaction and on static components.

The logic is inspired from the 8px rule described earlier. The density of the shadows multiply for each iteration. Each weight doubles as you increase.

We try to not use the shadows too often as it quickly can become over-powering.

Z-1

Z-2

Z-4

Z-8

Z-16

Z-24

Icons

To streamline and simplify our work-progress and hand off to the integration, we've chosen to keep it simple by using Font Awesome's library.

Of course, Font Awesome can't cover all cases. Custom icons are allowed. Though, only if FA's library lacks the icon, or if argument to create a custom icon is strong enough.

Download the SVG's here.

Illustrations

We use illustrations as a visual aid when embarking the user into their experience. It's important that the drawings take into consideration the context, the modality of the user and the end goal. To be direct, clear and meaningful.

We also welcome humor into the illustrations. If we can manage to put a smile on our user's face, we count that as a win! Not only that, but psychologically, it puts the user in a positive mental state. This leads to a positive experience and (hopefully) a positive exit.