equinor-design-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Equinor Design System — Design Rules

Equinor设计系统——设计规则

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.

EDS设计令牌和Equinor品牌约束的精简参考资料。所有规则均源自eds.equinor.com和Equinor传播工具箱。

本文件是从属查询参考资料，无工作流程步骤。调用的Agent应查找相关章节并直接应用规则。

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

所有颜色值均使用EDS CSS自定义属性（

--eds-color-*

）。在Fusion应用代码中绝不要使用原始十六进制、rgb()或命名CSS颜色。以下所有令牌均来自

@equinor/eds-tokens

v2.x（Fusion应用依赖的版本）。

令牌命名模式：
--eds-color-<layer>-<semantic>-<variant>
bg
= 背景填充
text
= 前景文本/图标
border
= 描边/分隔线

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`

用途	EDS令牌
页面/应用画布	`--eds-color-bg-canvas`
表面（卡片、面板）	`--eds-color-bg-surface`
输入框背景	`--eds-color-bg-input`
悬浮表面（下拉框、提示框）	`--eds-color-bg-floating`
背景遮罩/模态框幕布	`--eds-color-bg-backdrop`
主要操作填充（默认状态）	`--eds-color-bg-fill-emphasis-default`
主要操作填充（悬停状态）	`--eds-color-bg-fill-emphasis-hover`
主要操作填充（激活状态）	`--eds-color-bg-fill-emphasis-active`
弱化填充（默认状态）	`--eds-color-bg-fill-muted-default`
弱化填充（悬停状态）	`--eds-color-bg-fill-muted-hover`
禁用表面	`--eds-color-bg-disabled`
成功状态表面（柔和背景）	`--eds-color-bg-success-surface`
成功状态填充（强调）	`--eds-color-bg-success-fill-emphasis-default`
警告状态表面	`--eds-color-bg-warning-surface`
警告状态填充（强调）	`--eds-color-bg-warning-fill-emphasis-default`
危险/错误状态表面	`--eds-color-bg-danger-surface`
危险/错误状态填充（强调）	`--eds-color-bg-danger-fill-emphasis-default`
信息状态表面	`--eds-color-bg-info-surface`
信息状态填充（强调）	`--eds-color-bg-info-fill-emphasis-default`
强调色表面	`--eds-color-bg-accent-surface`
强调色填充（强调）	`--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`

用途	EDS令牌
主要正文文本	`--eds-color-text-strong`
强调/填充背景上的文本	`--eds-color-text-strong-on-emphasis`
次要/柔和文本	`--eds-color-text-subtle`
禁用文本	`--eds-color-text-disabled`
链接	`--eds-color-text-link`
成功状态文本	`--eds-color-text-success-strong`
成功状态文本（柔和）	`--eds-color-text-success-subtle`
警告状态文本	`--eds-color-text-warning-strong`
危险/错误状态文本	`--eds-color-text-danger-strong`
信息状态文本	`--eds-color-text-info-strong`
强调色文本	`--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.

用途	EDS令牌
默认分隔线/边框	`--eds-color-border-medium`
柔和边框	`--eds-color-border-subtle`
加粗边框	`--eds-color-border-strong`
聚焦环	`--eds-color-border-focus`
禁用边框	`--eds-color-border-disabled`
成功状态边框	`--eds-color-border-success-medium`
警告状态边框	`--eds-color-border-warning-medium`
危险/错误状态边框	`--eds-color-border-danger-medium`
信息状态边框	`--eds-color-border-info-medium`
强调色边框	`--eds-color-border-accent-medium`

品牌约束：Equinor红色（
#FF1243
）仅用于主标志——绝不能作为UI操作或语义颜色使用。所有可点击和语义化表面均需使用EDS颜色令牌。

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.

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);
  }
`;

尽可能在styled-components中使用EDS CSS自定义属性，而非

@equinor/eds-tokens

JS对象——它们会自动适配系统明暗模式。

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

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.

所有文本渲染均使用

@equinor/eds-core-react

中的

Typography

组件。绝不要手动设置原始

font-size

、

font-family

或

line-height

——使用EDS的

variant

属性。

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

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>

级别	`variant`	用途
展示级	`h1`	英雄标题（应用中极少使用）
页面标题	`h2`	顶级页面标题
章节标题	`h3`	章节标题、卡片头部
子标题	`h4`	子章节、面板标题
overline	`overline`	分类标签、面包屑层级文本
正文	`body_long`	多行正文文本
短正文	`body_short`	单行正文、表格单元格
说明文字	`caption`	元数据、时间戳、辅助文本
标签	`label`	表单字段标签

typescript

import { Typography } from '@equinor/eds-core-react';

// 正确用法
<Typography variant="h3">Section heading</Typography>
<Typography variant="body_short">Table cell value</Typography>
<Typography variant="caption">Last updated 2 hours ago</Typography>

// 错误用法——绝不要这样做
<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.

Equinor品牌字体为Equinor（用于营销场景）。Fusion应用必须使用

@equinor/eds-core-react

定义的EDS系统字体——不要在应用CSS中导入或覆盖Equinor品牌字体。

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

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);
`;

边距、内边距和间隙均使用

@equinor/eds-tokens

v2中的

--eds-spacing-horizontal-<size>

和

--eds-spacing-vertical-<size>

。不要使用任意像素值。

水平和垂直间距刻度共享相同的尺寸步骤，但每个步骤可能相差几个像素；请使用对应轴的令牌（水平方向用于左右，垂直方向用于上下）。

尺寸	水平值	垂直值	用途
`4xs`	2 px	2 px	微间隙、紧凑图标内边距
`3xs`	4 px	4 px	极小间隙
`2xs`	6 px	6 px	小内边距
`xs`	8 px	8 px	小间隙、紧凑列表间距
`sm`	12 px	12 px	内部内边距（芯片、徽章）
`md`	16 px	16 px	标准内容内边距
`lg`	20 px	20 px	大间隙、章节间距
`xl`	24 px	24 px	超大间隙、卡片间距
`2xl`	28 px	28 px	主要章节分隔
`3xl`	32 px	32 px	章节级留白

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

令牌/值	用途
`--eds-shape-corners-border-radius`	标准圆角（卡片、按钮）
`border-radius: 0`	直角/方角
`border-radius: 9999px`	全圆角（标签、芯片）

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.

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

box-shadow

values from JS (rare): import from

@equinor/eds-tokens

, not hardcoded values.

EDS v2（

@equinor/eds-tokens

^2）未将层级作为CSS自定义属性暴露。对于需要提升层级的表面，请使用EDS

Paper

组件，它会为其变体应用正确的阴影；当你需要在styled-components中使用原始值时，请通过

@equinor/eds-tokens

的JS对象导入EDS

Elevation

令牌。

typescript

import { Paper } from '@equinor/eds-core-react';

// 卡片/面板优先使用Paper组件——层级会自动处理
<Paper elevation="raised">
  <CardContent />
</Paper>

如果你需要从JS中获取原始

box-shadow

值（极少情况）：请从

@equinor/eds-tokens

导入，不要使用硬编码值。

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

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.

将

@equinor/eds-icons

与EDS

Icon

组件配合使用。不要直接导入SVG或使用第三方图标集。始终通过

data

属性传递图标数据——不要使用

name

字符串属性。

@equinor/eds-icons

中的图标名称采用

snake_case

格式。

typescript

import { Icon } from '@equinor/eds-core-react';
import { add, close, settings } from '@equinor/eds-icons';

// 通过`data`属性传递图标数据对象；为了可访问性请提供`title`
<Icon data={add} title="Add" />
<Icon data={close} title="Close" size={16} />
<Icon data={settings} title="Settings" />

图标尺寸遵循固定刻度：

、

（默认）、

、

。不要设置任意尺寸。

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.

Fusion Portal应用运行在Fusion Portal外壳内部，外壳负责顶部导航、左侧栏和外边距。应用不得重复或与这些区域冲突。

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

区域	组件	说明
顶部栏/页眉	由Fusion Portal外壳提供	应用无需渲染全局页眉
主内容区域	`<main>` 或顶级应用 `<div>`	占满可用宽度和高度
侧边面板/详情	`@equinor/fusion-react-side-sheet`	从右侧滑入；不要使用自定义定位的覆盖层

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.

不要为根应用组件添加外部
```
margin
```
或
```
padding
```
——门户外壳已提供内容内边距。

使用

--eds-spacing-horizontal-<size>

--eds-spacing-vertical-<size>

令牌设置内部章节间距。

不要为根容器设置固定
```
height
```
——允许内容拉伸至可用视口高度。
不要创建包裹整个页面的自定义滚动容器——浏览器滚动是标准滚动表面。
嵌套滚动区域适用于固定高度的网格/表格区域，但必须是刻意设计且边界清晰的。

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

状态	模式
加载中	EDS `CircularProgress` 或 `@equinor/fusion-react-progress-indicator` 的 `ProgressIndicator` 居中显示在内容区域
空状态（无数据）	EDS `Typography` + 可选EDS `Button` 作为主要操作；居中或顶部对齐
错误状态	EDS `Typography variant="body_short"` ，颜色使用 `--eds-color-text-danger-strong` + 重试操作

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

EDS设计资源：https://eds.equinor.com/docs/resources/
EDS组件库：https://eds.equinor.com/components/
Equinor品牌颜色：https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100056
Equinor品牌排版：https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100059
Equinor品牌布局：https://communicationtoolbox.equinor.com/point/en/equinor/component/default/100061