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

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

Category: Eコマース＆小売 Eコマースプラットフォーム。ダークファーストのシネマティック、ネオングリーンのアクセント、超細字のタイポグラフィ。

1. ビジュアルテーマと雰囲気

Shopify.com はダークファーストのデジタルシアター——コマースプラットフォームを映画のプレミア上映のように演出するウェブサイトです。体験全体は、深い森の緑のかすかな囁きを帯びたほぼ黒い表面（#02090A、#061A1C、#102620）の上に展開され、SaaS のマーケティングページというより、テックカンファレンスでの限定製品発表のような夜の雰囲気を生み出しています。この暗さは冷たくも企業的でもなく——暗いホールの最前列に座っているような、ラグジュアリー体験の温かく包み込む暗さです。

タイポグラフィは紛れもなく主役です。NeueHaasGrotesk——洗練された Helvetica の後継——は記念碑的なスケール（96px）で、信じられないほど細いウェイト（330-400）で登場し、インクで印刷されたのではなく光で刻まれたような見出しを生み出します。ss03 OpenType 機能が字形に独特な個性を与え、Shopify のタイポグラフィを一般的な Helvetica の使い方から区別しています。ディスプレイ層の下では、Inter Variable が外科的な精度でボディテキストを処理し、同様に珍しい可変ウェイト（420、450、550）を使用します——これらは従来のウェイトストップの間の空間に存在します。この精密さは、すべての細部にこだわる企業のシグナルです。

カラーは極度の節制を持って使われています。メインアクセントは Shopify ネオングリーン（#36F4A4）——電気的なミントカラーで、フォーカスリングとアクセントハイライトにのみ現れ、暗いキャンバスに対して生物発光のシグナルのように脈打ちます。よりソフトなグリーンティント（アロエ #C1FBD4、ピスタチオ #D4F9E0）が雰囲気のウォッシュを提供します。白は暗い表面で唯一重要なテキストカラーで、亜鉛ベースのニュートラルスケール（#A1A1AA から #3F3F46）が静かな情報の階層を処理します。結果として、コマーステクノロジーがSFの未来に属するように感じさせるデザインが生まれます。

Key Characteristics：

深い森のティールアンダートーンを持つダークファーストデザイン（純粋な黒ではない）
記念碑的なスケール（96px）の超細ディスプレイタイポグラフィ（ウェイト 330）が幽玄な存在感を生む
暗闇に対する唯一の高エネルギーアクセントとしてのネオングリーン（#36F4A4）
メインのインタラクティブシェイプとしてのフルピルボタン（9999px 半径）
写真的な奥行きを生み出す多層のボックスシャドウ
暗いUIコンテキストに埋め込まれ、周囲の暗さに溶け込む製品スクリーンショット
テキスト階層のための亜鉛ベースのニュートラルスケール——ウォームとクールのバランス

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

プライマリ

Shopify ホワイト（#FFFFFF）：暗い表面のプライマリテキスト、ボタンフィル、高コントラスト要素
Shopify ブラック（#000000）：ボディ背景、白ボタン上のテキスト、最大コントラストベース（--color-shade-100）

セカンダリ＆アクセント

ネオングリーン（#36F4A4）：シグネチャーアクセント——フォーカスリング、インタラクティブハイライト、アクティブ状態インジケーター。電気的で生物発光的
アロエ（#C1FBD4）：デコラティブ背景、雰囲気カードのソフトグリーンウォッシュ（--color-aloe-10）
ピスタチオ（#D4F9E0）：微妙な表面差別化のための最もライトなグリーンティント（--color-pistachio-10）

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

ボイド（#000000）：ルートページ背景——最大深度のための真の黒
ディープティール（#02090A）：カードサーフェス、コンテンツコンテナ——緑のアンダートーンを持つほぼ黒
ダークフォレスト（#061A1C）：明確な緑の個性を持つセクション背景
フォレスト（#102620）：浮き上がった暗い表面、ヘッダー背景——最も温かい暗いシェード
ダークカードボーダー（#1E2C31）：暗い表面のカードボーダー、微妙な境界定義

ニュートラル＆テキスト（亜鉛スケール）

Shade-30（#D4D4D8）：最も明るいニュートラル、暗い場所でほとんど見えないボーダー（--color-shade-30）
ミュートテキスト（#A1A1AA）：セカンダリテキスト、メタデータ、説明——静かな声
Shade-50（#71717A）：ターシャリテキスト、タイムスタンプ、最も重要度の低い情報（--color-shade-50）
Shade-60（#52525B）：無効テキスト、デコラティブニュートラル（--color-shade-60）
Shade-70（#3F3F46）：微妙なディバイダー、ほぼ見えないUI境界（--color-shade-70）
ライトボーダー（#E4E4E7）：明るい表面のボーダー（レア——ライトモードのモーダルのみ）

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

Link Muted（#9797A2）：下線装飾を持つミュートリンクテキスト
Link Sage（#9DABAD）：ティールティントのミュートリンク
Link Lavender（#BDBDCA）：より明るいリンクバリアント
Link Mint（#99B3AD）：テーマセクション用グリーンティントリンクバリアント

グラデーションシステム

ダークティールウォッシュ：#102620 中心から #02090A エッジへのラジアルグラデーション——製品ショーケースの背後に使用
グリーンアトモスフェリック：ヒーローセクションの背後の微妙なグリーンティントの環境グラデーション、ソリッドカラーなしで奥行きを生む
スポットライト：黒へとフェードする集中した明るいエリア——基調講演スタイルのプレゼンテーション照明を生む

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

フォントファミリー

ディスプレイ： NeueHaasGrotesk（洗練された Helvetica の後継、可変フォント）

フォールバック：Helvetica、Arial、sans-serif
OpenType 機能：ss03（スタイリスティックセット 3——独特の字形代替）
利用可能なウェイト：330、360、400、500、750（可変）
すべての見出し、ヒーローテキスト、大型ディスプレイ要素に使用

ボディ： Inter-Variable

フォールバック：Helvetica、Arial、sans-serif
OpenType 機能：ss03
利用可能なウェイト：400、420、450、500、550（可変）
ボディテキスト、リンク、ボタン、UI要素に使用

モノ： ui-monospace

フォールバック：SFMono-Regular、Menlo、Monaco、Consolas、Liberation Mono、Courier New
コードスニペット、データラベル、技術的コンテンツに使用

階層

役割	サイズ	ウェイト	行高	文字間隔	備考
Display XL	96px	400	1.00	—	NeueHaasGrotesk、ヒーロー見出し、"ss03"
Display XL Bold	90.74px	750	1.00	4.54px	NeueHaasGrotesk、強調ディスプレイ
Display XL Tracked	96px	400	1.00	2.4px	NeueHaasGrotesk、スペーシングディスプレイ
Display Light	96px	330	0.96	—	NeueHaasGrotesk、幽玄なディスプレイ
Heading 1	70px	330	1.00	—	NeueHaasGrotesk、セクションタイトル
Heading 2	55px	330	1.16	—	NeueHaasGrotesk、サブセクション
Heading 3	48px	330	1.14	—	NeueHaasGrotesk、機能タイトル
Heading 4	32px	360	1.14	0.32px	NeueHaasGrotesk、カード見出し
Heading 5	28px	500	1.28	0.42px	NeueHaasGrotesk、小見出し
Heading 6	24px	400	1.14	0.36px	NeueHaasGrotesk、マイナー見出し
Body Large	20px	500	1.40	0.3px	NeueHaasGrotesk / Inter、リード段落
Body	18px	400	1.56	—	Inter-Variable、標準ボディ
Body Medium	18px	550	1.56	—	Inter-Variable、強調ボディ
Body Small	16px	400	1.50	—	Inter / NeueHaasGrotesk、コンパクトボディ
Body Small Medium	16px	420	1.50	—	Inter-Variable、わずかに強調
Button	16px	400	1.50	—	NeueHaasGrotesk、CTAテキスト
Nav Link	18px	500	1.25	0.72px	NeueHaasGrotesk、ナビゲーション項目
Caption	14px	500	1.49	0.28px	NeueHaasGrotesk / Inter、メタデータ
Caption Medium	14px	550	1.49	0.28px	Inter-Variable、強調キャプション
Overline	15.36px	400	1.50	1.54px	NeueHaasGrotesk、ワイドトラッキングラベル
Micro	13px	500	1.50	-0.13px	Inter、タイトトラッキング小文字
Label	12px	400	1.20	0.72px	Inter、大文字ラベル
Code	16px	400	1.50	—	ui-monospace、大文字、コードブロック
Code Small	12px	400	1.33	—	ui-monospace、大文字、インラインコード

原則

Shopify のタイポグラフィは可変フォントの精度における傑作です。ディスプレイ層はほぼ完全にウェイト 330-400 で構成されています——投影された光のように暗い背景の上に浮かんでいるような、羽のように軽いテキストです。これはほとんどの SaaS サイトが取る太くて重いアプローチとは正反対です：他のサイトが叫ぶところで、Shopify はスケールの上で囁きます。ウェイト 330 での 96px の見出しは、巨大なサイズと繊細なストロークの逆説を生み出し——記念碑的でありながら繊細に感じさせます。ss03 OpenType 機能は、特定の文字（おそらく 'a'、'g'、および特定の数字）をより洗練された外観にするスタイリスティックセットを有効にし、Shopify のタイポグラフィを標準的な Helvetica Neue の使い方から区別します。Inter Variable はボディ層を外科的な精度で処理し、従来のストップの間に存在する 420 や 550 などのウェイトを使用します——すべてのテキストが必要とする正確な視覚的ウェイトを持ちます。

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

ボタン

プライマリ（ホワイトフィル）

背景：ホワイト（#FFFFFF）
テキスト：ブラック（#000000）
ボーダー：2px solid transparent
ボーダー半径：フルピル（9999px）
パディング：12px 26px 12px 16px（非対称——視覚的バランスのため右パディングを多く）
ホバー：わずかな不透明度の低下または背景のシフト
フォーカス：2px #36F4A4（ネオングリーン）のアウトラインリング
トランジション：all 200ms ease

セカンダリ（ゴースト/アウトライン）

背景：透明
テキスト：ホワイト（#FFFFFF）
ボーダー：2px solid ホワイト（#FFFFFF）
ボーダー半径：フルピル（9999px）
パディング：12px 26px 12px 16px
ホバー：ブラックテキストのホワイト背景にフィル
フォーカス：2px #36F4A4 アウトライン

バッジ/タグ（ニュートラルフィル）

背景：rgba(255, 255, 255, 0.2)（フロストガラス）
テキスト：ホワイト（#FFFFFF）
ボーダー：なし
ボーダー半径：わずかに丸い（4px）
パディング：12px 16px
フォント：16px レギュラー

カード＆コンテナ

背景：暗いページではディープティール（#02090A）
ボーダー：1px solid #1E2C31（ダークカードボーダー）——ほぼ見えない境界
ボーダー半径：標準カード 8px、フィーチャードカード 12px、上部丸みカード 20px 20px 0 0
シャドウ：多層システム：
- 静止：rgba(0,0,0,0.1) 0px 0px 0px 1px, rgba(0,0,0,0.1) 0px 2px 2px, rgba(0,0,0,0.1) 0px 4px 4px, rgba(0,0,0,0.1) 0px 8px 8px + rgba(255,255,255,0.03) 0px 1px 0px inset
- インセットの白いハイライトが微妙な上縁のグローを生む
ホバー：シャドウが広がり、カードがわずかに明るくなることがある
トランジション：box-shadow 300ms ease、transform 200ms ease

インプット＆フォーム

背景：透明またはダークフォレスト（#061A1C）
テキスト：ホワイト（#FFFFFF）
ボーダー：1px solid #3F3F46（Shade-70）
ボーダー半径：8px
パディング：12px 16px
フォーカス：2px solid #36F4A4（ネオングリーンフォーカスリング）
プレースホルダー：Shade-50（#71717A）
トランジション：border-color 200ms ease

背景：透明（暗いヒーローに重ねる）、スクロール時にフォレスト（#102620）になる
高さ：約 64px
左：Shopify ワードマークロゴ（SVG、暗い背景に白）
中央/右：18px/500 NeueHaasGrotesk のナビリンク、白、文字間隔 0.72px
CTA：ホワイトピルボタン「Start for free」（右）
セカンダリ CTA：ホワイトボーダーのゴーストボタン
ホバー：リンクがミュートテキスト（#A1A1AA）に変化またはアンダーラインが付く
モバイル：ハンバーガーメニュー、フルスクリーンダークオーバーレイ
トランジション：スクロール時に背景 300ms ease

画像処理

製品スクリーンショット：暗いUIコンテキストに埋め込まれ、周囲の暗さに溶け込む
管理インターフェースプレビュー：微妙なカードボーダーを持つ暗い背景に表示
アスペクト比：多様——ヒーロー画像はワイド（16:9 程度）、フィーチャーショットはフレキシブル
すべての画像は暗いコンテナ内にフラッシュで配置——明るいボーダーやフレームなし
暗いプレースホルダーサーフェスを持つ遅延読み込み

信頼指標

統計を目立つように表示：「15+」（年）、「150M+」（バイヤー）
NeueHaasGrotesk でディスプレイスケールで表示される数字
パートナー/デベロッパーエコシステムのコールアウトセクション
ページフローに統合されたダークテーマのテスティモニアル

5. レイアウト原則

スペーシングシステム

基本単位：8px

トークン	値	用途
space-1	4px	タイトなインラインギャップ
space-2	8px	基本単位、アイコンギャップ
space-3	12px	カードパディング、タイトなマージン
space-4	16px	標準要素パディング
space-5	24px	カードギャップ、セクションパディング
space-6	28px	ミディアムセクションスペーシング
space-7	32px	セクションブレイク
space-8	36px	大きなパディング
space-9	40px	メジャーセクションパディング
space-10	64px	ヒーローセクションパディング、大きなギャップ

グリッド＆コンテナ

最大コンテナ幅：約 1280px（中央揃え）
ヒーロー：全幅、エッジからエッジの暗い背景に中央揃えテキスト
フィーチャーセクション：テキストと製品スクリーンショットの2カラムレイアウト
統計セクション：大きな数字を持つ水平レイアウト
水平パディング：デスクトップ 64px、タブレット 32px、モバイル 16px
グリッドギャップ：主要コンテンツブロック間 24-32px

ホワイトスペース哲学

Shopify のホワイトスペース戦略はシアトリカルです。セクションは広大な暗いスペースで区切られています——80px から 120px の純粋な黒い呼吸空間——ウェブページではなくプレゼンテーションのテンポを生み出します。各コンテンツブロックは基調講演スタイルのスクロールの中で独自の「スライド」です。セクション内では、スペーシングはよりタイトで意図的で、広大な虚空に対してフォーカルデンシティを生み出します。マクロレベルの空白とミクロレベルの精度のコントラストが、サイトにそのシネマティックなカデンスを与えています。

ボーダー半径スケール

値	コンテキスト
4px	タグ、バッジ、マイクロ要素
8px	標準カード、インプット、動画コンテナ
12px	フィーチャードカード、画像コンテナ、ボタン（非ピル）
20px	上部丸みカード（20px 20px 0 0）、モーダルヘッダー
340px	大型丸みデコラティブ要素
9999px	ピルボタン、ピルバッジ、ナビ要素

6. 深度と高度

レベル	処理	用途
ベース	シャドウなし、暗い表面	デフォルトページ背景
サトル	`rgba(0,0,0,0.1) 0px 0px 0px 1px` + インセットホワイトグロー	静止カード
ミディアム	多層：1px リング + 2px + 4px + 8px シャドウスタック	浮き上がったカード、フィーチャードセクション
ハイ	`rgba(0,0,0,0.25) 0px 25px 50px -12px`	モーダル、ドロップダウン、オーバーレイ
フォーカス	`0px 0px 0px 2px #36F4A4`	キーボードフォーカスリング（ネオングリーン）

Shopify のシャドウシステムは異常なほど洗練されています。単一値シャドウの代わりに、カードは積み重なった多層アプローチを使用します：境界定義のための 1px リング、自然な光の減衰のための 2px/4px/8px のプログレッシブブラー、そして上部照明のガラス表面をシミュレートする繊細なインセットホワイトグロー（rgba(255,255,255,0.03)）。暗い背景では、シャドウはすでに暗い表面からさらに暗くなるため、シャドウは従来の高度よりも「アンビエントオクルージョン」として機能します——カードは上に浮かんでいるのではなく、表面にわずかに沈み込んでいるように見えます。

デコラティブな深度

ダークティールグラデーション：ヒーローセクションと製品ショーケースの背後のアンビエントラジアルウォッシュ
スポットライト効果：黒へとフェードする明るい中心エリア、基調講演スタイルのシアトリカルな照明を生む
エッジグロー：インセットボックスシャドウによる暗いカード上の微妙な明るい色のエッジ
グリーンアトモスフェリックヘイロー：ブランドアクセントを反響させるバックグラウンドグラデーションの微かなグリーンティント

7. やるべきこととやってはいけないこと

やるべきこと

深度のためにダークティール-ブラックのサーフェス階層（ボイド → ディープティール → ダークフォレスト → フォレスト）を使用する
ディスプレイタイポグラフィをウェイト 330-400 に保つ——幽玄な軽さがデザインのシグネチャー
ネオングリーン（#36F4A4）をフォーカス状態とクリティカルアクセントハイライトのみに使用する
すべてのプライマリ CTA ボタンに 9999px 半径を適用する——フルピルは譲れない
カードの高度に多層シャドウシステムを使用する——単一シャドウはフラットに見える
すべてのテキストで ss03 OpenType 機能を維持する——タイポグラフィアイデンティティの一部
ボディテキストに Inter Variable、見出しに NeueHaasGrotesk を使用する——役割を混在させない
シネマティックなペーシングのためにセクション間に劇的なスペーシング（80px+）を作る

やってはいけないこと

暗い背景のテキストに純粋な黒（#000000）を使用しない——白（#FFFFFF）のみを使用する
暖色（オレンジ、赤、黄色）を導入しない——パレットは厳密にクール（グリーン、ティール、ニュートラル）
NeueHaasGrotesk のボディテキストに 500 以上のフォントウェイトを使用しない——重いウェイトは幽玄な感覚を壊す
大きな表面にグリーンアクセントを適用しない——ネオングリーンは小さく精密なハイライトのみ
インタラクティブ要素にシャープなコーナー（0px 半径）を使用しない——すべてを丸める
明るい背景を追加しない——ダークテーマは根本的なもので、オプションではない
単一層のボックスシャドウを使用しない——積み重ねたアプローチがシステム
ボディテキストの行高を 1.56 以上に設定しない——Shopify のテキストは比較的コンパクト
同じサイズ/役割で NeueHaasGrotesk と Inter を混在させない——ウェイトスケールが異なる
見出しに 0 以下のレタースペーシングを使用しない——Shopify の見出しはニュートラルまたはポジティブなトラッキング

8. レスポンシブ動作

ブレークポイント

名前	幅	主な変更
モバイル	<640px	シングルカラム、ハンバーガーナビ、ディスプレイテキストを 48px にスケール、16px パディング
タブレット	640-1024px	2カラムグリッド開始、ディスプレイテキスト 70px、32px パディング
デスクトップ	1024-1440px	フルレイアウト、展開ナビ、96px ディスプレイ、64px パディング
ラージデスクトップ	>1440px	最大幅コンテナ中央揃え、セクションスペーシング増加

タッチターゲット

最小タッチターゲット：44x44px（WCAG AAA）
ピルボタン：最低 48px の高さと余裕のある水平パディング
ナビリンク：44px のタッチエリア
カードサーフェス：リンクされている場合、カード全体がタップ可能

折り畳み戦略

ナビゲーション：全水平リンク → 1024px 以下でハンバーガーメニュー；ロゴと CTA ボタンは表示を維持
ヒーローセクション：96px ディスプレイ → タブレットで 70px → モバイルで 48px；シングルカラム中央揃えを維持
フィーチャーセクション：テキスト+画像の2カラム → 768px 以下でスタックシングルカラム
統計：水平行 → モバイルで垂直スタック
セクションパディング：ビューポートが狭まるにつれ 64px → 40px → 24px → 16px
カード：グリッド → スタック、モバイルでフル幅を維持

画像の動作

製品スクリーンショット：暗いコンテナ内でレスポンシブ、アスペクト比を維持
ヒーロー画像：すべてのブレークポイントで全幅、暗いプレースホルダーで遅延読み込み
管理UIプレビュー：比例してスケール、モバイルでクロップされる場合がある
すべての画像は CDN（cdn.shopify.com）とレスポンシブ srcset を使用

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

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

プライマリ CTA：Shopify ホワイト（#FFFFFF）
ページ背景：ボイドブラック（#000000）
カードサーフェス：ディープティール（#02090A）
セクション背景：ダークフォレスト（#061A1C）
浮き上がった背景：フォレスト（#102620）
アクセント：ネオングリーン（#36F4A4）
ボディテキスト：ホワイト（#FFFFFF）
ミュートテキスト：ミュート（#A1A1AA）
ダークボーダー：ダークカードボーダー（#1E2C31）

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

「真の黒（#000000）背景に、96px/330 NeueHaasGrotesk の白い見出し、20px/500 の #A1A1AA サブタイトル、2つのピルボタン（ホワイトフィル 9999px 半径と 2px ホワイトボーダーのゴースト）を持つヒーローセクションを作成してください」
「ディープティール（#02090A）の上に、1px #1E2C31 ボーダー、12px 半径、多層シャドウ（1px リング + 2px/4px/8px ブラー、10% ブラック）を持ち、32px/360 の白い見出しと 18px/400 の #A1A1AA ボディテキストを含むフィーチャーカードをデザインしてください」
「ダークフォレスト（#061A1C）の上に、96px/750 の白い数字（NeueHaasGrotesk）、16px/400 の #A1A1AA 説明ラベル、統計ブロック間に 64px の余裕あるスペーシングを持つ統計セクションを構築してください」
「透明な背景（スクロール時に #102620 になる）、左に白い Shopify ロゴ、18px/500 の白いナビリンク（0.72px 文字間隔）、右に白いピル「Start for free」ボタンを持つスティッキーナビを作成してください」
「rgba(255,255,255,0.2) のフロストガラス背景、4px 半径、12px 16px パディング、16px の白いテキストを持つタグ/バッジをデザインしてください——暗いカードサーフェスの上に浮かんでいます」

イテレーションガイド

このデザインシステムで生成された既存の画面を改善する際：

一度に 1 つのコンポーネントに集中する
このドキュメントの具体的な色名と16進コードを参照する
覚えておいてください：これはダークファーストデザイン——明るい表面は例外であり、ルールではない
ディスプレイテキストは常に羽のように軽く感じさせる（ウェイト 330-400）——重く見える場合はウェイトを下げる
ネオングリーン（#36F4A4）は貴重——フォーカスとアクセントのみに控えめに使用する
ダークサーフェス階層（ブラック → ディープティール → ダークフォレスト → フォレスト）が微妙な深度を生む
シャドウは多層——単一の box-shadow 値では Shopify カードの感覚を再現できない
ss03 OpenType 機能はタイポグラフィの一貫性のためすべてのテキストで有効にする必要がある

27 KiB Raw Blame History Unescape Escape