Skip to content

Quick Guide - Designers

Contents

  1. Accessibility - accessibility, inclusiveness, and WCAG
  2. Design tools - recommended applications
  3. Fonts - downloads and links to other resources
  4. Logos - DNB brand logo
  5. Colors - color libraries downloads, recommendations
  6. UI guides - startup templates with grid, fonts, colors, symbols etc...
  7. Naming conventions - overview of we name things across code and design
  8. Design principles - in relation to designing digital UI's
  9. UI Resources - set of interface design resources
  10. Spatial System - spatial system used in Eufemia

Brand guidelines

What you should read from brand guidelines before starting to design for DNB

Getting started

  1. Open Figma
  2. Make sure you are a member of the DNB UX team. If not, then contact a lead designer (https://eufemia.dnb.no/design-system/contact)
  3. When you click on the 'You' dropdown, you should see DNB Bank ASA as a team to choose from.
  4. Choose DNB Bank ASA
    Join the DNB UX team
    Join the DNB UX team
  5. Create a new file
  6. Add Eufemia library to your file by selecting the 'open book' icon on the top right of the Figma interface.
    Library icon
    Figma's library icon
  7. This opens a new dialogue window. Choose Eufemia by toggling the switch:
    Add Eufemia team
    Add the Eufemia library
  8. In preferences set your nudge amount to 8px - this will snap items to the 8px grid
  9. Add a layout grid and set it to 8px:
    Add 8px layout grid
    Add an 8px layout grid