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

28 KiB

Raw Blame History

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

Category: フィンテック＆クリプト決済インフラ。シグネチャーパープルのグラデーション、ウェイト300のエレガンス。

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

Stripeのウェブサイトはフィンテックデザインの黄金標準です――テクニカルでありながら高級感があり、精密でありながら温かみも感じられるシステム。ページはクリーンな白いキャンバス（#ffffff）に深いネイビーの見出し（#061b31）、ブランドのアンカーであり同時にインタラクティブなアクセントとして機能するシグネチャーパープル（#533afd）で幕を開けます。これはエンタープライズソフトウェアにありがちな冷たく無機質なパープルではなく、自信と高級感を漂わせる濃厚で彩度の高いバイオレットです。全体的な印象は、世界トップクラスの活字鋳造所によって再設計された金融機関です。

カスタム可変フォント sohne-var は、Stripeのビジュアルアイデンティティを規定する要素です。すべてのテキスト要素でOpenTypeの "ss01" スタイルセットが有効化されており、これによりグリフ形状が変更され、独特の幾何学的でモダンな印象が生まれます。ディスプレイサイズ（48px〜56px）では、sohne-varはウェイト300で使用されます――見出しにウェイト300という超軽量な選択肢は、神秘的でまるで囁くような権威を生み出します。これは「太字のヒーロー見出し」という慣習とは正反対のアプローチで、Stripeの見出しは声高に主張する必要がありません。ネガティブなレタースペーシング（56pxで-1.4px、48pxで-0.96px）がテキストを密度の高い、エンジニアリングされたブロックに締め付けます。小さなサイズでも、システムはウェイト300を使用し、比例的に縮小されたトラッキングを適用します。また、財務データ表示には "tnum" によるタブラー数字を採用しています。

Stripeを真に際立たせるのは、そのシャドウシステムです。多くのサイトのフラットまたは単層アプローチとは異なり、Stripeは多層ブルーティントシャドウを使用しています。シグネチャーの rgba(50,50,93,0.25) と rgba(0,0,0,0.1) を組み合わせることで、薄明かりの空に浮かぶ要素のような、冷たくほぼ大気的な奥行きを持つシャドウが生まれます。主要なシャドウ色（50,50,93）のブルーグレーの下地は、ネイビーパープルのブランドパレットと直接連動しており、エレベーションでさえブランドらしさを感じさせます。

主な特徴：

すべてのテキストにOpenTypeの "ss01" を適用したsohne-var――ブランドのレターフォームを定義するカスタムスタイルセット
シグネチャーの見出しウェイトとしてのウェイト300――軽やかで自信に満ちた、慣習に反するスタイル
ディスプレイサイズでのネガティブレタースペーシング（56pxで-1.4px、以降段階的に緩和）
rgba(50,50,93,0.25) を使用したブルーティントの多層シャドウ――ブランドカラーを感じさせるエレベーション
黒ではなく深いネイビー（#061b31）の見出し――温かみと高級感のある金融グレードの品質
控えめなボーダーラジウス（4px〜8px）――ピル形状なし、過度なシャープネスなし
グラデーションと装飾的要素のためのルビー（#ea2261）とマゼンタ（#f96bee）のアクセント
コードとテクニカルラベルのためのモノスペースコンパニオン SourceCodePro

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

プライマリ

ストライプパープル (#533afd): プライマリブランドカラー、CTAの背景、リンクテキスト、インタラクティブハイライト。システム全体を固定する彩度の高いブルーバイオレット。
ディープネイビー (#061b31): --hds-color-heading-solid。プライマリ見出し色。黒でも灰色でもなく――テキストに温かみと深みを加える非常に暗い青。
ピュアホワイト (#ffffff): ページの背景、カードサーフェス、暗い背景のボタンテキスト。

ブランド＆ダーク

ブランドダーク (#1c1e54): --hds-color-util-brand-900。ダークセクション、フッターの背景、没入感のあるブランドの瞬間のための深いインディゴ。
ダークネイビー (#0d253d): --hds-color-core-neutral-975. 最も暗いニュートラル――ブルーの下地を持つほぼ黒で、苛烈さのない最大限の深みを実現。

アクセントカラー

ルビー (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. アイコン、アラート、アクセント要素のための温かいレッドピンク。
マゼンタ (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. グラデーションと装飾的ハイライトのための鮮やかなピンクパープル。
マゼンタライト (#ffd7ef): --hds-color-util-accent-magenta-100. マゼンタテーマのカードとバッジのためのティントサーフェス。

インタラクティブ

プライマリパープル (#533afd): プライマリリンク色、アクティブ状態、選択された要素。
パープルホバー (#4434d4): プライマリ要素のホバー状態のための暗めのパープル。
パープルディープ (#2e2b8c): --hds-color-button-ui-iconHover. アイコンホバー状態のための暗いパープル。
パープルライト (#b9b9f9): --hds-color-action-bg-subduedHover. 抑えられたホバー背景のためのソフトラベンダー。
パープルミッド (#665efd): --hds-color-input-selector-text-range. レンジセレクターと入力ハイライト色。

ニュートラルスケール

見出し (#061b31): プライマリ見出し、ナビゲーションテキスト、強いラベル。
ラベル (#273951): --hds-color-input-text-label. フォームラベル、セカンダリ見出し。
ボディ (#64748d): セカンダリテキスト、説明文、キャプション。
サクセスグリーン (#15be53): ステータスバッジ、成功インジケーター（背景/ボーダーにはアルファ0.2〜0.4を使用）。
サクセステキスト (#108c3d): 成功バッジのテキスト色。
レモン (#9b6829): --hds-color-core-lemon-500. 警告とハイライトのアクセント。

サーフェス＆ボーダー

ボーダーデフォルト (#e5edf5): カード、ディバイダー、コンテナの標準的なボーダー色。
ボーダーパープル (#b9b9f9): ボタンと入力のアクティブ/選択状態のボーダー。
ボーダーソフトパープル (#d6d9fc): セカンダリ要素のための控えめなパープルティントボーダー。
ボーダーマゼンタ (#ffd7ef): マゼンタテーマ要素のためのピンクティントボーダー。
ボーダーダッシュ (#362baa): ドロップゾーンとプレースホルダー要素のためのダッシュボーダー。

シャドウカラー

シャドウブルー (rgba(50,50,93,0.25)): シグネチャー――ブルーティントのプライマリシャドウ色。
シャドウダークブルー (rgba(3,3,39,0.25)): 高く配置された要素のための深いブルーシャドウ。
シャドウブラック (rgba(0,0,0,0.1)): 深みを強化するためのセカンダリシャドウレイヤー。
シャドウアンビエント (rgba(23,23,23,0.08)): 繊細なエレベーションのためのソフトなアンビエントシャドウ。
シャドウソフト (rgba(23,23,23,0.06)): わずかな浮き上がりのための最小限のアンビエントシャドウ。

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

フォントファミリー

プライマリ: sohne-var、フォールバック: SF Pro Display
モノスペース: SourceCodePro、フォールバック: SFMono-Regular
OpenType機能: すべてのsohne-varテキストにグローバルで "ss01" を有効化。財務データとキャプションのタブラー数字には "tnum" を使用。

階層

役割	フォント	サイズ	ウェイト	行間	レタースペーシング	機能	備考
ディスプレイヒーロー	sohne-var	56px (3.50rem)	300	1.03（タイト）	-1.4px	ss01	最大サイズ、囁くような権威
ディスプレイラージ	sohne-var	48px (3.00rem)	300	1.15（タイト）	-0.96px	ss01	セカンダリヒーロー見出し
セクション見出し	sohne-var	32px (2.00rem)	300	1.10（タイト）	-0.64px	ss01	機能セクションのタイトル
サブ見出しラージ	sohne-var	26px (1.63rem)	300	1.12（タイト）	-0.26px	ss01	カード見出し、サブセクション
サブ見出し	sohne-var	22px (1.38rem)	300	1.10（タイト）	-0.22px	ss01	小さなセクション見出し
ボディラージ	sohne-var	18px (1.13rem)	300	1.40	normal	ss01	機能の説明、イントロテキスト
ボディ	sohne-var	16px (1.00rem)	300-400	1.40	normal	ss01	標準的な本文テキスト
ボタン	sohne-var	16px (1.00rem)	400	1.00（タイト）	normal	ss01	プライマリボタンテキスト
ボタンスモール	sohne-var	14px (0.88rem)	400	1.00（タイト）	normal	ss01	セカンダリ/コンパクトボタン
リンク	sohne-var	14px (0.88rem)	400	1.00（タイト）	normal	ss01	ナビゲーションリンク
キャプション	sohne-var	13px (0.81rem)	400	normal	normal	ss01	小さなラベル、メタデータ
キャプションスモール	sohne-var	12px (0.75rem)	300-400	1.33-1.45	normal	ss01	細かい注記、タイムスタンプ
キャプションタブラー	sohne-var	12px (0.75rem)	300-400	1.33	-0.36px	tnum	財務データ、数字
マイクロ	sohne-var	10px (0.63rem)	300	1.15（タイト）	0.1px	ss01	小さなラベル、軸マーカー
マイクロタブラー	sohne-var	10px (0.63rem)	300	1.15（タイト）	-0.3px	tnum	チャートデータ、小さな数字
ナノ	sohne-var	8px (0.50rem)	300	1.07（タイト）	normal	ss01	最小のラベル
コードボディ	SourceCodePro	12px (0.75rem)	500	2.00（ゆったり）	normal	--	コードブロック、シンタックス
コードボールド	SourceCodePro	12px (0.75rem)	700	2.00（ゆったり）	normal	--	太字コード、キーワード
コードラベル	SourceCodePro	12px (0.75rem)	500	2.00（ゆったり）	normal	uppercase	テクニカルラベル
コードマイクロ	SourceCodePro	9px (0.56rem)	500	1.00（タイト）	normal	ss01	小さなコードアノテーション

原則

シグネチャーとしての軽量ウェイト: ディスプレイサイズでウェイト300を使用することは、Stripeの最も際立ったタイポグラフィの選択です。他のブランドが600〜700を使って注目を集める中、Stripeは軽さを贅沢として使います――テキストは重みがなくても権威を発揮できる自信があります。
ss01を全体に: "ss01" スタイルセットは不可欠です。特定のグリフ（おそらく a、g、l の代替形）を変更し、すべてのsohne-varテキストに幾何学的でコンテンポラリーな印象を与えます。
2つのOpenTypeモード: 表示/本文テキストには "ss01"、財務データのタブラー数字には "tnum"。これらは決して重複しません――段落内の数字はss01を使用し、データテーブル内の数字はtnumを使用します。
段階的なトラッキング: レタースペーシングはサイズに比例してタイトになります。56pxで-1.4px、48pxで-0.96px、32pxで-0.64px、26pxで-0.26px、16px以下ではnormal。
2ウェイトのシンプルさ: 主に300（ボディと見出し）と400（UI/ボタン）。プライマリフォントにボールド（700）はなし――SourceCodeProはコードのコントラストのために500/700を使用。

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

ボタン

プライマリパープル

背景: #533afd
テキスト: #ffffff
パディング: 8px 16px
ラジウス: 4px
フォント: 16px sohne-var ウェイト400、"ss01"
ホバー: #4434d4 背景
使用: プライマリCTA（「今すぐ始める」、「営業に問い合わせる」）

ゴースト/アウトライン

背景: transparent
テキスト: #533afd
パディング: 8px 16px
ラジウス: 4px
ボーダー: 1px solid #b9b9f9
フォント: 16px sohne-var ウェイト400、"ss01"
ホバー: 背景が rgba(83,58,253,0.05) に変化
使用: セカンダリアクション

トランスペアレントインフォ

背景: transparent
テキスト: #2874ad
パディング: 8px 16px
ラジウス: 4px
ボーダー: 1px solid rgba(43,145,223,0.2)
使用: ターシャリ/情報レベルのアクション

ニュートラルゴースト

背景: transparent（rgba(255,255,255,0)）
テキスト: rgba(16,16,16,0.3)
パディング: 8px 16px
ラジウス: 4px
アウトライン: 1px solid rgb(212,222,233)
使用: 無効または抑えられたアクション

カード＆コンテナ

背景: #ffffff
ボーダー: 1px solid #e5edf5（標準）または 1px solid #061b31（ダークアクセント）
ラジウス: 4px（タイト）、5px（標準）、6px（快適）、8px（フィーチャード）
シャドウ（標準）: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
シャドウ（アンビエント）: rgba(23,23,23,0.08) 0px 15px 35px 0px
ホバー: シャドウが強くなり、多くの場合ブルーティントレイヤーが追加される

バッジ/タグ/ピル

ニュートラルピル

背景: #ffffff
テキスト: #000000
パディング: 0px 6px
ラジウス: 4px
ボーダー: 1px solid #f6f9fc
フォント: 11px ウェイト400

サクセスバッジ

背景: rgba(21,190,83,0.2)
テキスト: #108c3d
パディング: 1px 6px
ラジウス: 4px
ボーダー: 1px solid rgba(21,190,83,0.4)
フォント: 10px ウェイト300

入力＆フォーム

ボーダー: 1px solid #e5edf5
ラジウス: 4px
フォーカス: 1px solid #533afd またはパープルリング
ラベル: #273951、14px sohne-var
テキスト: #061b31
プレースホルダー: #64748d

ブラーバックドロップを持つ白いスティッキーな水平ナビゲーション
ブランドロゴタイプを左寄せ
リンク: sohne-var 14px ウェイト400、#061b31 テキスト、"ss01"
ラジウス: ナビコンテナに6px
CTA: 右寄せのパープルボタン（「サインイン」、「今すぐ始める」）
モバイル: 6pxラジウスのハンバーガートグル

装飾的要素

ダッシュボーダー

プレースホルダー/ドロップゾーン用: 1px dashed #362baa（パープル）
マゼンタテーマの装飾的ボーダー用: 1px dashed #ffd7ef（マゼンタ）

グラデーションアクセント

ヒーロー装飾のためのルビーからマゼンタへのグラデーション（#ea2261 から #f96bee）
ブランドのダークセクションは白いテキストと共に #1c1e54 背景を使用

5. レイアウト原則

スペーシングシステム

基本単位: 8px
スケール: 1px、2px、4px、6px、8px、10px、11px、12px、14px、16px、18px、20px
注目点: スケールは小さい端で密度が高く（4〜12pxから2pxごと）、財務データのためのStripeの精度志向のUIを反映

グリッド＆コンテナ

最大コンテンツ幅: 約1080px
ヒーロー: 寛大なパディングと軽量な見出しを持つ中央配置のシングルカラム
フィーチャーセクション: フィーチャーカードのための2〜3カラムグリッド
ブランドの没入感のための #1c1e54 背景を持つフルワイドダークセクション
ブルーティントシャドウを持つ収まったカードとしてのコード/ダッシュボードプレビュー

ホワイトスペース哲学

精度スペーシング: ミニマリストシステムの広大な空白とは異なり、Stripeは計測された意図的なホワイトスペースを使用します。すべてのギャップは意図的なタイポグラフィの選択です。
密なデータ、寛大なクローム: 財務データ表示（テーブル、チャート）は密度が高く詰め込まれていますが、その周囲のUIクロームは寛大にスペースが取られています。これにより制御された密度感が生まれ、美しいフレームに収まった整理されたスプレッドシートのような印象を与えます。
セクションリズム: 白いセクションが #1c1e54 のダークブランドセクションと交互に現れ、任意の色を導入することなく単調さを防ぐ印象的な明暗のカデンスを生み出します。

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

マイクロ（1px）: 細かい要素、繊細な丸み
標準（4px）: ボタン、入力、バッジ、カード――主力
快適（5px）: 標準的なカードコンテナ
リラックス（6px）: ナビゲーション、大きなインタラクティブ要素
ラージ（8px）: フィーチャードカード、ヒーロー要素
複合: 0px 0px 6px 6px 底部丸めのコンテナ（タブパネル、ドロップダウンフッター）

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

レベル	処理	使用
フラット（レベル0）	シャドウなし	ページ背景、インラインテキスト
アンビエント（レベル1）	`rgba(23,23,23,0.06) 0px 3px 6px`	繊細なカードの浮き上がり、ホバーのヒント
標準（レベル2）	`rgba(23,23,23,0.08) 0px 15px 35px`	標準的なカード、コンテンツパネル
高（レベル3）	`rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`	フィーチャードカード、ドロップダウン、ポップオーバー
ディープ（レベル4）	`rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px`	モーダル、フローティングパネル
リング（アクセシビリティ）	`2px solid #533afd` アウトライン	キーボードフォーカスリング

シャドウ哲学: Stripeのシャドウシステムはクロマティックデプスという原則に基づいています。ほとんどのデザインシステムがニュートラルグレーや黒のシャドウを使用する中、Stripeのプライマリシャドウ色（rgba(50,50,93,0.25)）はブランドのネイビーパレットを反映した深いブルーグレーです。これにより単に奥行きを加えるだけでなく、ブランドの雰囲気を加えるシャドウが生まれます。多層アプローチでは、このブルーティントシャドウをピュアブラックのセカンダリレイヤー（rgba(0,0,0,0.1)）と異なるオフセットで組み合わせ、ブランドシャドウが要素から遠くに、ニュートラルシャドウが近くに位置するパラックス的な奥行きを生み出します。ネガティブなスプレッド値（-30px、-18px）により、シャドウが水平方向に要素のフットプリントを超えないようにし、エレベーションを垂直方向に制御します。

装飾的な奥行き

ダークブランドセクション（#1c1e54）が背景色のコントラストによる没入感のある奥行きを生み出す
ヒーロー装飾のためのルビーからマゼンタへのグラデーションオーバーレイ
スティッキー要素の上端シャドウのためのシャドウ色 rgba(0,55,112,0.08)（--hds-color-shadow-sm-top）

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

やるべきこと

すべてのテキスト要素に "ss01" を付けたsohne-varを使用する――スタイリスティックセットこそがブランド
すべての見出しと本文テキストにウェイト300を使用する――軽さがシグネチャー
すべての高く配置された要素にブルーティントシャドウ（rgba(50,50,93,0.25)）を適用する
見出しには #000000 の代わりに #061b31（ディープネイビー）を使用する――温かみが重要
ボーダーラジウスを4px〜8pxに保つ――控えめな丸みは意図的
タブラー/財務数字の表示には "tnum" を使用する
シャドウを重ねる: 遠くにブルーティント + 近くにニュートラルで奥行きのパラックスを実現
プライマリなインタラクティブ/CTAカラーとして #533afd パープルを使用する

やってはいけないこと

sohne-varの見出しにウェイト600〜700を使用しない――ウェイト300がブランドの声
カードやボタンに大きなボーダーラジウス（12px以上、ピル形状）を使用しない――Stripeは控えめ
ニュートラルグレーのシャドウを使用しない――常にブルーでティントする（rgba(50,50,93,...)）
sohne-varテキストで "ss01" をスキップしない――代替グリフがパーソナリティを定義する
見出しに純粋な黒（#000000）を使用しない――常に #061b31 ディープネイビー
インタラクティブ要素に温かいアクセントカラー（オレンジ、黄色）を使用しない――パープルがプライマリ
ディスプレイサイズでポジティブなレタースペーシングを適用しない――Stripeはタイトにトラックする
マゼンタ/ルビーアクセントをボタンやリンクに使用しない――装飾/グラデーション専用

8. レスポンシブ動作

ブレークポイント

名称	幅	主な変化
モバイル	<640px	シングルカラム、縮小した見出しサイズ、スタックされたカード
タブレット	640-1024px	2カラムグリッド、中程度のパディング
デスクトップ	1024-1280px	フルレイアウト、3カラムフィーチャーグリッド
ラージデスクトップ	>1280px	寛大なマージンで中央配置されたコンテンツ

タッチターゲット

ボタンは快適なパディング（縦8px〜16px）を使用
ナビゲーションリンクは14pxで適切なスペーシング
バッジはタップターゲットのために最低6pxの水平パディング
モバイルナビトグルは6pxラジウスのボタン

縮小戦略

ヒーロー: 56pxディスプレイ → モバイルで32px、ウェイト300は維持
ナビゲーション: 水平リンク+CTA → ハンバーガートグル
フィーチャーカード: 3カラム → 2カラム → シングルカラムスタック
ダークブランドセクション: フルワイド処理を維持、内部パディングを縮小
財務データテーブル: モバイルでは水平スクロール
セクションスペーシング: 64px以上 → モバイルで40px
タイポグラフィスケールが圧縮: ブレークポイントをまたいで56px → 48px → 32pxのヒーローサイズ

画像の動作

ダッシュボード/製品スクリーンショットはすべてのサイズでブルーティントシャドウを維持
ヒーローグラデーション装飾はモバイルでシンプルになる
コードブロックは SourceCodePro 処理を維持し、水平スクロールが発生する場合がある
カード画像は一貫した4px〜6pxのボーダーラジウスを維持

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

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

プライマリCTA: ストライプパープル（#533afd）
CTAホバー: パープルダーク（#4434d4）
背景: ピュアホワイト（#ffffff）
見出しテキスト: ディープネイビー（#061b31）
ボディテキスト: スレート（#64748d）
ラベルテキスト: ダークスレート（#273951）
ボーダー: ソフトブルー（#e5edf5）
リンク: ストライプパープル（#533afd）
ダークセクション: ブランドダーク（#1c1e54）
成功: グリーン（#15be53）
アクセント装飾: ルビー（#ea2261）、マゼンタ（#f96bee）

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

「白い背景にヒーローセクションを作成する。見出しは48px sohne-var ウェイト300、行間1.15、レタースペーシング-0.96px、カラー#061b31、font-feature-settings 'ss01'。サブタイトルは18px ウェイト300、行間1.40、カラー#64748d。パープルCTAボタン（#533afd、4pxラジウス、8px 16pxパディング、白いテキスト）とゴーストボタン（transparent、1px solid #b9b9f9、#533afdテキスト、4pxラジウス）。」
「カードをデザインする: 白い背景、1px solid #e5edf5ボーダー、6pxラジウス。シャドウ: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px。タイトルは22px sohne-var ウェイト300、レタースペーシング-0.22px、カラー#061b31、'ss01'。ボディは16px ウェイト300、#64748d。」
「サクセスバッジを作成する: rgba(21,190,83,0.2)背景、#108c3dテキスト、4pxラジウス、1px 6pxパディング、10px sohne-var ウェイト300、ボーダー1px solid rgba(21,190,83,0.4)。」
「ナビゲーションを作成する: backdrop-filter blur(12px)を持つ白いスティッキーヘッダー。リンクにsohne-var 14px ウェイト400、#061b31テキスト、'ss01'。右寄せのパープルCTA「今すぐ始める」（#533afd背景、白いテキスト、4pxラジウス）。ナビコンテナに6pxラジウス。」
「ダークブランドセクションをデザインする: #1c1e54背景、白いテキスト。見出し32px sohne-var ウェイト300、レタースペーシング-0.64px、'ss01'。ボディ16px ウェイト300、rgba(255,255,255,0.7)。内部カードは6pxラジウスのrgba(255,255,255,0.1)ボーダーを使用。」

イテレーションガイド

sohne-varテキストには常に font-feature-settings: "ss01" を有効にする――これがブランドのタイポグラフィDNA
ウェイト300がデフォルト; 400はボタン/リンク/ナビゲーションにのみ使用
シャドウの公式: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2（Y1/B1は大きい（遠いシャドウ）、Y2/B2は小さい（近いシャドウ））
見出し色は #061b31（ディープネイビー）、ボディは #64748d（スレート）、ラベルは #273951（ダークスレート）
ボーダーラジウスは4px〜8pxの範囲に維持――ピル形状や大きな丸みは使用しない
テーブル、チャート、財務表示の数字には "tnum" を使用
ダークセクションには #1c1e54 を使用――黒でも灰色でもなく、深いブランドインディゴ
コードにはSourceCodeProを12px/500で、行間2.00（可読性のために非常に寛大）で使用

28 KiB Raw Blame History Unescape Escape