LPの配色・フォント・余白の決まりを作る

あなたは、ブランドのトンマナからデザインの決まり(デザイントークン)を組み立て、FigmaとCSSの両方で運用してきたUIデザイナーです。 私はLPのデザインの決まりを作ります。トンマナと色の希望、商品・サービスとターゲット、決まっている素材、作るツール、案件の募集文は下の記入欄のとおりです。記入欄の内容をもとに、LPの配色・フォント・余白の決まりを作ってください。

条件: - 最初に、トンマナを形容詞3〜5個に言いかえ、それぞれが色・文字・余白・角丸・写真にどう表れるかを表にしてください - 配色は、メイン・サブ・アクセント(CTA)・背景(2段階)・文字(本文・補足)・線・成功・警告・エラーの役割ごとにカラーコードを決め、使う割合の目安(例: 背景70%・メイン25%・アクセント5%)を書いてください - 文字と背景の組み合わせごとにコントラスト比の目安を示し、本文はWCAGのAA(4.5:1以上)、大きな文字とボタンの文字は3:1以上を満たす組み合わせだけを使ってください。値は目安なので、確認ツールで確かめるよう添えてください - CTAのボタンの色は、ページ内の他の要素に使わず目立つようにしてください。色だけで状態や意味を区別せず、文字・線・アイコンでも分かるようにしてください(色の見え方の違いへの配慮) - フォントは、日本語のWebフォントの候補を3つ(例: Noto Sans JP、M PLUS 1p、BIZ UDPゴシック)と英数字の組み合わせを示し、読みこみを軽くする設定(使う太さを2〜3種類にしぼるなど)も書いてください。商用利用の条件は各フォントの公式ページで確かめるよう添えてください - 文字サイズは、スマホとPCそれぞれで見出し(h1〜h3)・本文・補足・ボタンの大きさ(px)・行間・字間を決め、本文は16px以上にしてください。clamp() を使った画面幅に応じて変わる書き方も示してください - 余白は4・8・16・24・32・48・64・96のような段階を決め、セクションの上下・要素の間・カードの内側のどこに何を使うかを書いてください - 角丸・影・線の太さも段階で決め、トンマナとの関係を1行ずつ書いてください - ボタンは、通常・ホバー・押している時・キーボードで選んだ時(フォーカス)・押せない時の5つの状態の色・線・影を決め、高さは48px以上にしてください - すべてを、CSS変数(例: --color-primary、--font-size-body、--space-16)と、Figmaのスタイル名・変数名(例: Color/Primary/500、Text/Body/Regular)の両方で、同じ名前の規則で書いてください - 最後に、決まりが守れているかを確かめるチェックリスト(色の数・コントラスト・文字サイズ・ボタンの状態・余白の段階)をつけてください 出力は、①トンマナの言いかえ表、②配色表(役割・カラーコード・使う所・割合)とコントラスト比の目安、③フォントの候補と組み合わせ、④文字サイズ・行間の表(スマホ・PC)、⑤余白・角丸・影の段階、⑥ボタンの5つの状態、⑦CSS変数(そのまま貼れる :root のコード)、⑧Figmaのスタイル名・変数名の一覧、⑨確認のチェックリスト、の順でお願いします。 足りない情報は仮の前提をおいて最後まで作り、置いた前提とクライアントに確認したい点を最後に一覧にしてください。