Design hints

When talking to designers, valuable design hints have been shared with us. We started to add them here.

Creating a new component?

Here are some design details that we try to keep consistant:

  • Use sizes (height, width) that can be devided by 8 px.
  • Use "our" icons and pictograms for shapes, etc.
  • Make edges of things properly square with hard edges.
  • If you want to communicate that there is interactivity and that the component is clickable, make the edge rounded (4 px or .25em) and use the colour Dark Blue 2. We do this to make those components stand out a little from everything else.
  • Check the Style tab on other components for hints on spaces, sizes, use of colours. Try to keep with the SEB style.

Also, stay in touch with the design discussions in Github.

Designing for an internal audience?

Keep in mind that the default size setting on SEB:s computers, is "Medium - 125%". This means that anything you see from our own computers is presented 25% larger than on other computers.

Black is not always black

The default text colour is nearly black, #444444 to be exact.
And link colour is Dark Blue 2.

Anything you would like to share?

Let us know! designlibrary@seb.se