Equinor Design System — Design Rules
Compact reference for EDS design tokens and Equinor brand constraints. All rules are sourced from
eds.equinor.com and the
Equinor Communication Toolbox.
This file is a subordinate lookup reference. There are no workflow steps. Consuming agents should look up the relevant section and apply the rule directly.
Color tokens
Use
EDS CSS custom properties (
) for all color values. Never use raw hex, rgb(), or named CSS colors in Fusion app code. All tokens below are from
v2.x (the version Fusion apps depend on).
Token naming pattern:
--eds-color-<layer>-<semantic>-<variant>
- = background fill
- = foreground text / icon
- = stroke / divider
Background tokens
| Purpose | EDS token |
|---|
| Page / app canvas | |
| Surface (card, panel) | |
| Input field background | |
| Floating surface (dropdown, tooltip) | |
| Backdrop / modal scrim | |
| Primary action fill (default) | --eds-color-bg-fill-emphasis-default
|
| Primary action fill (hover) | --eds-color-bg-fill-emphasis-hover
|
| Primary action fill (active) | --eds-color-bg-fill-emphasis-active
|
| Muted fill (default) | --eds-color-bg-fill-muted-default
|
| Muted fill (hover) | --eds-color-bg-fill-muted-hover
|
| Disabled surface | |
| Success surface (subtle bg) | --eds-color-bg-success-surface
|
| Success fill (emphasis) | --eds-color-bg-success-fill-emphasis-default
|
| Warning surface | --eds-color-bg-warning-surface
|
| Warning fill (emphasis) | --eds-color-bg-warning-fill-emphasis-default
|
| Danger / error surface | --eds-color-bg-danger-surface
|
| Danger fill (emphasis) | --eds-color-bg-danger-fill-emphasis-default
|
| Info surface | --eds-color-bg-info-surface
|
| Info fill (emphasis) | --eds-color-bg-info-fill-emphasis-default
|
| Accent surface | --eds-color-bg-accent-surface
|
| Accent fill (emphasis) | --eds-color-bg-accent-fill-emphasis-default
|
Text tokens
| Purpose | EDS token |
|---|
| Primary body text | |
| Text on emphasis/filled backgrounds | --eds-color-text-strong-on-emphasis
|
| Subtle / secondary text | |
| Disabled text | --eds-color-text-disabled
|
| Link | |
| Success text | --eds-color-text-success-strong
|
| Success text (subtle) | --eds-color-text-success-subtle
|
| Warning text | --eds-color-text-warning-strong
|
| Danger / error text | --eds-color-text-danger-strong
|
| Info text | --eds-color-text-info-strong
|
| Accent text | --eds-color-text-accent-strong
|
Border tokens
| Purpose | EDS token |
|---|
| Default divider / border | --eds-color-border-medium
|
| Subtle border | --eds-color-border-subtle
|
| Strong border | --eds-color-border-strong
|
| Focus ring | |
| Disabled border | --eds-color-border-disabled
|
| Success border | --eds-color-border-success-medium
|
| Warning border | --eds-color-border-warning-medium
|
| Danger border | --eds-color-border-danger-medium
|
| Info border | --eds-color-border-info-medium
|
| Accent border | --eds-color-border-accent-medium
|
Brand constraint: Equinor red (
) is used in the primary logo only — never as a UI action or semantic color. Use EDS color tokens for all clickable and semantic surfaces.
Token access in code
Prefer EDS CSS custom properties in styled-components over the
JS object when possible — they respect system dark/light mode automatically.
typescript
import styled from 'styled-components';
const Card = styled.div`
background: var(--eds-color-bg-surface);
border: 1px solid var(--eds-color-border-medium);
color: var(--eds-color-text-strong);
`;
const PrimaryButton = styled.button`
background: var(--eds-color-bg-fill-emphasis-default);
color: var(--eds-color-text-strong-on-emphasis);
&:hover {
background: var(--eds-color-bg-fill-emphasis-hover);
}
&:disabled {
background: var(--eds-color-bg-disabled);
color: var(--eds-color-text-disabled);
}
`;
Typography
Use
from
for all text rendering. Never set raw
,
, or
manually — use the EDS
prop.
Variant hierarchy
| Level | | Usage |
|---|
| Display | | Hero headings (rarely used in apps) |
| Page title | | Top-level page heading |
| Section heading | | Section title, card header |
| Sub-heading | | Sub-section, panel title |
| Overline | | Category labels, breadcrumb-level text |
| Body | | Multi-line body text |
| Body short | | Single-line body, table cells |
| Caption | | Metadata, timestamps, helper text |
| Label | | Form field labels |
typescript
import { Typography } from '@equinor/eds-core-react';
// Correct
<Typography variant="h3">Section heading</Typography>
<Typography variant="body_short">Table cell value</Typography>
<Typography variant="caption">Last updated 2 hours ago</Typography>
// Wrong — never do this
<p style={{ fontSize: '14px' }}>…</p>
Brand constraint
Equinor brand typeface is
Equinor (used in marketing). Fusion apps must use the EDS system typeface defined by
— do not import or override the Equinor brand font in app CSS.
Spacing tokens
Use
--eds-spacing-horizontal-<size>
and
--eds-spacing-vertical-<size>
from
v2 for margin, padding, and gap. Do not use arbitrary pixel values.
The horizontal and vertical scales share the same size steps but may differ by a few pixels at each step; use the axis-appropriate token (horizontal for left/right, vertical for top/bottom).
| Size | Horizontal value | Vertical value | Use for |
|---|
| 2 px | 2 px | Micro gap, tight icon padding |
| 4 px | 4 px | XS gap |
| 6 px | 6 px | Small inset padding |
| 8 px | 8 px | SM gap, compact list spacing |
| 12 px | 12 px | Inner padding (chips, badges) |
| 16 px | 16 px | Standard content padding |
| 20 px | 20 px | LG gap, section spacing |
| 24 px | 24 px | XL gap, card separation |
| 28 px | 28 px | Major section break |
| 32 px | 32 px | Section-level whitespace |
typescript
const Section = styled.section`
padding-inline: var(--eds-spacing-horizontal-md);
padding-block: var(--eds-spacing-vertical-lg);
gap: var(--eds-spacing-vertical-sm);
`;
Border radius
| Token / value | Use for |
|---|
--eds-shape-corners-border-radius
| Standard rounded corners (cards, buttons) |
| Sharp / square corners |
| Full pill (tags, chips) |
Elevation and shadow
EDS v2 (
^2) does not expose elevation as CSS custom properties. For elevated surfaces use the EDS
component which applies the correct shadow for its variant, or use EDS
tokens via the JS object import from
when you need raw values in styled-components.
typescript
import { Paper } from '@equinor/eds-core-react';
// Prefer Paper for cards/panels — elevation is handled automatically
<Paper elevation="raised">
<CardContent />
</Paper>
If you need raw
values from JS (rare): import from
, not hardcoded values.
Icon usage
Use
with the EDS
component. Do not import SVGs directly or use third-party icon sets. Always pass icon data via the
prop — do not use the
string prop. Icon names from
are in
.
typescript
import { Icon } from '@equinor/eds-core-react';
import { add, close, settings } from '@equinor/eds-icons';
// Pass icon data object via the `data` prop; provide `title` for accessibility
<Icon data={add} title="Add" />
<Icon data={close} title="Close" size={16} />
<Icon data={settings} title="Settings" />
Icon sizes follow a fixed scale:
,
(default),
,
,
. Do not set arbitrary sizes.
Page layout zones
Fusion Portal apps run inside the Fusion Portal shell, which owns the top navigation, left rail, and outer margins. Apps must not replicate or conflict with these zones.
Three-zone app shell
| Zone | Component | Notes |
|---|
| Top bar / header | Provided by Fusion Portal shell | Apps do not render a global header |
| Main content area | or top-level app | Full available width and height |
| Side panel / detail | @equinor/fusion-react-side-sheet
| Slides in from the right; do not use custom positioned overlays |
Layout constraints
- Do not add outer or to the root app component — the portal shell provides the content inset.
- Use
--eds-spacing-horizontal-<size>
--eds-spacing-vertical-<size>
- Do not use fixed on the root container — allow content to stretch to the available viewport height.
- Do not create custom scrollable containers that wrap the full page — the browser scroll is the standard scroll surface.
- Nested scrollable regions are acceptable for fixed-height grid/table areas, but must be deliberate and clearly bounded.
Empty and loading states
| State | Pattern |
|---|
| Loading | EDS or @equinor/fusion-react-progress-indicator
|
| Empty (no data) | EDS + optional EDS for a primary action; centered or top-aligned |
| Error | EDS Typography variant="body_short"
--eds-color-text-danger-strong
|
Sources