ナビゲーション
概要

デザインシステム

落ち着いたサーフェス、収まりのよい操作部品、明快なドキュメント。Masterのサイトで共有する視覚言語。

ブランドガイドはアイデンティティを定義します。このハンドブックはそれを支えるインターフェースを扱います。明るいモードの Moonstone、暗いモードの Obsidian、共通の素材の段階、高低差の順序、例の枠組みを示します。

小さな文書用ワークスペース

小さなプロジェクトの語彙

<article class="p-card r-card b(1) b-solid b-line-divider bg-surface-raised fg-text-body">  <p class="m(0) font-mono text-xs fg-brand">FIELD NOTES / 024</p>  <h2 class="mt-sm mb-xs text-xl font-medium fg-text-strong">Room for the details</h2>  <p class="m(0) text-sm">Color, spacing and radius come from three shared project tokens.</p></article>
生成された CSS
@layer theme {  :root,  :host {    --color-zinc-30: oklch(78% .0025 265);    --color-zinc-70: oklch(39.8% .0028 265);    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-30: oklch(72.87% .1468 249.3);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-body: light-dark(var(--color-zinc-70), var(--color-zinc-30));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white));    --color-text-link: light-dark(var(--color-blue-60), var(--color-blue-30))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-xl: 1.25rem;    --text-xs: var(--font-size-xs);    --text-xs--line-height: 1.5;    --text-xs--letter-spacing: 0;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-xl: var(--font-size-xl);    --text-xl--line-height: 1.4;    --text-xl--letter-spacing: -.01em;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }  :root,  :host {    --color-brand: var(--color-text-link);    --spacing-card: 1.5rem;    --radius-card: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .text-xl {    font-size: var(--text-xl);    line-height: var(--text-xl--line-height, normal);    letter-spacing: var(--text-xl--letter-spacing, normal)  }  .text-xs {    font-size: var(--text-xs);    line-height: var(--text-xs--line-height, normal);    letter-spacing: var(--text-xs--letter-spacing, normal)  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-card {    border-radius: var(--radius-card)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-brand {    color: var(--color-brand)  }  .fg-text-body {    color: var(--color-text-body)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .font-mono {    font-family: var(--font-family-mono)  }  .font-medium {    font-weight: var(--font-weight-medium)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .mt-sm {    margin-top: var(--spacing-sm)  }  .p-card {    padding: var(--spacing-card)  }}
レスポンシブプレビューとソースは、同じプロジェクトトークン定義を使います。
--color-brand
var(--color-text-link)
--spacing-card
1.5rem
--radius-card
.75rem

#レイヤーと素材

すべての面は1つの段階に位置します。キャンバスにトレイを置き、トレイに明るいステージを置き、その上にシートが浮き上がります。くぼみは周囲より下に位置します。インターフェースはモノクロを保ち、色相は名前付きの教材見本と状態表示だけに使います。

キャンバス--ui-surface-canvas
トレイ--ui-surface-tray
ステージ--ui-surface-stage
シート--ui-surface-sheet
くぼみ--ui-surface-well
浮遊面--ui-surface-float

高低差

sink < flat < rise-1 < rise-1h < rise-2 < rise-3 < overlay

sink
flat
rise-1
rise-1h
rise-2
rise-3
overlay
レイヤーごとに offset と blur が倍になり、spread は内側へ寄せます。ホバーで半ピクセル持ち上がって rise-1h となり、押すとくぼみに沈みます。

同心の角丸

3 · 4 · 6 · 8 · 10 · 14, nested by a 4px inset

Tray 14 → sheet 10
3
4
6
8
角丸14のトレイは4pxの内側余白で角丸10のステージ、コード、シートを収め、角丸8のメニューは角丸4の項目を収めます。

#収まりのよいコントロール

コントロールは共通の素材と状態の順序を使います。浮いた面はホバーで半ピクセル持ち上がり、押すとくぼみに沈みます。選択されたセグメントは沈んだトラック内で浮き上がり、フォーカスは常に見えるインクの輪で示します。

Buttons

Default, primary and quiet; hover lifts, pressing sinks

hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.

Choices and fields

Selected segments rise inside a sunken track; fields float back to the sheet on focus

実際の結果を伝えるコピー

操作の隣の状態表示は、拒否も含む実際のクリップボード結果を伝えます。

#明快な読みのリズム

1つの例を1つのトレイにまとめます。ヘッダーで名付け、ステージで示し、コードウィンドウにソースと閉じた Generated CSS を置き、キャプションで注目点を伝えます。表と索引は自身の枠を持ちます。

値をまとめて

トークン／クラス役割
--color-brand
var(--color-text-link)
An existing semantic color
--spacing-card
1.5rem
Shared card padding
--radius-card
.75rem
Shared card corners
名前、値、補足情報の始点をそろえます。

説明用の色には必ず名前を付ける

Context
Subject
Comparison
  • Context
  • Subject
  • Comparison
SupportedStatic
色相は見本の中だけに使い、凡例かラベルで各色調を名付けます。

#完全なコンポーネントリファレンス

各ページはコンポーネントの実際の状態、サイトでの使用箇所、マークアップのインターフェースを示します。記述ハンドブックではレイアウトの契約とレシピ全体を扱います。

01

サーフェスと枠 6

02

見本と注釈 11

03

操作部品 3

04

ドキュメントと根拠 17

共通コンポーネントで例を作るか、動作するレシピの全体を調べられます。