@dnb/eufemia/docs/uilib/intro.md

DNB Eufemia Design System UI Library

---
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.766Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

<Intro>

# Eufemia Design System

> What is a Design System good for?

- Consistent User Experience (**UX**) for all DNB products
- [**Single source of truth**](https://www.npmjs.com/package/@dnb/eufemia)
- [Contribution](/contribute) and [collaboration](https://github.com/dnbexperience/eufemia)
- Independent "visual" layer with semantic versioning
- Notification of [new releases](/uilib/usage#the-eufemia-repository)
- Ready to use sub-systems, tested and easy to integrate

## What forms the system?

Eufemia as a Design System consist of many sub-systems, like:

- Color systems
- Typography system
- Spacial systems
- Icon system
- Grid system
- Naming system

All of these sub-systems dictates on how components, extensions and styles are build. And documentation, principles and guides of best practices will again tell how to build solutions with good UX.

<InlineImg
  src={WhatIsEufemia}
  caption="Illustration showing all the sub-systems, like color-system or typography-system. All these subsystems are the basis where components, principles and best practices are build upon."
  className="blank x-10"
/>

---

<IntroFooter
  href="/uilib/intro/02-common-patterns"
  text="Next - Common Design Patterns"
/>

</Intro>