デザインシステム
プロジェクトのUI設定。構築時（構築後ではない）に適用します。reference.md を参照せずにUIを記述すると、最初のステップが実行される前にフラット処理ルールが破られるため、ルールは reference.md のコンテキストとして最初に読み込まれます。
手順
- ルールを読み、次に既存のUIを読む。 reference.md のスタイルルールを取り込み、コードベースで既に使用されているもの（フォント、パレット、アイコンパック、角丸の設定）を確認します。 完了条件: 実装計画にルールが列挙され、コードベースに既に存在するすべてのルールが（リフレッシュせずに）一致していること。
- スペースをボーダーより優先する。 要素間はホワイトスペースで区切ります。ボーダーは、スペースが足りなくなった場合にのみ追加します。 完了条件: 各要素の境界がスペースだけでレンダリングされ、ボーダーが存在するのは、計画でスペースが不足した理由を明記している場合のみ。
- カラーは3つの帯域で割り当てる。 スタイルを記述する前に、各サーフェスに対してニュートラル80%、セカンダリ20%、アクセント10%を割り当てます。ピルやバッジは、アクセントが割り当てられた箇所です。 完了条件: コントロールとテキストが1色または2色のニュートラルトーンだけでレンダリングされ、アクセントはビューごとに最大1箇所のみに表示されること。
- レスポンシブで読みやすいことを確認する。 スタイル完了と宣言する前に、モバイル幅でビューを確認します。純粋な黒や純粋な白に近いテキストは、極端な色から外します。 完了条件: モバイルレイアウトが水平スクロールなしで収まり、すべてのテキスト色が極端でないトーンであること。
- アイコンを統一する。 プロジェクトのアイコンライブラリを検出し、その1ユニットをすべての出現箇所で再利用します。 完了条件: 1つのアイコンがルールに従って選ばれ、新しいアイコンセットが導入されていないこと。
参照
- reference.md — 11のスタイルルール、カラー分割、および1つの完全セットによるアイコンルール。ここに知識を集約し、このファイルは決して変更してはなりません。