mcpField
E
equinor-design-system

equinor-design-system

github.com/equinorデザイン・UI420 回インストール
リポジトリ

equinor-design-system について

equinor-design-systemは、FusionアプリでEquinor Design Systemのルールを適用するための参照スキルです。カラー、タイポグラフィ、スペーシング、アイコン、ページレイアウトの指針をまとめています。

主な機能

  1. 01EDSのカラーとブランド規則
  2. 02Typographyの書式指針
  3. 03スペーシングと角丸のトークン
  4. 04アイコンとシャドウの使用規則
  5. 05Fusion Portalのレイアウト制約

活用シーン

  1. 01Fusionアプリの色と間隔の選定
  2. 02EDSに沿ったテキストスタイルの設定
  3. 03コンポーネントのアイコンと影の選定
  4. 04Portalのレイアウトに沿ったページ設計

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/equinor-design-systemを入力して読み込まれたか確認します。

同梱ファイルCHANGELOG.md

詳細

Equinor デザインシステム — デザインルール

EDS デザイントークンと Equinor ブランドの制約をまとめた簡潔なリファレンスです。すべてのルールは、eds.equinor.com および Equinor Communication Toolbox を出典としています。

このファイルは補助的な参照資料です。ワークフローの手順はありません。利用するエージェントは該当するセクションを参照し、ルールを直接適用してください。

カラートークン

すべての色の値には EDS CSS カスタムプロパティ（--eds-color-*）を使用してください。Fusion アプリのコードで生の hex、rgb()、名前付き CSS カラーを使用しないでください。以下のトークンはすべて、Fusion アプリが依存する @equinor/eds-tokens v2.x のものです。

トークンの命名パターン：--eds-color-<layer>-<semantic>-<variant>

  • bg = 背景の塗りつぶし
  • text = 前景のテキスト／アイコン
  • border = ストローク／区切り線
背景トークン
用途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
テキストトークン
用途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
ボーダートークン
用途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 カラートークンを使用してください。

コードでのトークンの参照

可能な場合は、@equinor/eds-tokens の JS オブジェクトよりも、styled-components で EDS CSS カスタムプロパティを優先してください。システムのダーク／ライトモードに自動的に対応します。

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

タイポグラフィ

すべてのテキストの描画には、@equinor/eds-core-react の Typography を使用します。font-size、font-family、line-height を直接指定せず、EDS の variant プロパティを使用してください。

バリアントの階層
レベルvariant用途
ディスプレイh1ヒーロー見出し（アプリではほとんど使用しません）
ページタイトルh2最上位のページ見出し
セクション見出しh3セクションタイトル、カードヘッダー
小見出しh4サブセクション、パネルタイトル
オーバーラインoverlineカテゴリーラベル、パンくずリストのテキスト
本文body_long複数行の本文
短い本文body_short1行の本文、テーブルセル
キャプションcaptionメタデータ、タイムスタンプ、補助テキスト
ラベルlabelフォームフィールドのラベル
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>
ブランドに関する制約

Equinor のブランド書体は Equinor です（マーケティングで使用）。Fusion アプリでは、@equinor/eds-core-react で定義されている EDS システム書体を使用する必要があります。アプリの CSS で Equinor ブランドフォントをインポートしたり、上書きしたりしないでください。

スペーシングトークン

マージン、パディング、ギャップには、@equinor/eds-tokens v2 の --eds-spacing-horizontal-<size> と --eds-spacing-vertical-<size> を使用します。任意のピクセル値は使用しないでください。

水平方向と垂直方向のスケールでは同じサイズ段階を使用しますが、各段階で数ピクセル異なる場合があります。軸に適したトークンを使用してください（左右には水平方向、上下には垂直方向）。

サイズ水平方向の値垂直方向の値用途
4xs2 px2 pxごく小さなギャップ、アイコンの狭いパディング
3xs4 px4 pxXS ギャップ
2xs6 px6 px小さな内側のパディング
xs8 px8 pxSM ギャップ、コンパクトなリストの間隔
sm12 px12 px内側のパディング（チップ、バッジ）
md16 px16 px標準的なコンテンツのパディング
lg20 px20 pxLG ギャップ、セクション間の間隔
xl24 px24 pxXL ギャップ、カード間の間隔
2xl28 px28 px大きなセクション区切り
3xl32 px32 pxセクション単位の余白
const Section = styled.section`
  padding-inline: var(--eds-spacing-horizontal-md);
  padding-block: var(--eds-spacing-vertical-lg);
  gap: var(--eds-spacing-vertical-sm);
`;
角丸
トークン／値用途
--eds-shape-corners-border-radius標準的な角丸（カード、ボタン）
border-radius: 0角を丸めない／四角い角
border-radius: 9999px完全なピル型（タグ、チップ）

エレベーションとシャドウ

EDS v2（@equinor/eds-tokens ^2）では、エレベーションを CSS カスタムプロパティとして公開していません。エレベーションが必要なサーフェスには、バリアントに応じた適切なシャドウを適用する EDS の Paper コンポーネントを使用してください。または、styled-components で生の値が必要な場合は、JS オブジェクトのインポートを通じて EDS の Elevation トークンを使用してください。

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

// Prefer Paper for cards/panels — elevation is handled automatically
<Paper elevation="raised">
  <CardContent />
</Paper>

JS から生の box-shadow 値が必要な場合（まれです）は、値をハードコードせず、@equinor/eds-tokens からインポートしてください。

アイコンの使用

@equinor/eds-icons と EDS の Icon コンポーネントを使用します。SVG を直接インポートしたり、サードパーティのアイコンセットを使用したりしないでください。アイコンデータは必ず data プロパティで渡してください。文字列の name プロパティは使用しないでください。@equinor/eds-icons のアイコン名は 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" />

アイコンのサイズは、16、24（デフォルト）、32、40、48 の固定スケールに従います。任意のサイズは設定しないでください。

ページレイアウトのゾーン

Fusion Portal アプリは Fusion Portal シェル内で実行されます。シェルが上部ナビゲーション、左側レール、外側のマージンを管理します。アプリでこれらのゾーンを再現したり、競合させたりしないでください。

3 ゾーンのアプリシェル
ゾーンコンポーネント備考
トップバー／ヘッダーFusion Portal シェルが提供アプリではグローバルヘッダーを描画しません
メインコンテンツ領域<main> またはアプリの最上位の <div>利用可能な幅と高さ全体を使用
サイドパネル／詳細@equinor/fusion-react-side-sheet右側からスライドインします。独自の位置指定オーバーレイは使用しないでください
レイアウトの制約
  • ルートアプリコンポーネントに外側の margin や padding を追加しないでください。コンテンツの余白はポータルシェルによって確保されます。
  • セクション内部の間隔には、--eds-spacing-horizontal-<size> / --eds-spacing-vertical-<size> トークンを使用してください。
  • ルートコンテナに固定の height を設定しないでください。コンテンツが利用可能なビューポートの高さに合わせて伸縮できるようにしてください。
  • ページ全体を囲むカスタムのスクロール可能なコンテナを作成しないでください。ブラウザーのスクロールを標準のスクロール領域として使用してください。
  • 固定高さのグリッド／テーブル領域には、入れ子になったスクロール可能な領域を使用できます。ただし、意図を明確にし、範囲をはっきり定めてください。
空の状態と読み込み中の状態
状態パターン
読み込み中コンテンツ領域の中央に配置した EDS CircularProgress または @equinor/fusion-react-progress-indicator の ProgressIndicator
空（データなし）EDS Typography と、必要に応じて主要なアクション用の EDS Button。中央または上部に配置
エラー--eds-color-text-danger-strong で色付けした EDS Typography variant="body_short" と再試行アクション

参考資料

コメント

Markdown 対応