Structured
Emergence

デザインシステムの目的

このデザインシステムが奉仕する目的は3つ。各セクションの判断に迷ったら、ここに立ち返る。

デザイン原則

全体コンセプトは Structured Emergence ── 構造の中から、価値が立ち上がる。カラーコンセプトは Dissolving Boundaries ── 領域の垣根を越え、境界を溶かす。相反する2色（Coral / Deep Blue）と、その2色が交わる OKLCH グラデーションで体現する。

白黒の強い骨格の中に、暖色と寒色が溶け合うグラデーションを置く。大胆さは一カ所（グラデーション）に集中させ、タイポ・レイアウト・モーションは静かに保つ。色が主役なら、他は黒と余白で締める。

カラーシステム — 2階建て

カラーは「白黒の構造（キャンバス）」と「2色＋そのグラデーション（意味）」の2階建て。画面の大半（目安 85% 以上）は白・黒・グレーで通し、グラデーションは 境界が溶ける瞬間 を持つときにだけ、小面積で出す。

ロゴ

ロゴはシンボルマーク・縦組み・横組み・ワードマークで構成される。シンボルとロックアップにはブランドグラデーション（signature）を用い、文字主体の運用ではモノクロのワードマークを使う。装飾を加えず、骨格をそのまま見せることが信頼の土台になる。

シンボルマーク ・ Symbol

最小単位の標識。ファビコン・アプリアイコン・余白の狭い箇所で単独使用する。

縦組みロゴ ・ Vertical

シンボル＋ワードマークの縦ロックアップ。正方形に近い領域や中央配置で使う。

横組みロゴ ・ Horizontal

シンボル＋ワードマークの横ロックアップ。ヘッダー・名刺・署名など横長の領域での基本形。

Black / 黒

#111111

明るい面（paper・surface・白）で使用する基本バージョン。

White / 白

#FFFFFF

暗い面（ink）や写真上で使用。十分なコントラストが取れる場合のみ。

余白（クリアスペース）

ロゴの高さ（＝「K」の高さ）の 1/2 以上を四辺に確保。この範囲内に他の要素・文字を置かない。

120px / 24mm

最小サイズ

判読性を保つ下限。幅 120px（印刷時 24mm）を下回って使用しない。

背景の使い分け

明度で判断する。明るい面は黒、暗い面は白。中間調や写真では十分なコントラストを確保する。

禁止事項 ・ Don'ts

色を変えない

ブランド色を含む任意の色での着色は不可。黒か白のみ。

縦横比を変えない

引き伸ばし・圧縮・回転による変形を行わない。

効果を加えない

影・グラデーション・縁取りなどの装飾を付けない。

低コントラスト不可

判読を妨げる中間調・煩雑な背景の上に置かない。

タイポグラフィ — 静かな構造

色（グラデーション）が表現を担うぶん、書体は構造に徹する。セリフ見出しは使わない。ウェイトは Regular(400) / Medium(500) / Bold(700) の3段。

レイアウト & 余白

12カラムグリッド。見た目は複雑にせず、余白を大きく取る。コンテンツ最大幅 ~1200px、本文ブロックはさらに狭く（~640–720px）。角丸は浅く（0–4px 推奨、最大8px）。区切りはヘアライン罫線＋余白。ドロップシャドウは使わない。

グラフィック言語 — 5つの幾何プリミティブ

抽象CGやAIっぽい球体は使わない。5つの幾何プリミティブで一貫した記号体系をつくり、色はここに乗せる。基本は ink の hairline、シグネチャの Update Loop だけ brand-gradient。

コンポーネント（Scope 1）

UIを増やしすぎない。少数のパターンを使い回す。

脱・テンプレの原則：角丸カラム上端のアクセントバーを付けない／角丸は浅く（0–4px）／ボックス囲みよりヘアライン罫線＋余白／CTAは「色帯＋ベタ塗りボタン」にしない。

モーション & ガードレール

バイリンガル方針

日本語が主、英語は完全逐語訳にしない。英語は「意味の核（canonical copy）」を保った最低限の会社紹介。グローバルプロジェクトにも対応している印象を自然に与え、global firm 感を出しすぎない。

Scope 2 への拡張フック

今は作らないが、壊さない。LP のコンポーネントを後でコーポレートサイト（発信自動化）へ増築できるよう、以下を念頭に設計しておく。実装は不要。