#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 and recommendations.
6. UI guides - startup templates with grid, fonts, colors, symbols, etc.
7. Naming conventions - overview of how we name things across code and design.
8. Design principles - in relation to designing digital UIs.
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.
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

   

   .
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.

   

   .
7. This opens a new dialogue window. Choose Eufemia by toggling the switch:

   

   .
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:

   

   .