equinor-design-system

Q: How do I install equinor-design-system?

Run npx skills add https://github.com/equinor/fusion-skills --skill equinor-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/equinor-design-system/ (personal) or .claude/skills/equinor-design-system/ (project).

by equinorFrontend & Design

Authoritative, machine-readable EDS design rules for color tokens, typography, spacing, elevation, icons, and page layout zones. USE FOR: looking up correct EDS CSS custom properties, typography variant names, spacing tokens, shadow/elevation tokens, icon usage rules, and Fusion Portal page layout conventions. This is a lookup reference consumed by other skills and agents — it has no standalone workflow. DO NOT USE FOR: React component props or usage examples (use fusion-research + mcpfusionsearcheds), general Copilot coding tasks, or Fusion Framework API questions.

Installs: 420
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/equinor/fusion-skills --skill equinor-design-system

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads equinor-design-system automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

Purpose	EDS token
Page / app canvas	`--eds-color-bg-canvas`
Surface (card, panel)	`--eds-color-bg-surface`
Input field background	`--eds-color-bg-input`
Floating surface (dropdown, tooltip)	`--eds-color-bg-floating`
Backdrop / modal scrim	`--eds-color-bg-backdrop`
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	`--eds-color-bg-disabled`
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	`--eds-color-text-strong`
Text on emphasis/filled backgrounds	`--eds-color-text-strong-on-emphasis`
Subtle / secondary text	`--eds-color-text-subtle`
Disabled text	`--eds-color-text-disabled`
Link	`--eds-color-text-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	`--eds-color-border-focus`
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 (#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

Level	`variant`	Usage
Display	`h1`	Hero headings (rarely used in apps)
Page title	`h2`	Top-level page heading
Section heading	`h3`	Section title, card header
Sub-heading	`h4`	Sub-section, panel title
Overline	`overline`	Category labels, breadcrumb-level text
Body	`body_long`	Multi-line body text
Body short	`body_short`	Single-line body, table cells
Caption	`caption`	Metadata, timestamps, helper text
Label	`label`	Form field labels

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).

Size	Horizontal value	Vertical value	Use for
`4xs`	2 px	2 px	Micro gap, tight icon padding
`3xs`	4 px	4 px	XS gap
`2xs`	6 px	6 px	Small inset padding
`xs`	8 px	8 px	SM gap, compact list spacing
`sm`	12 px	12 px	Inner padding (chips, badges)
`md`	16 px	16 px	Standard content padding
`lg`	20 px	20 px	LG gap, section spacing
`xl`	24 px	24 px	XL gap, card separation
`2xl`	28 px	28 px	Major section break
`3xl`	32 px	32 px	Section-level whitespace

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)
`border-radius: 0`	Sharp / square corners
`border-radius: 9999px`	Full pill (tags, chips)

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

Zone	Component	Notes
Top bar / header	Provided by Fusion Portal shell	Apps do not render a global header
Main content area	`<main>` or top-level app `<div>`	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 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

State	Pattern
Loading	EDS `CircularProgress` or `@equinor/fusion-react-progress-indicator` `ProgressIndicator` centered in content area
Empty (no data)	EDS `Typography` + optional EDS `Button` for a primary action; centered or top-aligned
Error	EDS `Typography variant="body_short"` colored with `--eds-color-text-danger-strong` + retry action

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

FAQ

What does the equinor-design-system skill do?

How do I install equinor-design-system?

Run npx skills add https://github.com/equinor/fusion-skills --skill equinor-design-system in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/equinor-design-system/ (personal) or .claude/skills/equinor-design-system/ (project).

Which AI agents can use equinor-design-system?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is equinor-design-system safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains equinor-design-system?

It is published by equinor in equinor/fusion-skills. It has 420 recorded installs.

More from equinor/fusion-skills

View all →

fusion-issue-authoring

equinor/fusion-skills

Classify issue type, activate the matching agent mode for type-specific drafting, and enforce shared safety gates before GitHub mutation.

2.8K installs

fusion-github-review-resolution

equinor/fusion-skills

Resolves unresolved GitHub PR review threads end-to-end: evaluates whether each review comment is correct, applies a targeted fix when valid, replies with rationale when not, commits, and resolves the thread. USE FOR: unresolved review threads, PR review feedback, changes requested PRs, PR review URLs (pullrequestreview-...), fix the review comments, close the open threads, address PR feedback. DO NOT USE FOR: summarizing feedback without code changes, creating new PRs, or read-only branches.

Code Quality & Workflow2.4K installs

fusion-issue-solving

equinor/fusion-skills

Handles GitHub issue resolution end-to-end for prompts like "solve 123", "lets solve 123", "work on 123", "work on https://github.com/owner/repo/issues/123", or by pasting a direct GitHub issue URL as the request. USE FOR: solve 123, continue work on issue 123, work on https://github.com/owner/repo/issues/123, paste a GitHub issue URL for implementation work. DO NOT USE FOR: issue drafting only, PR review only, or non-implementation research.

Code Quality & Workflow2.2K installs

fusion-code-conventions

equinor/fusion-skills

Applies and explains code conventions across TypeScript, React, C, and Markdown. Enforces naming rules, file naming patterns, TSDoc and XML doc standards, inline comment intent (the why, not the what), code structure, error handling, async patterns, and dead code policy. Also enforces ADR and contributor doc decisions, and flags decisions that appear stale or misaligned with current tooling. USE FOR: convention questions, code review against project standards, applying naming rules, auditing intent comments, checking TSDoc completeness, enforcing recorded ADR decisions, and flagging stale architectural decisions. DO NOT USE FOR: security vulnerability scanning, performance profiling, runtime debugging, or generating net-new code without a review target.

Code Quality & Workflow2.2K installs

fusion-dependency-review

equinor/fusion-skills

Review dependency PRs with structured research, existing-PR-discussion capture, multi-lens analysis (security, code quality, impact), and a repeatable verdict template. USE FOR: dependency update PRs, Renovate/Dependabot PRs, library upgrade reviews, "review this dependency PR", "should we merge this update". DO NOT USE FOR: feature PRs, application code reviews, dependency automation/bot configuration, or unattended merge without confirmation.

Code Quality & Workflow2K installs

fusion-mcp

equinor/fusion-skills

Explain what Fusion MCP is and guide users through setting it up when they need Fusion-aware MCP capabilities in Copilot workflows.

AI & Agents2K installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

equinor-design-system

Install

Install

Describe the task

Review the result

SKILL.md

Equinor Design System — Design Rules

Color tokens

Background tokens

Text tokens

Border tokens

Token access in code

Typography

Variant hierarchy

Brand constraint

Spacing tokens

Border radius

Elevation and shadow

Icon usage

Page layout zones

Three-zone app shell

Layout constraints

Empty and loading states

Sources

FAQ

More from equinor/fusion-skills

Popular frontend & design skills