カスタムパレットを作成

概要

Converlyのカスタムパレットビルダーは、プロジェクトの中核となるデザイントークンを定義し、それらをDesign.mdファイルに文書化するためのブラウザベースのツールです。色、タイポグラフィ、ボーダー、余白、ボタンについて、場当たり的なスタイル判断ではなく、一貫性があり共有可能な記録を必要とするデザイナーとフロントエンド開発者を対象としています。このページでは、複数ステップのフローとして提示しています。まず色と角丸、次のステップとして見出しのタイポグラフィです。

機能

• プライマリ、セカンダリ、背景色の入力 — 残りのパレットを導出するシードカラーを確立します。
• 角丸コントロール — プリセット位置付きスライダー（0、4、8、12、16 px、8 pxで表示）で、角丸を再利用可能なトークンとして設定します。
• 生成されるDesign.mdドキュメント — ツールは、色、タイポグラフィ、ボーダー、余白、ボタンを網羅し、12段階のカラースケールとCSS変数を含むMarkdownファイルを出力します。
• ライトモードとダークモードのサポート — 両モードは別途手動で対応するのではなく、生成されるファイルに含まれます。
• 共有可能なエクスポートリンク — 共有リンクを開いた人は誰でも同じDesign.mdをエクスポートでき、受け取った人を同一のトークンセットに保ちます。
• カテゴリ別フォントカタログ — フォントはサンセリフ、セリフ、ディスプレイ、モノスペース、手書きとしてグループ化され、各項目にソースラベル（主にGoogle）が表示され、見出しタイポグラフィ専用のステップがあります。

役立つヒント

• フローが順次的であるため、タイポグラフィに移る前にカラーパレットと角丸を確定してください。後からシードを変更すると、ファイルを再生成し、下流のトークン参照を再確認する必要が生じる場合があります。
• 生成されたDesign.mdをトークンの単一の情報源として扱い、バージョン管理にコミットして、パレットの変更が黙って行われるのではなく、レビュー可能になるようにしてください。
• 初回のパスでライトモードとダークモードを一緒に定義してください。実装後にダークモードを後付けすると、通常は一貫性のないコントラスト判断を生じます。
• 各フォントを本番スタックに採用する前に、その実際の可用性とライセンスを記載されたソースに照らして確認してください。カタログは項目にソースを表示しますが、利用条件を記載していないためです。