PostNord Design Guidelines, v 2.0

Updated 2019-02-11

These guidelines are focused on code and implementation. Full guidelines can be found in the PDF file: Design_Guidelines_Digital_channels.pdf

They are aimed to help developers to have a single source of truth.

1. Styles and Colors

PostNord fonts, colors and basic style in SASS syntax. Always strive to use variables, avoid hard coding. Prefix all variables with pn-, like .pn-button { ... } . By doing so it’s easy to distinguish styles that belongs to PostNord Design Guidelines.

• _pn-base.scss //Colors, Spaces
• _pn-typography.scss //Barebone typography
• _pn-fonts.scss //Set up @font-face
• _pn-viewport.scss //Barebone lightgrey viewport with white box
• _pn-component-xyz.scss //For example _pn-component-forms.scss
• pn-styles.scss //@import underscored setting files
• Base SCSS: Colors, Spaces, Basic set up, Typography, Forms
• Fonts SCSS: StagSansWeb-Book and StagSansWeb-Medium
• ”Kitchen Sink”: example page with bare bone styling

2. Web Fonts

We use:

• StagSansWeb-Book
• StagSansWeb-Medium

PostNord have licenses for

• *.postnord.se
• *.postnord.dk
• *.postnord.no
• *.postnord.fi
• *.postnord.com

3. Spacing, ”margin and padding”

As a rule of thumb: always use space as a multiple of 8. Read more in Using multiples of 8 to define dimensions, padding, and margin of elements. and Space in Design Systems

Always strive to use variables, avoid hard coding. See Space Variables in base.scss

4. Icons

The filled icon is our primary icon, but if the design demands an outlined icon, that is also permissable. Filled icons and outlined icons should never be placed next to each other, or used together as an interactive effect. On special occasions an icon can be placed in a circle or square, but this should be avoided if possible.

• ToC

Solid colors and states

• Default: Digital Grey $grey-05-battleship: #bebebe;
• Hover: Digital Grey Medium $grey-06-rock: #757575;
• Attention: Dark Orange $clementine-default: #e36200;
• Error: Dark Red: $crimson-dark: #990000;
• Action done correctly: Dark Green: $grass-dark: #108b33;

Outline colors and states

• Default: Digital Grey Medium: $grey-06-rock: #757575;
• Hover: Digital Grey Dark $grey-07-coal: #3c3c3c;
• Attention: Dark Orange $clementine-default: #e36200;
• Error: Dark Red: $crimson-dark: #990000;
• Action done correctly: Dark Green: $grass-dark: #108b33;

5. Illustrations

• Illustrations (not included in npm package)

UI Design 101

The Gestalt principles describe the way our mind interprets visual elements. The most helpful day-to-day principles are: Similarity, Enclosure, Continuation, Closure, Proximity and Figure-Ground.

Article: Using Gestalt Principles for Natural Interactions

YouTube: Interaction design and Gestalt Principles | lynda.com tutorial