command-line-chic

コマンドライン・シック

freeCodeCamp の「コマンドライン・シック」という美学を取り入れた、UI デザインアドバイザーです。このデザイン言語は、プロの開発者が日々使うツールである、ターミナルインターフェースやコードエディターの見た目と使い心地を取り入れています。ダークな IDE の信頼感に、高い読みやすさ、ゆったりとした文字サイズ、控えめながら鮮やかなアクセントパレットを組み合わせています。

この理念は、freeCodeCamp がプラットフォームをリデザインした際に、Quincy Larson によって提唱されました。インターフェースは、プロの開発者が仕事で使うコマンドラインインターフェースやコードエディターに似たものにするべきだ、という考え方です。ほとんどのコードエディターやターミナルはダークモードを標準で採用しているため、ダークモードをデフォルトにしています。また、長時間のコーディングでも目が疲れにくくなります。

これは CSS フレームワークではありません。プロジェクトで使われている技術（バニラ CSS、Tailwind、CSS-in-JS、SwiftUI、Flutter など）に合わせて適用する、デザインの 原則 と トークン値 です。特定の実装ではなく、freeCodeCamp のエコシステムとの視覚的な一貫性を目指します。

このスキルを使う場面

• freeCodeCamp のプロダクトやプロジェクトの UI を構築またはスタイリングする場合
• fCC のスタッフ向けに、ダッシュボード、管理ツール、社内アプリを作成する場合
• fCC のランディングページ、マーケティングサイト、ドキュメントをデザインする場合
• fCC 向けの VS Code テーマ、CodeSandbox テーマ、エディターテーマを作成する場合
• freeCodeCamp のリポジトリにフロントエンドコードを提供する場合
• ユーザーから「freeCodeCamp 風の見た目」や、ダークな開発ツール風のデザインを求められた場合

基本原則

1. ダークモードを優先し、テーマに対応する

まずダークモード向けにデザインします。これが主要な利用体験です。ただし、前景色と背景色の役割を入れ替えるだけでライトモードにも対応できるよう、色のシステムを常に構成してください。グレースケールは、意図的に鏡像のペアとしてデザインされています。ダークモードで背景として使う色はライトモードでは前景色になり、その逆も同様です。

2. ゆったりとして読みやすいタイポグラフィ

ベースフォントサイズは最低 18px にします。これは譲れない条件です。プラットフォームは、文字を大きくすると長時間のコーディング中の認知負荷が下がるという考えに基づいてリデザインされました。コードや技術的なコンテンツには等幅フォント、文章にはプロポーショナルなサンセリフフォントを使います。

3. 強いコントラスト、ただしきつくしない

コントラスト比は最低 7:1 を目標にします。これは WCAG AA の基準（4.5:1）を大きく上回ります。このパレットでは、深いネイビーの背景と、明るさを少し抑えた前景色によってこれを実現しています。純粋な黒（#000000）の背景は避けてください。freeCodeCamp を象徴するダークカラーは、コントラストを損なうことなく温かみを持たせた深いネイビー（#0a0a23）です。

4. 目的を明確にした控えめなアクセント

5 つのアクセントカラー（紫、黄色、青、緑、赤）には、それぞれ特定の意味上の役割があります。状態や種類を伝えるためにアクセントカラーを使い、色に意味を持たせる必要がない場合は、ニュートラルなサーフェスシステムの色を使います。それぞれの色が意味を持ちます。紫は強調やコードのキーワード、黄色は行動喚起や警告、青はリンクやインタラクティブ要素、緑は成功や完了、赤はエラーや破壊的な操作に使います。

5. ターミナル品質の情報密度

レイアウトは、適切に設定されたターミナルのように効率的な印象にします。窮屈ではなく、無駄もありません。コーディングチャレンジのように、内容に集中する場合は単一カラムのレイアウトを使います。ダッシュボードやデータ量の多い画面には複数カラムを使います。硬直したグリッドではなく、コンテンツに合わせてレイアウトを決めてください。

カラーシステム

パレットは 11 種類のグレーと、5 組のアクセントカラーで構成されています。それぞれのアクセントカラーには、「ライト」バリアント（ダークな背景用）と「ダーク」バリアント（ライトな背景用）があります。

16 進数値を含むトークンの完全なリファレンスについては、references/color-system.md を参照してください。

グレースケール（背景色と前景色）

グレーのペアを使って視覚的な階層を構築します。ダークモードでは以下のとおりです。

役割	トークン	Hex
最も暗い背景	gray-90	#0a0a23
セカンダリ背景	gray-85	#1b1b32
サーフェス／エディター	gray-80	#2a2a40
ボーダー／控えめ	gray-75	#3b3b4f
ミュートテキスト	gray-40	#939393
コメント、無効状態	gray-45	#858591
控えめな前景色	gray-15	#d0d0d5
セカンダリ前景色	gray-10	#dfdfe2
明るい前景色	gray-05	#f5f6f7
プライマリ前景色	gray-00	#ffffff

ライトモードでは役割が逆になり、gray-00 が最も暗い背景、gray-90 がプライマリ前景色になります。この反転構造により、適切に構築されたテーマは、グレースケールのどちらの端を「背景」と「前景」にするかを入れ替えるだけで、きれいに切り替わります。

アクセントカラー（暗い背景で使用）

役割	Hex	用途
パープル	#dbb8ff	強調、キーワード、属性、ハイライト
イエロー	#f1be32	CTA、ボタン、クラス、警告
ブルー	#99c9ff	リンク、関数、インタラクティブ要素
グリーン	#acd157	成功、完了、文字列、挿入された要素
レッド／ピンク	#ffadad	エラー、危険、破壊的な操作

明るい背景では、より暗い色合いを使用します。パープルは #5a01a7、イエローは #4d3800、ブルーは #002ead、グリーンは #00471b、レッドは #850000 です。

セマンティックマッピング

コンポーネントを構築する際は、色の名前ではなく役割に基づいて色を割り当てます。

--primary-background:   gray-90  (dark) / gray-00  (light)
--secondary-background: gray-85  (dark) / gray-05  (light)
--tertiary-background:  gray-80  (dark) / gray-10  (light)
--primary-color:        gray-00  (dark) / gray-90  (light)
--highlight-color:      blue-light (dark) / blue-dark (light)
--success-color:        green-light (dark) / green-dark (light)
--danger-color:         red-light (dark) / red-dark (light)

このセマンティックレイヤーによって、テーマの切り替えが簡単になります。コンポーネントでは #0a0a23 ではなく、--primary-background を参照します。

タイポグラフィ

役割	フォントファミリー	備考
コード／等幅	Hack-ZeroSlash	メインの等幅フォント。スラッシュ付きゼロ。
本文／文章	Lato	ウェイト：300、400、700＋イタリック
ロゴ専用	SaxMono	ロゴの用途に限って使用
代替等幅	Fira Mono, Menlo, Consolas, monospace
代替サンセリフ	-apple-system, BlinkMacSystemFont, Segoe UI, sans-serif

文字組みのルール

• 基本サイズ：html で 18px。これは最低ラインであり、目安ではありません。
• 行の高さ：本文テキストでは 1.5。
• 見出し：本文と同じカラーシステムを使用し、見出し専用のカラーパレットは設けません。階層は色ではなくサイズとウェイトで表現します。
• 等幅フォントはコード、コマンド、ファイルパスなどの文字どおりの技術トークンにのみ使用します — UI ラベル、ボタン、本文には使用しません。
• サイズを小さくするのはビューポート幅が 500px 未満の場合に限ります。その場合も 16px より小さくしないでください。

コンポーネントのパターン

ボタン

• プライマリ CTA：イエロー／ゴールドの背景（#f1be32 または #ffbf00）、暗いテキスト（#0a0a23）。CTA ボタンは、どの画面でも最も視覚的に目立つ要素です。
• セカンダリ：現在の前景色を使ったゴーストまたはアウトラインスタイル。
• 危険：コントラストのあるテキストを組み合わせたレッドのアクセント背景。
• リンクスタイル：ブルーのアクセントを使用し、ホバー時に下線を付けます。
• サイズ：標準では余裕のあるパディングを設定します。btn-sm と btn-lg のバリアントがあります。

フォーム

• 入力欄の背景色：配置先のサーフェスより 1 段階暗い色または明るい色にします （例：ダークモードで gray-80 のサーフェスに gray-90 の入力欄を配置）。
• フォーカスアウトライン：#198eee（blue-mid）、2px の実線。これはシステム全体で使用するフォーカスリングの色です。
• ラベルは入力欄の横ではなく上に配置します。フォームグループ間には十分な間隔を設けます。

カード／パネル

• 背景：ページの表面より1段階明るい色にします（gray-85 の上に gray-80、または gray-90 の上に gray-85）。
• 1段階明るいグレーを使って控えめな境界線を付けます（ダークモードでは gray-75）。
• ダークモードでは、背景の輝度差で奥行きを作ります。ライトモードでは、控えめなシャドウを必要に応じて使用できます。

ナビゲーション

• ヘッダーの高さ：コンパクトにします（38px）。
• 背景を暗色（gray-90）にし、テキストを白にします。
• アクティブ状態は色を変えず、背景をわずかに変化させて表現します。
• 階層がある場合はパンくずリストを表示します。

テーブル

• 隣接するグレー（gray-85／gray-80）で行の背景を交互にします。
• ヘッダー行には、さらに1段階暗い背景を適用します。
• 配置を揃える必要があるデータ列には等幅フォントを使います。

モーダル

• オーバーレイ：暗色の半透明（rgba(10, 10, 35, 0.85)）。
• モーダルの表面：gray-80 または gray-85。
• 分かりやすい閉じるボタンを配置します。Escape キーは常に機能するようにします。

コードブロック

• 背景：エディターの背景色（ダークモードでは #2a2a40、ライトモードでは #fffffe）。
• 等幅フォント（Hack-ZeroSlash）。
• シンタックスハイライトは fCC のシンタックスパレットに従います。トークンと色の対応の全容は references/syntax-theme.md を参照してください。

レイアウト

• 単一列：集中して行うタスク（コーディング、読書、フォーム）に使用します。
• 複数列：ダッシュボードやデータ量の多いビューに使用します。
• レスポンシブのブレークポイント：500px、700px、1000px、1200px。
• パディング：余白を十分に取り、各要素にゆとりを持たせます。
• Z-index の管理：パンくずリストは100、フラッシュメッセージは150、ヘッダーは200にします。

アクセシビリティ

これらは任意の追加要素ではなく、設計に不可欠な要件です。

• テキストと背景のコントラスト比は最低7:1にします。
• 最小フォントサイズは全箇所で18pxにします。
• すべてのインタラクティブ要素に Focus-visible のアウトライン（blue-mid #198eee）を表示します。
• スクリーンリーダー対応：視覚的に隠すラベルには .sr-only クラスを使います。
• キーボードナビゲーション：すべてのインタラクティブ要素にキーボードで移動し、操作できるようにします。
• アクセシブルな状態表示：色はアイコン、テキスト、またはパターンと組み合わせます。

あらゆるフレームワークへの適用

Vanilla CSS／CSS Custom Properties

:root にトークン変数を定義し、body の .dark-palette クラスと .light-palette クラスで切り替えます。freecodecamp.org はこの方法を採用しています。

Tailwind CSS

fCC のトークンを tailwind.config の theme.extend.colors に割り当てます。@freecodecamp/ui コンポーネントライブラリもこの方法で Tailwind を使用しています。役割ベースのカラーシステムに対応する、意味の分かるクラス名を使います。

CSS-in-JS（Styled Components、Emotion など）

同じ意味構造を持つテーマオブジェクトを作成します。ThemeProvider 経由で渡します。コンポーネントでは16進数の値ではなく、theme.primaryBackground を参照します。

React Native／Flutter／SwiftUI

トークン値をプラットフォーム標準のカラーシステムに変換します。名前付きの意味トークン、ダークモード優先、高コントラストという原則は同じです。

エディターテーマ（VS Code、CodeSandbox など）

表面のグレーをエディターのクロームに、アクセントパレットをシンタックストークンに割り当てます。VS Code テーマと Sandpack テーマは、どちらもこの対応付けの例です。すべての fCC エディター環境で使用される、シンタックスと色の正確な対応については references/syntax-theme.md を参照してください。

ガードレール

• 背景に純粋な黒（#000000）は避け、#0a0a23 から始まるネイビー系のグレーを使います。
• 18px 未満の、読みやすさを損なうテキストは避けます。本文相当のコンテンツには18px以上を使います。
• 装飾目的のアクセントカラーは避け、意味上の役割を伝える場合にのみ使用します。
• ライトモードのみのデザインは避け、同等のコントラストと状態を備えたダークモードも用意します。
• コンポーネントに16進数の値をハードコードするのは避け、意味トークンを使います。
• ダークモードでは、奥行き表現の主な手段としてドロップシャドウを使うのは避け、輝度、境界線、間隔を活用します。
• キーボードのフォーカス状態を省略しないでください。すべてのインタラクティブ要素に、視認できるフォーカススタイルを設定します。
• Hack、Lato、システムフォントのフォールバック以外のフォントは避けます。明示的に別途承認されている場合を除き、承認済みのフォントスタックを使います。

参照ファイル

このファイルに収めるには大きすぎる詳細なトークン表については、以下をご覧ください。

• references/color-system.md — freeCodeCamp プラットフォームで使われるグレースケール全体、アクセントカラーの組み合わせ、セマンティックなマッピング、半透明のバリエーション、CSS 変数の全一覧。
• references/syntax-theme.md — VS Code テーマ、CodeSandbox/Sandpack テーマ、プラットフォームのコードブロックで使われるシンタックスハイライトのパレット。言語トークン（キーワード、文字列、関数など）を特定の 16 進カラーに対応付けています。