swiss-design

スイス・デザインシステム

1950〜60年代のスイス・インターナショナル・スタイルに根ざしたデザインシステムです。グロテスク体のタイポグラフィ、厳密なグリッド、大胆な幾何学的形状、ゆとりのある余白、抑制の効いた色使いが特徴です。

6つの原則

1. まずグリッドを考えます。 すべてのレイアウトは、8pxの基本単位を持つ12カラムグリッドに沿って構成します。
2. 常にモバイルファーストです。 まず最小のビューポート向けにデザインし、その後に広げます。すべてのレイアウトは320pxと1440pxの両方で機能する必要があります。Tailwind の sm:、md:、lg: プレフィックスを体系的に使います。
3. 余白は構造です。 ゆとりのあるパディングやマージンは無駄ではなく、デザインそのものです。
4. 色相ではなく不透明度で階層を作ります。 テキストの太さや重要度を示すために、2色目を加えてはいけません。不透明度を使います。
5. アクセントカラーは1色です。 各プロジェクトで使うアクセントカラーは1色のみとし、複数の不透明度で控えめに使います。
6. カラムは狭くします。 本文の幅は max-w-[60ch] を超えないようにします。幅の広いカラムは可読性を損ないます。

---

タイポグラフィ

プライマリフォント： IBM Plex Sans（Google Fonts）

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap" rel="stylesheet">

フォールバックフォント（優先順）：

フォント	ソース	特徴
IBM Plex Sans	Google Fonts	プライマリ。合理的でやや凝縮された、1960年代のシステム合理主義
Hanken Grotesk	Google Fonts	Neue Haas Grotesk の系譜に最も近い
Barlow	Google Fonts	凝縮されたスイスグリッドの比率、強い垂直リズム
Host Grotesk	Google Fonts	温かみのあるグロテスク体で、あらゆるサイズに適している
DM Sans	Google Fonts	クリーンなネオ・グロテスク体のフォールバック
system-ui	組み込み	最終手段

font-family: 'IBM Plex Sans', 'Hanken Grotesk', 'Barlow', 'Host Grotesk', 'DM Sans', system-ui, sans-serif;

文字サイズのスケール：

役割	Tailwind	行の高さ	最大幅
ディスプレイ	text-7xl font-light tracking-tight	leading-none	制限なし
H1	text-5xl font-light tracking-tight	leading-tight	制限なし
H2	text-3xl font-light tracking-tight	leading-snug	制限なし
H3	text-xl font-normal	leading-snug	制限なし
本文	text-base font-normal	leading-relaxed	max-w-[60ch]
小	text-sm font-normal	leading-relaxed	max-w-[60ch]
キャプション	text-xs font-normal tracking-wide uppercase	leading-normal	制限なし
等幅	font-mono text-sm	leading-relaxed	max-w-[60ch]

• 見出し：font-light（300）または font-normal（400）を使います。見出しを太字にしてはいけません。
• 本文中の強調：font-medium（500）を使います。font-bold（700）は使いません。
• ディスプレイ／h1の文字間隔：tracking-tight（-0.02em）を使います。
• キャプションとラベル：tracking-wide uppercase text-xs を使います。

タイポグラフィの詳細

スイス・スタイルでは、タイポグラフィの精度が重要です。以下のルールは必ず守ってください。

• 三点リーダー … を使い、ピリオド3つ ... は使いません。
• 曲線型の引用符 " " と ' ' を使い、直線型の引用符 " ' は使いません。
• 読み込み中や進行中を示す状態は、三点リーダーで終わらせます：Loading…、Saving…。
• 数値カラムとテーブルでは font-variant-numeric: tabular-nums（Tailwind：tabular-nums）を使い、数字を縦に揃えます。
• 見出しには text-wrap: balance（Tailwind：text-balance）を使い、孤立した行を防ぎます。対応している場合、本文の段落には text-pretty を使います。
• 値と単位の間、およびブランド名の中には改行しないスペースを入れます：10 MB、⌘ K。

---

カラーシステム

ストーンパレット（ライトモード → ダークモード）

役割	ライト	ダーク	Tailwind
ページ背景	stone-50	stone-950	bg-stone-50 dark:bg-stone-950
サーフェス／カード	stone-100	stone-900	bg-stone-100 dark:bg-stone-900
控えめなサーフェス	stone-200	stone-800	bg-stone-200 dark:bg-stone-800
ボーダー	stone-200	stone-800	border-stone-200 dark:border-stone-800
控えめなボーダー	stone-100	stone-900	border-stone-100 dark:border-stone-900
メインテキスト	stone-900	stone-50	text-stone-900 dark:text-stone-50
セカンダリテキスト	stone-900/70	stone-50/70	text-stone-900/70 dark:text-stone-50/70
ターシャリテキスト	stone-900/40	stone-50/40	text-stone-900/40 dark:text-stone-50/40
プレースホルダー	stone-900/30	stone-50/30	text-stone-900/30 dark:text-stone-50/30

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

テキストの主張を弱めるには、不透明度を下げます。色相は決して変えないでください。

Full presence:   text-stone-900          (primary)
Softer:          text-stone-900/70       (secondary, labels)
Quiet:           text-stone-900/40       (tertiary, captions)
Ghosted:         text-stone-900/20       (disabled, placeholder)

ダークモードでは、stone-900 を stone-50 に置き換えます。不透明度の値はそのままです。

アクセントカラー

各プロジェクトで使用するアクセントカラーは1色です。デフォルトはスイスのポスターレッドです。

名前	Hex	Tailwind任意値
スイスレッド（デフォルト）	#C8102E	[#C8102E]
コバルト	#003B8E	[#003B8E]
ゴールデン	#F0B429	[#F0B429]
フォレスト	#2D6A4F	[#2D6A4F]

アクセントは、次の不透明度のみで使用してください。

Full:    bg-[#C8102E]          text-[#C8102E]
Muted:   bg-[#C8102E]/60       text-[#C8102E]/60
Subtle:  bg-[#C8102E]/20       (backgrounds, tints)
Ghost:   bg-[#C8102E]/10       (very light tints)

---

余白とグリッド

基本単位： 8px。すべての余白は8の倍数です。

トークン	値	用途
gap-2	8px	狭いインライン間隔
gap-4	16px	コンポーネント内部
gap-8	32px	コンポーネント間
gap-16	64px	セクション間
py-16	64px	セクションのパディング（最小）
py-24	96px	セクションのパディング（標準）
py-32	128px	セクションのパディング（ゆったり）

グリッド：

<div class="grid grid-cols-12 gap-4 md:gap-8">
  <div class="col-span-12 md:col-span-8">...</div>
  <div class="col-span-12 md:col-span-4">...</div>
</div>

コンテンツの最大幅： max-w-5xl または max-w-6xl と mx-auto px-4 md:px-8 を使用します。

---

レスポンシブデザイン

スイススタイルのグリッドは、ビューポートに合わせて柔軟に適応します。レイアウトの設計はすべて、2つのスケールで行う必要があります。モバイル（単一カラム、ゆとりのある縦方向のリズム）とデスクトップ（複数カラム、水平方向の緊張感）です。

ブレークポイント戦略：

プレフィックス	幅	用途
（なし）	0px以上	モバイル — 単一カラム、全幅
sm:	640px以上	大型スマートフォン、小型タブレット
md:	768px以上	タブレット、幅の狭いデスクトップ — 2カラムレイアウトを導入
lg:	1024px以上	デスクトップ — 12カラムグリッド全体、コンテンツの最大幅

モバイルレイアウトのルール：

• すべてのグリッドカラムを col-span-12 に折りたたみます
• セクションのパディングを縮小します：py-16 md:py-24 lg:py-32
• 水平方向のパディングを狭めます：px-4 md:px-8
• ディスプレイ用の文字サイズを縮小します：text-5xl md:text-7xl lg:text-8xl
• 複数カラムのナビゲーションは、ハンバーガーメニューまたは非表示にします
• テーブルは横スクロール可能にします：overflow-x-auto で囲みます
• 横並びのカードは縦に積み重ねます：grid-cols-1 md:grid-cols-2 lg:grid-cols-3

流動的な文字サイズのパターン：

<h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-normal tracking-tight leading-none">
  Swiss International Style
</h1>


<h1 class="text-[clamp(2rem,6vw,5rem)] font-normal tracking-tight leading-none">
  Swiss International Style
</h1>

レスポンシブなセクションのパターン：

<section class="py-16 md:py-24 lg:py-32 border-b border-stone-200 dark:border-stone-800">
  <div class="max-w-6xl mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      ...
    </div>
  </div>
</section>

タッチターゲット： すべてのインタラクティブ要素は、モバイルで少なくとも44×44pxにする必要があります。ボタンとナビゲーションリンクには min-h-[44px] min-w-[44px] を使用してください。

モバイルでのナビゲーション： 最小限のトップバーに折りたたみます。md: 未満では、セカンダリナビゲーションリンクを非表示にします。階層が深くネストされたハンバーガーメニューは決して使用しないでください。スイススタイルでは、フラットで明確なナビゲーションが好まれます。

---

ダークモード

Tailwindの media 戦略を使用します（システム設定を自動的に反映します）。

// tailwind.config.js
darkMode: 'media'

すべてのカラーのトークンに dark: バリアントがあります。上記のストーンパレット表を参照してください。bg-black や bg-white は決して使用せず、常にストーンスケールを使用してください。

color-scheme

Tailwind はコードのスタイルを変更するだけです。ブラウザーは CSS が読み込まれる前も、スクロールバー、ネイティブのフォームコントロール、キャンバスを独自のデフォルト設定で描画します。color-scheme を指定しないと、ダークモードのスイス風ページでは、bg-stone-950 の背景に明るいスクロールバーとライトモードのネイティブ入力欄が表示されます。

<html> に両方のスキームを必ず指定してください。

html { color-scheme: light dark; }

または、meta タグを使います（CSS より先に解析され、表示のちらつきを防ぎます）。

<meta name="color-scheme" content="light dark">

また、モバイルブラウザーのクロームとページの背景がなじむように、<meta name="theme-color"> も背景色に合わせて設定してください。

---

注意点

• 階層を示すために、別の色を決して使わないでください。 不透明度だけを使います。text-stone-500 ではなく、text-stone-900/70 を使ってください。
• 本文テキストに max-w-[60ch] を超える幅を設定しないでください。 幅が広すぎると読みにくくなります。
• bg-white や bg-black は決して使わないでください。 bg-stone-50 ／ bg-stone-950 を使ってください。
• IBM Plex Sans はシステムフォントではありません。 Google Fonts の <link> タグを必ず含めてください。
• プロジェクトごとにアクセントカラーは 1 色だけにしてください。 2 色目のアクセントカラーを追加しないでください。代わりに不透明度を変えてください。
• 見出しは太字ではなく、細めにします。 ディスプレイ見出しと h1 には font-light、h2～h3 には font-normal を使ってください。
• 構造要素に角丸を使わないでください。 入力欄、カード、コンテナーには rounded-none、または最大でも rounded-sm を使います。スイススタイルは直線的です。
• セクションの余白は広めに取ります。 最小値は py-16、標準は py-24 です。これより小さくしないでください。
• すべてのレイアウトをモバイルで動作させてください。 プレフィックスなしのクラスはモバイル向けです。大きなビューポート向けに md: と lg: のバリアントを必ず追加してください。デスクトップ優先で構築してから、モバイル向けに調整しないでください。
• モバイルではテーブルに overflow-x-auto が必要です。 幅の広いテーブルでモバイルのレイアウトを崩さないでください。
• タッチターゲットは最小 44px にしてください。 ボタン、リンク、ナビゲーション項目は、モバイルでタップできる必要があります。
• 固定サイズではなく、流動的な文字サイズを使います。 レスポンシブな文字サイズのクラス（text-3xl md:text-5xl）または clamp() を使い、単一のビューポートでしか機能しない固定サイズは使わないでください。
• フォーカス時の代替表示なしに outline-none を使わないでください。 インタラクティブな要素には、視認できるフォーカスインジケーターが必要です。代わりに focus-visible:ring-2 focus-visible:ring-stone-900 dark:focus-visible:ring-stone-50（またはアクセントカラー）を使ってください。リングをキーボード操作時だけ表示するため、:focus より :focus-visible を優先してください。
• prefers-reduced-motion を尊重してください。 トランジションやアニメーションを追加する場合は、motion-safe:transition motion-reduce:transition-none で制御してください。アニメーションさせるのは transform と opacity だけにしてください。transition: all は使わないでください。
• <html> に color-scheme: light dark を設定してください。 そうしないと、ダークモードでもスクロールバーとネイティブのフォームコントロールがライトモードのままになります。
• 直線的な引用符と ... は不具合です。 カーリークォートと … の文字を使ってください。

---

動作、アクセシビリティ、品質

このスキルは、視覚表現とデザインシステムを対象としています。アクセシビリティ、フォーカス管理、フォームの動作、ハイドレーション、パフォーマンス、インタラクションの品質は対象外です。

これらについては、フレームワークに依存せず、相互補完的な Vercel Web Interface Guidelines を参照してください。

• スキル：vercel-labs/agent-skills/web-design-guidelines
• 生のルール：https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

スイススタイルを適用した後、上記のルールを取得し、アクセシビリティ、フォーカス状態、フォームの動作、アニメーションの安全性、パフォーマンス、i18n の観点から結果を監査してください。指摘事項は提案ではなく、必須の修正として扱ってください。2 つのシステムが重なる部分（タイポグラフィの細かな調整、ダークモード、フォーカスリング）については、SKILL.md にすでに記載されているルールを優先してください。

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

作業	ファイル
カラーの完全なトークン表、CSS カスタムプロパティ、ダークモードの詳細	references/design-system.md
Tailwind のコンポーネントパターン：ボタン、カード、ナビゲーション、フォーム、バッジ	references/components.md
すぐに貼り付けられる tailwind.config.js と CSS の @theme ブロック	references/tailwind-config.md
既存ページへのこのシステムの適用、監査チェックリスト	references/prompting.md