The EDS is the official design system of Equinor and is to be used when designing, prototyping and developing internal digital interfaces. The EDS provides structure, guidance and tools that enable designers and developers to efficiently build consistent, inclusive and flexible solutions.
While the design system itself lives in Figma, this repository contains implementations of the EDS in code.
This is a monorepo containing both published packages and applications:
apps/ # Applications (not published to npm)
design-system-docs/ # Documentation website (Docusaurus)
eds-demo/ # Component demo application (Next.js)
eds-color-palette-generator/ # Color palette generation tool
packages/ # Published npm packages
eds-core-react/ # React component library
eds-tokens/ # Design tokens
eds-icons/ # Icon library
eds-lab-react/ # Experimental components
eds-data-grid-react/ # Data grid component
eds-utils/ # Utility functions
eds-tailwind/ # Tailwind CSS plugin
- Equinor Design System
| Package | Status | Version |
|---|---|---|
| Core React |  |
 |
| Tokens | |
 |
| Icons | |
 |
| Lab React | |
 |
| Data Grid React | |
 |
| Utils | |
 |
These applications are part of the monorepo but are not published to npm.
| Application | Purpose | Start Command |
|---|---|---|
| Documentation | EDS documentation website built with Docusaurus | pnpm docu:start |
| Demo | Component showcase and examples using Next.js | pnpm demo:dev |
| Color Palette Generator | Tool for generating accessible color palettes | pnpm palette:dev |
Before you begin, ensure you have the following installed:
- Node.js — Version 22.12.0 or compatible
- pnpm — Version 10.15.0 or higher (install globally with
npm install -g [email protected]) - Git — For version control
Would you like to contribute? Awesome! 👏
We use a fork and pull-request workflow, so start with forking the repository on Github, then either open it in Gitpod or clone your fork locally.
Check out Github docs on how to work with forks
Use Gitpod and develop in the browser
Just prepend the url to your fork with https://gitpod.io/#, so for example https://gitpod.io/#https://github.com/yourusername/design-system. Dependencies will be installed automatically, then tests and linting will run, and finally the storybook will open in it’s own preview window ready to start coding.
git clone [email protected]:your-github-username/design-systemWe use pnpm as the package manager, because it's fast, space efficient, and has some very useful commands when working with a monorepo.
npm install -g [email protected]Install dependencies and build all packages using our init script:
cd design-system
pnpm run init# Build all packages
pnpm build
# Run all tests
pnpm test
# Lint entire codebase
pnpm lint:all
# Start Storybook for component development
pnpm storybook
# Start documentation site
pnpm docu:start
# Start demo application
pnpm demo:dev
# Start color palette generator
pnpm palette:devWe use Storybook as a development environment.
Start Storybook on localhost:9000 by running the following command from root:
pnpm run storybookRun tests once or by watching:
pnpm run test:core-react
pnpm run test:watch:core-react The EDS in Figma is the single source of truth. You can apply for access to Figma in AccessIT. The EDS Core team has workshops and demos on using Figma from time to time, these are announced in Slack and Teams (see «Get in touch»)
The storefront is the official documentation for the EDS.
This is the main implementation of the EDS, and will eventually contain accessible React components of each and every EDS component in Figma.
npm install @equinor/eds-core-react styled-componentsIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-devimport { Button } from '@equinor/eds-core-react'
<Button variant="outlined" color="secondary">
Click me!
</Button>See our storybook for more examples.
Built on a copy of the Outlined Material Design icons, the icons have been customised and renamed for Equinor’s use and supplemented with our own icons for Equinor specific domains.
All the icons are available in our Storybook, and can also be installed from NPM.
The following example uses the <Icon> component from @equinor/eds-core-react – but the icons package can also be used without React.
npm install @equinor/eds-icons @equinor/eds-core-reactIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-devimport { Icon } from '@equinor/eds-core-react'
import { info_circle } from '@equinor/eds-icons'
<Icon data={info_circle} size={24} />Design tokens are design decisions from Figma extracted into code, and form the basis for the EDS Core React library. For projects that don’t use React, the tokens are available as an independent NPM package that can be used to build your own implementation of the EDS in your technology of choice. The following example uses vanilla javascript.
npm install @equinor/eds-tokensIf you use Typescript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-devimport { tokens } from '@equinor/eds-tokens'
const {
typography: {
heading: { h1 },
},
} = tokens
const header = document.createElement('h1')
Object.keys(h1).forEach((token) => {
header.style[token] = h1[token]
})
header.textContent = 'Some header'
document.body.appendChild(header)Experimental React components that are still in development. These components may undergo breaking changes and are not recommended for production use until they are moved to the Core React library.
npm install @equinor/eds-lab-react styled-componentsIf you use TypeScript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-devimport { Stepper } from '@equinor/eds-lab-react'
<Stepper activeStepIndex={0}>
<Stepper.Step>Step 1</Stepper.Step>
<Stepper.Step>Step 2</Stepper.Step>
</Stepper>See our Storybook for more examples and available components.
A powerful data grid component built with AG Grid, providing sorting, filtering, and other advanced table features.
npm install @equinor/eds-data-grid-react ag-grid-reactIf you use TypeScript, make sure you have typescript >= 3.8 as a devDependency:
npm install typescript --save-devimport { EdsProvider, DataGrid } from '@equinor/eds-data-grid-react'
const columnDefs = [
{ field: 'name' },
{ field: 'age' },
]
const rowData = [
{ name: 'Alice', age: 30 },
{ name: 'Bob', age: 25 },
]
<EdsProvider>
<DataGrid columnDefs={columnDefs} rowData={rowData} />
</EdsProvider>See the package documentation for more details.
The Equinor typeface is available from the EDS CDN.
<link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-font.css" /><link rel="stylesheet" href="https://cdn.eds.equinor.com/font/equinor-regular.css" />We currently don’t support the font-display property, so if that’s something you need then please let us know.
When it comes to the Equinor logo, we have two versions – primary and horizontal – and you pick the color with a fragment identifier in the url. The following example uses the primary logo in red, other color options are white and black – with black being the default if you omit the fragment identifier.
<img src="https://cdn.eds.equinor.com/logo/equinor-logo-primary.svg#red" alt="Equinor" />We support the most up to date version of evergreen browsers (browsers that auto-update), which means Chrome, Safari, Firefox and (Chromium) Edge.
If you get an error that port 9000 (Storybook), 3000 (demo/docs), or other ports are already in use, you can either:
- Stop the process using that port
- Change the port in the respective configuration file
If you encounter build failures:
- Ensure all dependencies are up to date:
pnpm install - Clean and rebuild:
pnpm clean && pnpm build - Make sure you're using the correct Node.js version (22.12.0)
If you see "Module not found" errors:
- Run
pnpm run initto install all dependencies and build packages - Ensure workspace dependencies are built before consuming packages
The Equinor Design System is licensed under the MIT License.
Contributions are welcome and encouraged! Here's how to contribute:
- Report issues — File bug reports and feature requests in GitHub issues
- Fork and develop — Follow the fork and pull-request workflow outlined above
- Submit a pull request — All changes must be reviewed and approved by the EDS team before merging
- Follow conventions — Use conventional commits for your commit messages
If you want to help implement components or have ideas for what we should include in the EDS, please get in touch with the team.
We use #eds-design-system on Slack as our main communication channel – but we have an internal team on Teams as well that you can join if you want to get in touch with us. If you’re outside Equinor and want to get in touch with the team, then please create an issue.
