design
1.0.0
3.1ページに3つ以上の書体を一度に使用しないでください。
なぜ？単一ページで使用されるさまざまな書体は、明確に定義されていないブランドを示しており、怠zyで雑然としているように見えることがあります。せいぜい、3つの異なる書体を一度に使用できます（ロゴ、ヘッダー、ボディコンテンツ）。
3.3一貫した型階層を維持します。タイプの階層を開発するには、ほんの一握りのフォントサイズと1つまたは2つのフォントウェイトを使用する必要があります。 HTMLヘッダータグH1、H2、H3などを考えてください。テキストの重要性を示すために、明るさ、サイズ、重量のバリエーションを使用して、少なくとも4つの視覚スタイルが少なくとも4つあります。タイプの階層の素晴らしい例については、AppleのHuman Interfaceガイドラインをご覧ください。
[3.4]あなたの体のテキストを通常の体重としっかりとしたままにしてください。テキストは常に読みやすいものである必要があるため、大きなヘッダーまたはフォントの重量がテキストの読みやすさにほとんど影響を与えない場合に、ライトまたは太字のフォントを予約します。さらに、読みやすさを最大化するために、ボディテキストのライン間隔を1.15〜1.5（サイズに応じて）に常に保ちます。たとえば、この記事にはほぼ1.5 REMライン間隔があります。あなたの体の段落を正当化することも傷つきません。
3.1体の背景は常に灰色の色合いでなければなりません
なぜ？非常に暗いグレーでさえ、色付きの背景は、目に簡単に負担をかけることができます。 Webページやアプリケーションのテキスト本文などの重要なコンテンツの場合、ユーザーはページを簡単に読み取って内向させることが重要です。
3.3ほとんどの場合、画像、色付き、または勾配の背景に白いテキストを使用します。必要に応じて、非常に軽いドロップシャドウ（<= 10％不透明度）をテキストに適用します。
なぜ？多くの場合、ホワイトオンダークは、より適切に魅力的で、バリエーションを作成しやすくなります。色付きの背景に対して使用する暗い色を決めることは、しばしば挑戦的です。ただし、選択した色のコンボにもアクセスできることを確認してください。
3.4絶対的な黒人を使用しないでください。
なぜ？純粋で不透明な黒（＃000）は、ほとんどのウェブページではあまりにも厳しいことがよくあります。 Githubのボディフォントの色でさえ、＃000ではなく＃24292Eです。疑わしい場合は、数値Webセーフグレースケールヘックスコード（＃111、＃222 ... #AAA、#BBBなど）を使用できます。
3.5色付きコンポーネントが互いに接しないでください。
なぜ？色が互いに非常に強い補完でない限り、多くの場合、2つの隣接する色のコントラストは、ページの流れを壊す偏光と分裂の感覚を生み出すことができます。ナビゲーションバーが色付きのヒーローに触れる可能性がある場合は、代わりに透明なNavbarの背景を選択します。
すべてのコンポーネントにわたって一貫性を確保します。ページの光源を定義したら、すべての影がその方向に従っていることを確認してください。光が135度でページを「打つ」場合、すべての影と勾配は135度に落ちるはずです。階層または状態を提示するツールとしてシャドウを使用します。影を使用して、ページコンポーネントを強調したり、ページ構造を提供したり、状態を描写したりする必要があります。たとえば、色の変化とは対照的に、ボタンが標高を下げることでボタンを押すことができます。あまりにも多くの影が寸法が多すぎる可能性があるため、注意してください（たとえば、18のユニークな標高のあるサイトを作成しないでください）。あなたの影のオフセットは、そのぼやけの半径の約半分に等しいはずです。たとえば、10pxのX / Yオフセットを備えた影には、約20pxのぼやけ半径が必要です。このアプローチは、最も本物の影をレンダリングします。常に影の不透明度を25％未満に保ちます。繊細さの側面に誤りを犯して、デザインを損なわないようにしてください。暗い背景を使用している場合、場合によっては、その可視性を確保するために、影の不透明度を上げる必要があります。影は必ずしも黒である必要はありません。色付きの表面に影を使用する場合、背景色の非常に暗いまたは鈍いバリアントを使用して、影のブレンドを改善することがしばしば有利です。
