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.
- Status
- Figma
- Storefront
- React
- Icons
- Tokens
- Fonts
- Logo
- Browser support
- Contribute
- Getting started
- Get in touch
| Package | Status | Version |
|---|---|---|
| Core React |  |
|
| Tokens |  |
|
| Icons |  |
|
| Figma broker |  |
|
| Storybook React |  |
|
| Storefront (dev) |  |
|
| Storefront (prod) | |
The EDS in Figma is the single source of truth. You can apply for access to Figma in AccessIT. See the changelog for updates. 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. As we’re getting close to finishing the EDS Core React library, we’ve started work on implementing the EDS in the storefront as well to replace the bare bones design it currently has.
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-componentsconst { Button } = '@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 the storefront, 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-reactimport { Icon } from '@equinor/eds-core-react'
import { info_circle } from '@equinor/eds-icons'
Icon.add({ info_circle })
<Icon name="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-tokensimport { 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)The Equinor typeface is available from the EDS CDN.
<link rel="stylesheet" href="https://eds-static.equinor.com/font/equinor-font.css" /><link rel="stylesheet" href="https://eds-static.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 colour with a fragment identifier in the url. The following example uses the primary logo in red, other colour options are white and black – with black being the default if you omit the fragment identifier.
<img src="https://eds-static.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.
Contributions are welcome and encouraged! File bug reports and feature requests in Github issues, and get in touch with us if you want to help us out with implementing the components or have ideas for components we should include in the EDS.
We use pnpm as the package manager, because it’s fast, space efficient, and has some very useful commands when working with a monorepo – so you should start off by installing it globally:
$ npm i -g pnpmIt is possible to change directory into one of the subdirectories and run pnpm commands from there, but if’s usually better to run most commands from the root, and use --filter to single out the package you’re working on. So to install all the dependencies in all the packages simultaneosly, run pnpm m i, which is the shorthand version of pnpm multi install.
If you would like to start the storefront then, you would run pnpm --filter @equinor/eds-storefront run start, and if you want to install some devDependency, pnpm --filter @equinor/eds-storefront i -D <some-module>.
There are some useful scripts in the root package.yaml for common tasks.
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.