@dnb/eufemia/docs/quickguide-designer.md

DNB Eufemia Design System UI Library

---
title: 'Quick Guide - Designers'
description: 'Eufemia for designers - design guidelines and resources.'
version: 11.3.0
generatedAt: 2026-05-19T08:46:50.048Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Quick Guide - Designers

## Contents

1. [Accessibility](/quickguide-designer/accessibility) - accessibility, inclusiveness, and WCAG.
1. [Design tools](/quickguide-designer/tools) - recommended applications.
1. [Fonts](/quickguide-designer/fonts) - downloads and links to other resources.
1. [Logos](/quickguide-designer/logos) - DNB brand logo.
1. [Colors](/quickguide-designer/colors) (deprecated) - color library downloads and recommendations. Use [Design Tokens – Colors](/uilib/usage/customisation/theming/design-tokens/colors) instead.
1. [UI guides](/quickguide-designer/tools) - startup templates with grid, fonts, colors, symbols, etc.
1. [Naming conventions](/quickguide-designer/naming-conventions) - overview of how we name things across code and design.
1. [Design principles](/quickguide-designer/principles) - in relation to designing digital UIs.
1. [UI Resources](/quickguide-designer/ui-resources) - set of interface design resources.
1. [Spatial System](/quickguide-designer/spatial-system) - spatial system used in Eufemia.

### Brand guidelines

What you should read from the 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](/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 <InlineImg src={FigmaTeam} caption="Join the DNB UX team" alt="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. <InlineImg src={FigmaLibrary} caption="Figma's library icon" alt="Library icon" />.
7. This opens a new dialogue window. Choose Eufemia by toggling the switch: <InlineImg src={FigmaLibraries} caption="Add the Eufemia library" alt="Add Eufemia team" />.
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: <InlineImg src={FigmaLayoutGrid} caption="Add an 8px layout grid" alt="Add 8px layout grid" />.