Equinor Design System

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 (--eds-color-*) for all color values. Never use raw hex, rgb(), or named CSS colors in Fusion app code. All tokens below are from @equinor/eds-tokens v2.x (the version Fusion apps depend on).

Token naming pattern: --eds-color-<layer>-<semantic>-<variant>

• bg = background fill
• text = foreground text / icon
• border = stroke / divider

Background tokens

Text tokens

Border tokens

Brand constraint: Equinor red (#FF1243) 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 @equinor/eds-tokens JS object when possible — they respect system dark/light mode automatically.

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 Typography from @equinor/eds-core-react for all text rendering. Never set raw font-size, font-family, or line-height manually — use the EDS variant prop.

Variant hierarchy

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 @equinor/eds-core-react — 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 @equinor/eds-tokens 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).

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

Elevation and shadow

EDS v2 (@equinor/eds-tokens ^2) does not expose elevation as CSS custom properties. For elevated surfaces use the EDS Paper component which applies the correct shadow for its variant, or use EDS Elevation tokens via the JS object import from @equinor/eds-tokens when you need raw values in styled-components.

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 box-shadow values from JS (rare): import from @equinor/eds-tokens, not hardcoded values.

Icon usage

Use @equinor/eds-icons with the EDS Icon component. Do not import SVGs directly or use third-party icon sets. Always pass icon data via the data prop — do not use the name string prop. Icon names from @equinor/eds-icons are in snake_case.

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: 16, 24 (default), 32, 40, 48. 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

Layout constraints

• Do not add outer margin or padding to the root app component — the portal shell provides the content inset.
• Use --eds-spacing-horizontal-<size> / --eds-spacing-vertical-<size> tokens for internal section spacing.
• Do not use fixed height 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

Sources

• EDS design resources: https://eds.equinor.com/docs/resources/
• EDS component library: https://eds.equinor.com/components/
• Equinor brand color: https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100056
• Equinor brand typography: https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100059
• Equinor brand layout: https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100061