0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。

2026-10-15 21:17:28 +08:00

27 KiB

Raw Blame History

Nike にインスパイアされたデザインシステム

Category: Eコマース・小売アスレチックリテール。モノクロームUI、超大型アッパーケースタイポグラフィ、フルブリード写真。

1. ビジュアルテーマと世界観

Nike.com は躍動するリテールの大聖堂であり、スポーツの爆発的エネルギーをデジタルショッピング体験へと昇華させたサイトです。デザインの核にあるのは「徹底的なシンプリシティ」という原則——すべてをブラック・ホワイト・グレーに還元することで、アスレチック写真とプロダクトカラーが競合なく主役を張れる環境をつくります。その結果、ウェブサイトというよりも、高級誌の精度で組み上げたスポーツエディトリアルのような佇まいが生まれます。すべてのピクセルは商品を売るか、商品へと誘導するために存在しています。

「Podium CDS」（Nike社内のコアデザインシステム）は徹底的なモノクロームの基盤を築いています。UIはブラック（#111111）のテキストとホワイトのサーフェスの中に溶け込み、汗ばんだアスリート・空中に浮かぶシューズ・スタジアムのエネルギーといったヒーロー写真が感情的な重みを担います。UIにカラーが登場するのは、エラーを示すレッド・リンクのブルー・成功を示すグリーンといった機能的な場面にほぼ限られます。色のストーリーはプロダクト自身が語るのです。この抑制こそが視覚的パラドックスを生み出します——インターネット上で最もカラフルなページが最もミニマルに感じられるのは、すべての鮮やかさがインターフェースではなく商品から発せられているためです。

タイポグラフィシステムは Nike のビジュアルアイデンティティのもう半分を担います。Nike Futura ND——信じられないほどタイトなライン高（0.90）を持つカスタムの縮幅 Futura バリアント——による巨大なアッパーケースヘッドラインは、タイポグラフィの衝撃波のようにヒーロービジュアルを貫きます。ヘッドラインの下では、ワーキングホース的な Helvetica Now ファミリーがナビゲーションからプロダクト説明まで、スイス精度のクラリティをもって担います。表現力豊かなディスプレイ書体と機能的なボディ書体の分担は、Nike のブランドの二重性——インスピレーションと実行——を映し出しています。

主な特徴:

プロダクト写真だけが唯一のカラーソースとなるモノクロームUI（ブラック・ホワイト・グレー）
ヒーロー画像を貫く超大型アッパーケースディスプレイタイポグラフィ（96px、ライン高 0.90）
ボーダーラジウスなし——画像があらゆる端を埋めるフルブリード写真
主要インタラクティブ要素としてのピル形ボタン（30px ラジウス）
アスレチックな規律に基づく 8px スペーシンググリッド——すべての数値がシステムにスナップ
大型ナビゲーション画像カードによるカテゴリー主導のショッピングアーキテクチャ
シャドウなし・ボーダー最小限のエレベーションモデル——グレーの変化のみでサーフェスを区別

2. カラーパレットと役割

プライマリ

Nike Black (#111111): ファンデーション——プライマリテキスト、ボタン背景、ナビテキスト、ヒーローオーバーレイ。純粋なブラック（#000000）をあえて避けることで、わずかに柔らかい読書体験を提供
Nike White (#FFFFFF): プライマリページキャンバス、ダーク上のボタンテキスト、カードサーフェス、ナビバー背景

サーフェス・バックグラウンド

Snow (#FAFAFA): 最も明るいサーフェス、ホワイトに近いわずかな差別化（--podium-cds-color-grey-50）
Light Gray (#F5F5F5): セカンダリ背景、検索インプット塗り、画像プレースホルダー、ローディングスケルトン（--podium-cds-color-grey-100）
Hover Gray (#E5E5E5): ホバー状態の背景、無効ボタンの塗り（--podium-cds-color-grey-200）
Dark Surface (#28282A): ダーク・反転セクションのプライマリ背景（--podium-cds-color-grey-800）
Deep Charcoal (#1F1F21): インバースプライマリ背景、最も暗いノンブラックサーフェス（--podium-cds-color-grey-900）
Dark Hover (#39393B): ダーク背景上のホバー状態（--podium-cds-color-grey-700）

ニュートラル・テキスト

Primary Text (#111111): メインボディテキスト、ヘッディング、ナビリンク（--podium-cds-color-text-primary）
Secondary Text (#707072): 説明コピー、メタデータ、タイムスタンプ、価格ラベル（--podium-cds-color-text-secondary）
Disabled Text (#9E9EA0): 非アクティブ要素、利用不可オプション（--podium-cds-color-text-disabled）
Disabled Inverse (#4B4B4D): ダーク背景上の無効テキスト（--podium-cds-color-text-disabled-inverse）
Border Primary (#707072): 標準ボーダーカラー、セカンダリテキストと一致
Border Secondary (#CACACB): 繊細なボーダー、インプットボーダー、区切り線（--podium-cds-color-grey-300）
Border Disabled (#CACACB): 非アクティブなボーダー状態
Border Active (#111111): アクティブ・フォーカスボーダー、プライマリテキストと一致

セマンティック・アクセント

Nike Red (#D30005): 重大エラー、セールバッジ、緊急通知（--podium-cds-color-red-600）
Bright Red (#EE0005): Red-500、強調用のわずかに明るいレッド
Nike Orange Badge (#D33918): バッジテキスト、プロモーションコールアウト（--podium-cds-color-text-badge）
Orange Flash (#FF5000): 表現力豊かなオレンジアクセント（--podium-cds-color-orange-400）
Success Green (#007D48): 確認、在庫あり、ポジティブな状態（--podium-cds-color-green-600）
Success Inverse (#1EAA52): ダーク背景上の成功色（--podium-cds-color-green-500）
Link Blue (#1151FF): テキストリンク、情報ハイライト（--podium-cds-color-blue-500）
Info Inverse (#1190FF): ダーク背景上のリンク（--podium-cds-color-blue-400）
Warning Yellow (#FEDF35): 警告背景、注意バナー（--podium-cds-color-yellow-200）
Focus Ring (rgba(39, 93, 197, 1)): キーボードフォーカスインジケーターリング

拡張カラースペクトラム（Podium CDS）

各カラーランプはキャンペーンとプロダクトページでの表現用途のために 50〜900 の範囲で用意されています:

Red: #FFE5E5 → #EE0005 → #530300
Orange: #FFE2D6 → #FF5000 → #3E1009
Yellow: #FEF087 → #FCA600 → #99470A
Green: #DFFFB9 → #1EAA52 → #003C2A
Teal: #D4FFFB → #008E98 → #043441
Blue: #D6EEFF → #1151FF → #020664
Purple: #E4E1FC → #6E0FF6 → #1C0060
Pink: #FFE1F3 → #ED1AA0 → #4C012D

グラデーションシステム

NikeはUIグラデーションを避けています。グラデーションが登場する場合は写真的なもの——プロダクトヒーロー背景に適用されます（例: 赤いシューズを赤からより深い赤へのグラデーションの上に置く）。デザインシステム自体はフラットカラーのみで構成されています。

3. タイポグラフィルール

フォントファミリー

ディスプレイ: Nike Futura ND（Nike専用のカスタム縮幅 Futura バリアント）

フォールバック: Helvetica Now Text Medium, Helvetica, Arial
大型アッパーケースディスプレイヘッドラインのみに使用
特徴的なタイトなライン高（0.90）とアッパーケース変換

ヘッディング: Helvetica Now Display Medium

フォールバック: Helvetica, Arial
24〜32pxのセクション見出しとプロダクトタイトルに使用

Body Medium: Helvetica Now Text Medium（ウェイト 500）

フォールバック: Helvetica, Arial
リンク、ボタン、キャプション、強調ボディテキストに使用

Body: Helvetica Now Text（ウェイト 400）

フォールバック: Helvetica, Arial
標準ボディコピー、説明文、メタデータに使用

アラビア語: Neue Frutiger Arabic——ロケール専用の代替書体

階層

役割	サイズ	ウェイト	ライン高	レタースペーシング	備考
Display	96px	500	0.90	—	Nike Futura ND、アッパーケース、ヒーローヘッドライン
Heading 1	32px	500	1.20	—	Helvetica Now Display Medium、セクションタイトル
Heading 2	24px	500	1.20	—	Helvetica Now Display Medium、サブセクション
Heading 3	16px	500	1.50	—	Helvetica Now Text Medium、カードタイトル
Body	16px	400	1.75	—	Helvetica Now Text、プロダクト説明
Body Medium	16px	500	1.75	—	Helvetica Now Text Medium、強調テキスト
Link	16px	500	1.75	—	Helvetica Now Text Medium、ナビゲーションリンク
Link Small	14px	500	1.86	—	Helvetica Now Text Medium、フッター・ユーティリティリンク
Button	16px	500	1.50	—	Helvetica Now Text Medium、CTAテキスト
Button Small	14px	500	1.50	—	Helvetica Now Text Medium、セカンダリボタン
Caption	14px	500	1.50	—	Helvetica Now Text Medium、価格ラベル
Small	12px	500	1.50	—	Helvetica Now Text Medium、タイムスタンプ
Tiny	12px	400	1.50	—	Helvetica Now Text、法的テキスト

原則

Nike のタイポグラフィはテンションの研究です。ディスプレイ層——0.90 という圧倒的なライン高を持つ 96px の Nike Futura ND——はスタジアムのスコアボードのように感じさせるよう設計されています。巨大で、凝縮されていて、アッパーケースで、無視できない。ヘッドラインを戦いの雄叫びへと変換します。ディスプレイ層の下では、Helvetica Now が臨床的な対極点を提供します——快適なプロダクトブラウジングのための 1.75 のゆったりしたライン高を持つスイス精度の可読性。ウェイト 500（Medium）がボディテキスト全体にわたって支配的で、Nike の文章にボールドの重さを持たせることなく、わずかな主張を与えます——すべての文が叫び声ではなく、自信に満ちた推薦として読まれます。

4. コンポーネントスタイリング

ボタン

プライマリ

背景: Nike Black (#111111)
テキスト: White (#FFFFFF)、16px/500、Helvetica Now Text Medium
ボーダー: なし
ボーダーラジウス: 完全丸ピル（30px）
パディング: ~12px 24px
ホバー: 背景が Grey-500 (#707072) に変化、テキストホバーカラー
アクティブ: 透明度 0.5 の scale(0) リップルエフェクト
フォーカス: rgba(39, 93, 197, 1) の 2px ボックスシャドウリング
トランジション: background 200ms ease

ダーク上のプライマリ

背景: White (#FFFFFF)
テキスト: Black (#111111)
ホバー: 背景が Grey-300 (#CACACB) に変化

セカンダリ（アウトライン）

背景: transparent
テキスト: Nike Black (#111111)
ボーダー: 1.5px solid #CACACB（grey-300）
ボーダーラジウス: 30px
ホバー: ボーダーが #707072 に濃くなり、背景が grey-200 に

無効

背景: Grey-200 (#E5E5E5)
テキスト: Grey-400 (#9E9EA0)
カーソル: not-allowed

アイコンボタン

背景: Grey-100 (#F5F5F5)
形状: 30px ラジウス（または円形の場合 50%）
パディング: 6px
ホバー: Grey-500 背景

カードとコンテナ

背景: White (#FFFFFF)——ほとんどの場合、カードの境界は見えない
ボーダーラジウス: プロダクト画像カードは 0px（端から端まで画像）、インタラクティブコンテナは 20px
シャドウ: なし——Nike はカードシャドウを一切使用しない
ホバー: プロダクトカードにリフトエフェクトなし、カード内テキストリンクにはアンダーライン
プロダクトカード: 上部に画像（ラジウスなし）、下に 12px ギャップでテキストメタデータ
カテゴリカード: ダークグラデーション上にテキストオーバーレイのフルブリード写真
トランジション: ホバー時の画像スワップに opacity 200ms ease

インプットとフォーム

背景: Grey-100 (#F5F5F5)
ボーダー: 表示時は 1px solid #CACACB、検索ではボーダーレス
ボーダーラジウス: 24px（検索インプット）、8px（フォームインプット）
フォント: Helvetica Now Text、16px
フォーカス: ボーダーが #111111（border-active）に変化、rgba(39, 93, 197, 1) の 2px フォーカスリング
エラー: ボーダー #D30005（クリティカル）
プレースホルダー: Grey-500 (#707072)
トランジション: border-color 200ms ease

背景: White (#FFFFFF)、スティッキー
高さ: デスクトップ ~60px
左: Nike Swoosh ロゴ（24x24px SVG）
中央: カテゴリリンク（New & Featured、Men、Women、Kids、Sale）、16px/500 Helvetica Now Text Medium
右: 検索（24px ラジウスインプット）、お気に入り、カートアイコン
ホバー: テキストカラーが Grey-500 (#707072) に変化
モバイル: ハンバーガーメニュー、フルスクリーンオーバーレイ
トップバナー: ダーク背景（#111111）とホワイトテキストのプロモーションメッセージバー

画像処理

ヒーロー画像: フルブリード、ボーダーラジウスなし、端から端まで
プロダクトグリッド: 正方形（1:1）または 4:3 アスペクト比、ボーダーラジウスなし
カテゴリカード: 16:9 または 4:3、テキストオーバーレイのフルブリード
画像プレースホルダー: Grey-100 (#F5F5F5) のソリッド背景
遅延読み込み: ネイティブ loading="lazy"、スケルトンは #F5F5F5 背景を使用
プロダクトホバー: セカンダリ画像スワップ（フロントビュー → サイドビュー）

プロモーションバナー

フルワイドのダーク（#111111）背景にホワイトテキスト
タイトなパディング（縦 8〜12px）
センタリングされたテキスト、12px/500 Helvetica Now Text Medium
送料プロモーション、メンバー特典、セール告知に使用

5. レイアウト原則

スペーシングシステム

基本単位: 4px（プライマリグリッドは 8px の倍数）

トークン	値	用途
space-1	4px	タイトなアイコンギャップ、インラインスペーシング
space-2	8px	基本単位、ボタンアイコンギャップ
space-3	12px	カード内部パディング、タイトなマージン
space-4	16px	標準パディング、ナビスペーシング
space-5	20px	プロダクトカードギャップ
space-6	24px	セクション内部パディング、グリッドギャップ
space-7	32px	セクション区切り
space-8	48px	主要セクションパディング
space-9	64px	ヒーローセクションパディング
space-10	80px	大型セクションスペーシング

グリッドとコンテナ

コンテナ最大幅: 1920px
標準コンテンツ幅: 水平パディングを持つ ~1440px
プロダクトグリッド: デスクトップ 3カラム、タブレット 2カラム、モバイル 1カラム
カテゴリグリッド: フルブリード画像の 3カラム
グリッドギャップ: プロダクトカード間 4〜12px（意図的にタイト）
水平パディング: デスクトップ 48px、タブレット 24px、モバイル 16px

ホワイトスペース哲学

Nike のホワイトスペース戦略は意図的に積極的です——ファッションブランドのような贅沢で息をするやり方ではなく、すべてのピクセルをコンテンツまたは意図的な空白で満たすという圧縮・高密度な方法です。プロダクトグリッドは最小限のギャップ（4〜12px）を使って豊かさと選択肢の感覚を生み出します。セクション区切りは大きめ（48〜80px）でショッピングの文脈を区切ります。全体の効果は、商品で溢れながらもナビゲートしやすい店のような感覚——よく整理された大型スポーツ用品店のようです。

ボーダーラジウスのスケール

値	使用箇所
0px	プロダクト画像、ヒーロー写真（シャープなエッジ）
8px	フォームインプット（検索以外）
18px	小型インタラクティブ要素
20px	UIコンテンツを持つコンテナ・カード
24px	検索インプット、中型ピル
30px	ボタン、タグ、フィルター（フルピル）
50%	円形アイコンボタン、アバタープレースホルダー

6. 奥行きとエレベーション

レベル	処理	用途
フラット	シャドウなし、ボーダーなし	すべてのデフォルト状態
ディバイダー	`0px -1px 0px 0px #E5E5E5 inset`	セクション間の繊細なインセットライン
フォーカス	`0 0 0 2px rgba(39, 93, 197, 1)`	キーボードフォーカスリング
オーバーレイ	写真上のダークスクリム	画像上テキストの可読性確保

Nike のエレベーション哲学は徹底的にフラットです。カードシャドウなし、ホバーリフトなし、フローティング要素なし。奥行きはカラーのみで伝えられます——ダークセクションが後退し、ライトセクションが前進し、グレーの変化が状態変化を示します。このフラットさはアスレチックで実直なブランドパーソナリティを強化します——視覚的な装飾ゼロ、ダイレクトなコミュニケーションのみ。システム全体における唯一の「シャドウ」は 1px のインセット区切り線と、アクセシビリティ要件のフォーカスリングだけです。

デコラティブな奥行き

ヒーロー写真オーバーレイ: テキスト可読性のためのフルブリード写真上のダークグラデーションスクリム
プロダクト背景グラデーション: ヒーロープロダクトショット背後のカラー背景（例: 赤いシューズを赤いグラデーション上に）
バナーバー: ページ上部のソリッドダーク（#111111）プロモーションストリップ

7. すべきこと・してはいけないこと

すべきこと

プライマリテキストには Nike Black（#111111）を使用——純粋な #000000 は避ける
ボタンはピル形（30px ラジウス）を維持し、プライマリ・セカンダリのバリアントのみに限定する
ヒーローセクションにはフルブリード・端から端への写真を使用——画像にボーダーラジウスを付けない
プロダクト写真がすべてのカラービビッドさを提供できるよう、UIはモノクロームに保つ
Nike Futura ND のアッパーケースはディスプレイヘッドライン（96px以上）にのみ使用する
豊かさと選択肢の感覚を出すため、プロダクトグリッドのギャップをタイトに（4〜12px）保つ
すべてのインプットとプレースホルダー背景には Grey-100（#F5F5F5）を使用する
カラーはセマンティックな意味（赤=エラー、緑=成功、青=リンク）のみに予約する
すべてのインタラクティブテキスト要素にはウェイト 500（Medium）を使用する

してはいけないこと

カードにシャドウを追加しない——Nike のエレベーションモデルは完全にフラット
プロダクト画像にボーダーラジウスを使用しない——丸い角はUI要素のみ
UI要素のグレースケール以外にブランドカラーを導入しない
Nike Futura ND を 24px 未満で使用しない——これはあくまでディスプレイ書体
ホバーリフトエフェクトを追加しない——Nike のカードはホバー時にアニメーションしない
ボタンやリンクに通常ウェイト（400）を使用しない——常に 500 を使用する
UI要素の背後にカラー背景を置かない——カラーはプロダクトコンテキストのために予約されている
カードあたりのテキスト階層を 2 レベル以上（タイトル+ボディ）にしない
装飾的な区切り線を追加しない——1px インセットが唯一の区切りパターン
コントラストを柔らかくしない——Nike のデザインはブラックオンホワイトのコントラストを最大限に押し上げている

8. レスポンシブ挙動

ブレークポイント

名前	幅	主な変化
モバイル	<640px	1カラム、ハンバーガーナビ、ディスプレイテキストが縮小、タイトな 16px パディング
小型タブレット	640-768px	2カラムプロダクトグリッドが始まる、ナビは引き続き折りたたみ
タブレット	768-960px	2カラムグリッド、カテゴリカードがスケール、水平パディング 24px
小型デスクトップ	960-1024px	ナビが完全な水平表示に展開、3カラムプロダクトグリッド
デスクトップ	1024-1440px	フルレイアウト、拡張ナビ、3カラムグリッド、48px パディング
大型デスクトップ	>1440px	最大幅コンテナが中央配置、マージン増加、ヒーロー画像がフルブリード

タッチターゲット

最小タッチターゲット: 44x44px（WCAG AAA）
モバイルナビアイコン: 48x48px タッチエリア
プロダクトカード: サーフェス全体がタップ可能
フィルターピル: 最小高さ 36px、12px パディング

折りたたみ戦略

ナビゲーション: 960px 以下でフルカテゴリリンク → ハンバーガーメニュー、検索・お気に入り・カートアイコンは引き続き表示
プロダクトグリッド: 3カラム → 960px で 2カラム → 640px で 1カラム
ヒーローセクション: ディスプレイテキストが 96px → 64px → 48px にスケール、ヒーロー画像はすべてのサイズでフルブリードを維持
カテゴリカード: 3カラム → 2カラム → 1カラム、フルブリード画像を維持
セクションパディング: ビューポートが狭まるにつれ 80px → 48px → 32px → 24px
プロモーションバナー: テキストが折り返しまたはトランケート、ダーク背景を維持

画像の挙動

Nike CDN（c.static-nike.com）を通じた幅パラメーター付きレスポンシブ画像
プロダクト画像: 複数の解像度による srcset（w_320、w_640、w_960、w_1920）
ヒーロー画像: すべてのブレークポイントでフルブリード、アスペクト比がシフト（デスクトップ 16:9 → モバイル 4:3）
遅延読み込み: ネイティブ loading="lazy"、読み込み中は grey-100 プレースホルダー
アートディレクション: デスクトップとモバイルでヒーロークロップが変わる

9. エージェントプロンプトガイド

クイックカラーリファレンス

プライマリCTA: Nike Black (#111111)
背景: White (#FFFFFF)
セカンダリサーフェス: Light Gray (#F5F5F5)
見出しテキスト: Nike Black (#111111)
ボディテキスト・ホバー: Secondary Text (#707072)
ボーダー: Border Secondary (#CACACB)
エラー: Nike Red (#D30005)
リンク: Link Blue (#1151FF)

コンポーネントプロンプト例

「ボーダーラジウスなしの端から端へのフルブリード写真、テキスト用ダークグラデーションオーバーレイ、0.90 のライン高を持つ Nike Futura スタイルの 96px/500 の巨大アッパーケースヘッドライン、Nike Black（#111111）のピルボタン（30px ラジウス）を使ったプロダクトヒーローセクションを作成してください」
「正方形画像（ボーダーラジウスなし）、カード間 4px ギャップ、16px/500 Nike Black（#111111）のプロダクト名、14px/500 の価格、Grey-500（#707072）のセカンダリテキストを持つ 3カラムプロダクトカードグリッドをデザインしてください」
「左寄せのロゴ、16px/500（#111111）・ホバーカラー #707072 のセンタリングされたカテゴリリンク、右寄せの検索（24px ラジウス、#F5F5F5 背景）・お気に入り・カートアイコンを持つスティッキーなホワイトナビゲーションバーを構築してください」
「#111111 背景、ホワイトの 12px/500 センタリングテキスト、8px 縦パディング——フルワイド、ボーダーラジウスなしのプロモーションバナーストリップを作成してください」
「transparent 背景、1.5px #CACACB ボーダー、30px ピルラジウス、16px/500 #111111 テキスト、ホバー時にボーダーが #707072 に濃くなるセカンダリアウトラインボタンをデザインしてください」

改善ガイド

このデザインシステムで生成した既存の画面をブラッシュアップする際:

一度に一つのコンポーネントに集中する
このドキュメントの具体的なカラー名と16進コードを参照する
プロダクト写真こそがカラー——UIはモノクロームに保つ
状態変化にはグレースケールを使用する: #F5F5F5 → #E5E5E5 → #CACACB → #707072
UIで何か色が付きすぎていると感じたら、おそらくそうです——Nike は UIをグレースケールに保つ
ディスプレイタイプ（Nike Futura）は常にアッパーケースで、24px 未満には使わない
ボディタイプ（Helvetica Now）はインタラクティブ要素にはほぼ常にウェイト 500 を使用する

27 KiB Raw Blame History Unescape Escape