apple-design-foundations

Apple Design — 基礎（カラー · タイポグラフィ · レイアウト）

Apple があらゆるサーフェスの土台とする視覚的基礎。詳細は 3 つのリファレンスファイルにあり、これはその地図と、間違えてはならないルールです。

使用する場面

• カラーパレット、ダークモード戦略、ワイドカラーを選ぶとき。
• タイプスケール（アプリ内の Dynamic Type または apple.com のマーケティング見出し）を設定するとき。
• スペーシング、グリッド、セーフエリア、ベントーレイアウトを確立するとき。

譲れないルール

• リテラルカラーよりセマンティックカラー。 システムロール（label、systemBackground、systemBlue）を使い、ライト／ダーク／コントラストに適応できない hex をハードコードしないこと。
• ダークモード = 減光であり、反転ではない。 高くなったサーフェスは明るくなり、完全反転にはなりません。トゥルーブラックは OLED に資する場面でのみ使います。
• システムフォントスタック。 font-family: -apple-system, system-ui, "SF Pro", ... — SF は任意の Web フォントとしてライセンスされていないため、スタックに頼ること。オプティカルサイズを合わせます（SF Text < 約 20pt、SF Display ≥ 約 20pt）。
• Dynamic Type はリフロー必須。 レイアウトは伸びたり折り返したりし、大きなサイズでも本文テキストを切り詰めてはいけません。
• 8 ポイントグリッド（狭い間隔には 4pt のハーフステップ）。最小タップターゲットは 44×44pt。env(safe-area-inset-*) を尊重すること。

リファレンス

ファイル	用途
references/color-systems.md	セマンティック／システムカラーの表、P3、ダークモードの階段、コントラスト、CSS トークン
references/typography.md	SF ファミリー、オプティカルサイズ、Dynamic Type の表、トラッキング、マーケティング向け clamp() スケール
references/layout-grid-spacing.md	8pt システム、マージン／インセット、apple.com のブレークポイント、ベントーグリッドのレシピ

よくある間違い

• 適応型トークンではなくハードコードした hex。ダークモードに完全反転を使用。
• 誤ったオプティカルサイズ／疑似ボールド。本文のトラッキングが詰まりすぎ。
• グリッドから外れたスペーシング。セーフエリアの無視。ヒーロータイルのない窮屈なベントー。

関連: グラス／ビブランシーカラー → apple-design-materials · タイプ・イン・モーション → apple-design-motion · アクセシビリティとしてのコントラスト／Dynamic Type → apple-design-tactics。