Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Dark mode

What to consider and do when designing with dark mode

Guidelines

Short description

Dark mode is a dark-themed user interface where colours are used sparsely. The background is dark, the text is light, components are mainly in a dark grey shade but some components are light or coloured. It has some advantages for low-vision users, users in dark environments, or users who spend a lot of their daily hours in front of a screen.

Dark mode can help with improving battery life, applications with dark mode use less energy than applications with light mode.

When and how to use it

Use dark mode when it is important to give the user the option to choose between dark and light mode. Design for both light mode and dark mode if you are working with a hybrid design. Some things are different between dark mode for native and dark mode for web and hybrid, read more about it at Dark mode for hybrid

Behaviour

Dark mode uses the same patterns and components as SEB’s light mode, the only difference is the colours.

Colours

The colours in dark mode are similar but different from SEB’s default colours. The colours are desaturated to increase the readability and so that they don’t visually vibrate against the dark mode.

Colours are used sparsely and only used on smaller surfaces to reserve most of the theme for grey surfaces.

An example of how colours are used in dark mode

Create a feeling of depth

At SEB we use a dark grey (#121212) instead of pure black as the background colour, this allows us to display discrete shadows on the background and present a good level of contrast between background and text for the user (white text on black can increase eye strain due to the high level of contrast). In light mode we create a feeling of depth with shadows, the shadows in dark mode are very discrete so we support the feeling of depth by changing the tone of grey to a lighter shade. This means that every element placed on the background, or another element should have a lighter tone of grey than the object underneath.

An example of elevation in dark mode

Allow the user to choose between dark and light mode

Dark and light mode has different advantages depending on the users’ vision, environment and preferences. Let the users choose the theme by themselves.

Components

Dark mode uses the same patterns and components as SEB’s light mode, the only difference is the colours. Most of the components are translated to a dark grey component with light grey details. The buttons are the same or almost the same for both dark mode and light mode, this is to ensure a strong brand recognition no matter the theme. The secondary button, the delete button, and the light ghost button have small changes in color in their normal state. The primary button, confirm delete button, sell button and dark ghost button looks exactly the same.

All components in light mode doesn’t have a dark mode version, are you in need of a dark mode version of a specific component? Get in touch with design library at designlibrary@seb.se.

Buttons in dark mode

Do's and don'ts

  • Give the user the option to choose between dark and light mode
  • Be sparse with colour, reserve it for smaller surfaces

 

  • Don't use SEB’s default (light mode) colours
  • Don't put objects with a darker shade on a lighter surface
  • Don't mix components from dark mode and light mode

Specification

Colours

Web dark mode

Hybrid dark mode

Hybrid dark mode

Page last updated

Feedback

Was this helpful?