event-manual — 4S イベント基盤テンプレート

@event/visuals の全ビジュアル（SNS / 会場パネル）は、色・書体・グレイン・透かしを 1 つの EventBrand トークンから読む。イベントごとに差し替えるのは基本的にこの 1 オブジェクトだけで、テンプレも chrome も見た目が一括で変わる。session-card の theme.ts（DEFAULT_* に部分定義をマージ + CSS 変数注入）と同じ設計を --vis- 名前空間で踏襲している。

EventBrand の構造

type EventBrand = {
  name: string;
  colors: BrandColors;     // 10 色トークン
  fonts: BrandFonts;       // 書体スタック（後述の triplet + body/mono）
  logos: BrandLogos;       // vertical / horizontal / icon（null = 無し）
  grain: string;           // 微細グレインの data URI
  watermark: BrandWatermark;
};

colors は dark コンテキスト前提（背景 = deep ink / 前景 = paper）で 10 トークン: bg / bg2（背景グラデの 2 段目）/ fg / fgDim / fgFaint（HUD ラベル・補助線）/ accent / accentDeep / accentAlt（差し色）/ hair（1px divider）/ hairSoft（グリッドテクスチャ）。

font triplet — ラテン先頭 → 和文フォールバック

BrandFonts は 5 スタックだが核は triplet である。日本語イベントで「英数字はラテン書体・仮名漢字は和文書体」を混植させるための 3 段構え:

display … 見出し。ラテン優先 → 和文フォールバック（英数字だけラテン書体が当たる）
jp … 和欧混植。数字/英字を含む見出し（日付や英語混じりタイトル）
jpPure … 純和文。ラテンを含まない見出し（明朝系を当てたい時）

これに本文 body と mono（HUD ラベル・連番・コード）が付く。告知カードでは英数キッカー/日付を mono、和文タイトルを jp に割り当てるのが定石。

grain — 質感のベース

DEFAULT_GRAIN_URI は fractalNoise（baseFrequency=0.9, numOctaves=2）の SVG を data URI 化したもの。全カードが 160×160 タイルで opacity 0.05 程度に敷き、AI/フラットな平面感を殺して「紙に刷った」質感を出す。外部ファイル参照ゼロ（data URI）なので capture 時に画像 fetch が発生しない = 焼き漏れが起きない。

watermark — 背面の巨大 italic グリフ

BrandWatermark = { glyph, color, italic, weight }。chrome が背面に敷く 1〜数文字の透かし。glyph が 空文字なら透かしを描かない（showWatermark = watermark && glyph !== ""）。color は低 alpha 前提（既定 rgba(...,0.045)）。イベントの頭文字や記号を薄く沈める用途。

resolveBrand + brandCssVars

// 一部だけ上書き → 残りは DEFAULT_BRAND（中立ダーク）で埋まる
const brand = resolveBrand({
  name: "starter",
  colors: { accent: "#5ec8c0", accentAlt: "#e0653c" },
  watermark: { glyph: "S" },
});

resolveBrand(partial?) は 各グループを DEFAULT_BRAND ベースに浅くマージする（colors を一部定義しても未指定色は既定で埋まる）。xdeal の olive/orange・spikes の iridescent といったイベント固有色は DEFAULT_BRAND に焼かず、各イベントが resolveBrand で上書きする方針。

描画側は brandCssVars(brand) が返す { "--vis-bg": ..., "--vis-font-jp": ..., "--vis-grain": url(...), ... } をカード root / chrome root に注入し、子要素は全て var(--vis-*) で読む。ブランドを差し替える = このマップの値が変わる = 全テンプレが追従する。

配線例（starter）

apps/starter/src/lib/visuals.ts に visualsBrand = resolveBrand({...}) を置き、スタジオ（/admin/visuals）とテンプレが同じ 1 トークンを import する。イベント立ち上げ時に触るのは色 5〜6 個と watermark.glyph だけで、残りは中立ダークの既定が効く。

デザイントークン