focus-ai-brand

Focus.AI Design System

スイス・インターナショナル・スタイルの構造的な厳密さと、Focus.AI のブランドアイデンティティを組み合わせたデザインシステムです。温かみのある紙色の背景、エディトリアルなタイポグラフィ、厳密なグリッド、ゆとりのある余白、不透明度による階層表現、控えめなアクセントカラーを採用しています。

6 つの原則

1. まずグリッドを考える。 すべてのレイアウトは 12 カラムのグリッド上に配置します（エディトリアルページでは 3 カラムの非対称バリエーションを使用します）。スペーシングの基準単位は 8px です。
2. 常にモバイルファーストで。 320px 向けにデザインしてから、画面を広げていきます。sm:、md:、lg: のプレフィックスを一貫して使用します。
3. 余白は構造です。 ゆとりのあるパディングとマージンはデザインそのものであり、無駄ではありません。
4. 不透明度で階層を作る。 文字の強弱を示すために別のテキストカラーを導入してはいけません。主要なテキストカラーの不透明度を調整します。
5. アクセントカラーは最大 2 色、控えめに使用します。 主要なアクセントカラーは CTA とナビゲーションに使用します。二次アクセントカラーは装飾的な強調のみに使用します。
6. 装飾より明瞭さを優先する。 すべての要素には、配置するだけの理由が必要です。読者が重要な内容に集中する助けにならないものは削除します。

---

ブランドアーキテクチャ

The Focus.AI
├── Focus.AI (Client)     → Services, products, client-facing work
│   Aesthetic: Editorial magazine, polished, confident
│   Palette: Paper, Ink, Petrol, Vermilion
│
└── Focus.AI Labs         → Research, experiments, public content
    Aesthetic: Bell Labs research report, curious, generous
    Palette: Paper, Void, Rand-Blue, Alert-Red

目安：クライアント向けの仕事やサービスの販売には Client ブランド、学びの共有や探求には Labs ブランドを使用します。

---

クイックリファレンス

タイポグラフィ

ファミリー	フォント	用途
ディスプレイ	Source Serif 4	表紙のタイトル、H1（ページ分けされたレポート）、引用文、統計値
サンセリフ	Inter	セクション見出し（h2–h4）、本文、UI、ナビゲーション
モノスペース	Courier Prime	ラベル、メタデータ、コード、ページ番号

ウェイトのルール：

• 見出し：font-black（900）または font-bold（700）を使用し、文字間隔を負の値にします
• 本文：font-normal（400）または font-medium（500）を使用し、行の高さは 1.6 にします
• ラベル：font-mono を使用し、すべて大文字にして、文字間隔を広くします

カラー早見表

役割	Client	Labs
背景	Paper #faf9f6	Paper #f3f2ea
主要テキスト	Ink #161616	Void #1a1a1a
二次テキスト	ink/70 不透明度	void/70 不透明度
三次テキスト	ink/40 不透明度	void/40 不透明度
主要アクセント	Petrol #0e3b46	Rand-Blue #0055aa
二次アクセント	Vermilion #c3471d	Alert-Red #d93025
ボーダー	#d4d3cf	rgba(26,26,26,0.2)

背景に純粋な #ffffff や #000000 を使用してはいけません。

不透明度の階層（基本ルール）

目立たせない場合は不透明度を下げます。色相は変えません。

Full:     text-[ink]           → primary content
Softer:   text-[ink]/70        → secondary labels, supporting text
Quiet:    text-[ink]/40        → captions, metadata
Ghosted:  text-[ink]/20        → disabled, placeholder

スペーシング

基準単位：8px。すべてのスペーシング値は 8 の倍数です。

コンテキスト	値	用途
狭い間隔	8px	インラインの間隔、アイコン間隔
標準	16px	コンポーネント内部の間隔
コンポーネント間	32px	コンポーネント間
セクション	48–64px	セクションのパディング（モバイル／タブレット）
セクション	96–128px	セクションのパディング（デスクトップ）

レイアウト

レイアウトモードは 2 種類です。

1. 12 カラムグリッド — 汎用。Tailwind の grid grid-cols-12 gap-8 を使用します
2. 非対称エディトリアル — [144px label] [1fr content, max 740px] [192px marginalia]

本文の最大幅：60ch。これより広くしてはいけません。

---

ブランド選択ガイド

コンテキスト	ブランド
クライアント向け提案書、事例紹介、サービスページ	Client
製品マーケティング、ランディングページ	Client
カンファレンス分析、調査レポート	Labs
実験、技術ブログ記事	Labs
オープンソースプロジェクト	Labs

---

コマンド

/report — レポート／PDFを生成

Markdownを、スマートな改ページ機能を備えたスタイル付きHTMLレポートに変換します。

# Open in browser (Cmd+P to print)
/report file:./my-document.md style:labs

# Generate PDF directly via chrome-driver
/report file:./proposal.md style:client output:./proposal.pdf

# Force paged template in browser
/report file:./analysis.md style:client paged:true

paged.jsシステム、スマートな改ページルール、コンポーネントライブラリの詳細については、references/print.mdを参照してください。

/deck — プレゼンテーション（.pptx）を生成

Markdownを、ブランドに合わせたPowerPointプレゼンテーションに変換します。

/deck file:./content.md style:client output:./presentation.pptx
/deck file:./research.md style:labs output:./research-deck.pptx

スライドマスター、コンポーネントのパターン、デザインルールについては、references/presentations.mdを参照してください。

---

参照ファイルを読むタイミング

タスク	ファイル
色トークン、文字サイズのスケール、CSSプロパティ、ダークモードの詳細	references/design-system.md
12列グリッド、非対称レイアウト、セクション間隔、装飾	references/grid-and-layout.md
モバイルファーストのブレークポイント、可変文字サイズ、レスポンシブのチェックリスト	references/responsive.md
Tailwindコンポーネントのパターン：ボタン、カード、ナビゲーション、フォーム	references/components.md
そのまま貼り付けられるTailwind v3/v4設定、Google Fontsのリンクタグ	references/tailwind-config.md
/reportコマンド、paged.js、スマートな改ページ、PDFワークフロー	references/print.md
/deckコマンド、スライドマスター、PptxGenJSのパターン	references/presentations.md
AI画像生成のスタイル（ルネサンス、Bell Labs）	references/imagery.md
文体とトーンのガイドライン、アンチパターン、変換例	references/voice.md
出荷前の監査チェックリスト	references/checklist.md

---

注意点

• 純粋な白や黒は使わないでください — 紙のような色調とインク／虚無色を使います。
• 見出しにfont-boldだけを使わないでください — タイトな負のトラッキングを加えたfont-black（900）を使います。
• 本文の最大幅は60chです — 列幅が広すぎると読みやすさが損なわれます。
• セクションには十分なパディングを設けます — 最小はpy-12（48px）、標準はpy-16～py-24（64～96px）です。
• ラベルは常に等幅フォントにします — Courier Primeを使い、大文字で、文字間隔を広くします。
• 角丸は控えめにします — カードやボタンでは4～8pxにします。大きなコンテナを完全に丸くしないでください。
• グレーの色合いではなく、不透明度を使います — text-gray-500ではなくtext-ink/70を使います。
• 背景には暖色系を使います — ダークモードでも、冷たい黒ではなく暖色系のチャコールを使います。
• Source Serif 4はディスプレイ用に限ります — 本文やh2～h4には使わないでください。表紙のタイトル、ページ分割されたレポートのh1、プルクオート、統計数値のみに使います。
• アクセントカラーは最大2色にします — プライマリはアクションやリンクに使い、セカンダリは装飾的な強調に控えめに使います。
• すべてのレイアウトをモバイルで機能させます — デフォルトのクラスはモバイル向けです。常にmd:／lg:バリアントを追加します。