swiss-bauhaus-design

Swissted デザインシステム

Editframe のランディングページはSwisstedをモデルにしています。Swissted は Mike Joyce による、スイス・インターナショナル・スタイルでパンク／インディーのコンサートポスターを再構想するプロジェクトです。これが具体的な参照元です。一般的なスイス／バウハウスでも、デ・ステイルでもありません。

Swissted の特徴：

• 彩度の高いプライマリカラーを全面に使用（くすんだ色でも、「洗練された」色でもありません）
• 色の上に直接配置する、太い大文字の文字組み。カードもコンテナもありません
• 構造を分ける、明確な幾何学的ルール
• 各セクションの構成要素は3〜4つまで

品質と完成度

デザインの質は、言葉にされる前に感じ取られます。開発者がページを開いたとき、「この人たちはやり方をわかっている」と思うか、理由のわからない違和感を覚えるかのどちらかです。信頼と、信頼にあと一歩届かない状態。その差に、システムの配慮が行き届かなくなった箇所が表れます。

システムが完成していると感じられる状態：

• すべてのトークンに明示された役割がある
• すべての役割が実際に使われている
• 色の選択に根拠があり、恣意的ではない
• CSS を読む新しいエージェントが、何を使うべきか、その理由も理解できる

システムが放置されていると感じられる状態：

• トークンが定義されているのに使われていない
• 利用できたというだけの理由で色が使われている
• ルールが暗黙のままで、記述されていない

何かがおかしいと感じたら、症状にパッチを当てないでください。配慮が行き届かなくなった箇所まで問題をたどり、そこでシステムを修正してください。

トークンシステム

telecine/services/web/app/styles/landing.css で定義されています。

/* PRIMARY — brand moment, hero CTA, primary feature section BG */
--poster-red: #E53935;

/* SECONDARY — emphasis on dark backgrounds, template/data section BG */
/* Never as text on light backgrounds — contrast fails WCAG AA (~2.3:1) */
--poster-gold: #FFB300;

/* TECHNICAL — focus rings, code syntax, architecture diagrams */
/* Not for section backgrounds or CTAs */
--poster-blue: #1565C0;

/* AI/AGENT — PromptToTool section only. Do not use elsewhere. */
--poster-green: #2E7D32;

/* STRUCTURE */
--ink-black: #1a1a1a;
--paper-cream: #FAF8F5;
--warm-gray: #6B6B6B;
--card-dark-bg: #1a1a1a;

--poster-pink は CSS で定義されていますが、使用対象から削除されています。使われていないトークンがあると、実際よりもパレットが大きく、意図が曖昧に見えます。

明るい背景にゴールドを使う場合： --poster-gold (#FFB300) はクリーム色や白の背景では WCAG AA に準拠しません。明るい背景でゴールドのテキストを使う場合は、#B45309 を使用してください（白に対して約4.5:1）。

セクション構成

各セクションには、明示された背景色とテーマ上の根拠があります。色の選択には理由があり、恣意的ではありません。

セクション	背景色	メインアクセント	根拠
ヒーロー	--paper-cream	--poster-red	ブランドを印象づける最初の場面
CodeExamples	--card-dark-bg	--poster-gold	技術とコード。暗い背景にゴールドが映えます
TemplatedRendering	--poster-gold	black	データがテンプレートを動かす。ゴールドがコンテンツです
RenderAnywhere	--poster-red	white	中心となる機能の訴求
Architecture	--paper-cream	--poster-blue / gold	技術図
GettingStarted	white	--poster-red	行動を促します。赤が動機づけになります
PromptToTool	--poster-green	white / gold	AI／エージェント。ここでは緑を使います

ストーリーの順序：クリーム → ダーク → ゴールド → 赤 → クリーム → 白 → 緑。新しいセクションはこの順序に沿い、コメントでテーマ上の根拠を明記してください。

タイポグラフィ

/* Headlines — the Swissted voice */
font-weight: 900;           /* font-black */
letter-spacing: -0.05em;    /* tracking-tighter */
text-transform: uppercase;
line-height: 0.9;

/* Section labels — visually distinct from headlines */
font-size: 0.75rem;         /* text-xs */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;     /* tracking-widest */
color: var(--warm-gray);

/* Body */
font-weight: 400;
color: var(--warm-gray);
line-height: 1.625;         /* leading-relaxed */

大文字の見出しは単なるラベルの表現ではなく、このデザインの美的な声です。大文字と小文字の混在にして柔らかくしないでください。力強さは、その姿勢を貫くことから生まれます。

背景上の文字

背景色はセクションの背景です。文字はその上に直接配置します。

WRONG:  section-bg → white card → shadow → content
RIGHT:  section-bg → content

要素の配置はグリッドの列で整えます。区切りには罫線を使います。それ以外は何も加えません。

明るいセクションの構造的な区切り：

<div class="border-t-4 border-[var(--ink-black)]" />     
<div class="border-r-2 border-[var(--ink-black)]" />     

色付きのセクション（赤、ゴールド、緑）：

<div class="border-t-2 border-white/40" />               
<div class="border-r-2 border-black/20" />               

全面の色が切り替わるだけで新しいセクションだと伝わります。追加の目印、つまりラベルや影、カードは必要なく、適切でもありません。

排除するデジタルならではの表現

印刷物らしさを損なうウェブ UI の慣例を以下に示します。

要素	適さない理由	代わりに使用するもの
box-shadow（すべて）	印刷物は平面的です。影は印刷物にはない UI の奥行きを表現します。	なし。色のコントラストで強弱を表現します。
border-radius > 0	角丸は、操作可能な UI 要素を連想させます。印刷物のボックスは四角形です。	rounded-none、または指定しません
色付き背景に載せたカード	赤い背景に白いカードを載せるのは、ポスターの構成ではなくウェブのコンポーネントです。	セクションの地に直接テキストを配置します
控えめな境界線 rgba(0,0,0,0.12)	目立たない境界線は、デジタル UI の慣例です。	太さのある罫線（2–4px、完全な不透明度）、または境界線なし
階層を示す手がかりの多用	色＋影＋ラベル＋カードは、1つの切り替わりに対して4つの手がかりになります	1つだけ選びます。色だけで十分です。
操作できない要素のホバー状態	あらゆる場所で操作できると目が期待するようになります	視覚的なホバー表示は、実際に操作できる要素に限ります

ボタン

角丸は禁止です。柔らかな影も禁止です。四角い形状で、意図を明確にします。

<a class="px-8 py-4 bg-[var(--poster-red)] text-white font-bold uppercase tracking-wider hover:bg-[var(--ink-black)]">
  Get Early Access
</a>


<a class="px-8 py-4 border-2 border-[var(--ink-black)] font-bold uppercase tracking-wider hover:bg-[var(--ink-black)] hover:text-white">
  Read the Docs
</a>

プライマリ CTA には常に --poster-red を使用します。どのセクションでも、CTA の背景色に別の色を使用してはいけません。

コードブロック

「カードを使わない」の唯一の例外です。コードをコードとして機能させるには、コンテナが必要です。確立されたパターンを使用します。

<div class="bg-[var(--card-dark-bg)]">
  <div class="flex items-center gap-2 px-4 py-3 border-b border-white/10">
    <div class="w-3 h-3 rounded-full bg-[#ff5f57]" />
    <div class="w-3 h-3 rounded-full bg-[#febc2e]" />
    <div class="w-3 h-3 rounded-full bg-[#28c840]" />
    <span class="ml-4 text-xs text-white/50 font-mono">filename.tsx</span>
  </div>
  <pre class="p-6 font-mono text-sm text-white/90">...</pre>
</div>

シンタックスハイライト：キーワード → --poster-red、JSX タグ → --poster-blue、文字列／値 → --poster-gold。

完了前の確認

デザイン作業を終える前に、以下を確認してください。

• 使用するすべてのトークンに役割が定義されている（上の表と照合）
• 各セクションの色の選択に根拠があり、コメントで説明されている
• コードブロック以外の要素に box-shadow が使われていない
• セクションのコンテナや機能項目に border-radius が使われていない
• コンテンツがカードの中ではなく、地の上に配置されている
• セクションの切り替わりに使う構造上の手がかりが1つだけである（色の変化がその手がかり）
• すべてのプライマリ CTA に bg-[var(--poster-red)] が使われている
• 明るい背景上の金色のテキストには --poster-gold ではなく #B45309 が使われている
• このセクションのコードを読む新しいエージェントが、質問せずに色の選択をすべて理解できる