# design-forge 共通仕様(SPEC) v1.0

印象語ごとのデザインプリセット工場。**全テーマはこの契約に完全準拠すること。**
準拠していれば、tokens.css を差し替えるだけで別テーマに載せ替えられる。

## 原則

- 外部依存は **Google Fonts のみ**。JSライブラリ・CDN禁止。$0運用。
- 全HTMLに `<meta name="robots" content="noindex">`。
- テキストは日本語ダミー。レスポンシブ必須(ブレークポイント 768px)。
- 各テーマは同一フォルダ内の相対参照で完結(`./tokens.css` 等)。

## フォルダ構成(テーマごと)

```
presets/<slug>/
├ tokens.css      … デザイントークン(CSS変数)のみ
├ components.css  … 部品スタイル(トークン変数を参照)
├ animations.css  … keyframes と動きのクラス
├ icons.svg       … SVGスプライト(<symbol> 20個)
├ sample-lp.html  … このテーマ一式で組んだ架空業種のLP
└ sample-app.html … 同テーマの管理画面(ダッシュボード)サンプル
```

## tokens.css 必須変数(名前を変えない・追加は可)

```css
:root{
  --c-bg; --c-surface; --c-text; --c-muted;
  --c-primary; --c-primary-text; --c-accent; --c-border;
  --font-display; --font-body;
  --radius-s; --radius-m; --radius-l;
  --shadow-s; --shadow-m;
  --speed;
}
```

## components.css 必須クラス(全テーマ共通・見た目だけ変える)

- 基礎: `body`基本設定, `.container`(max-width 1080px)
- ナビ: `.nav` `.nav-logo` `.nav-links`
- ヒーロー: `.hero` `.hero-title` `.hero-lead` `.hero-cta`
- セクション: `.section` `.section-title` `.section-lead`
- グリッド: `.grid-2` `.grid-3`
- カード: `.card` `.card-icon` `.card-title`
- ボタン: `.btn` `.btn-primary` `.btn-ghost`
- その他: `.badge` `.form-field` `.input` `.table` `.footer` `.icon`
- アプリ用: `.app-layout` `.sidebar` `.topbar` `.stat` `.stat-value` `.stat-label`

## animations.css 必須

- keyframes: `fadeUp` `fadeIn` `float` `pulse`
- スクロール出現: `.reveal` → `.is-visible` で発火(transition)
- ホバー: `.hover-lift`
- テーマ固有の演出(グロー、シマー等)は自由に追加してよい

サンプルHTML末尾に共通JS(これだけ・変更不可):

```html
<script>
const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('is-visible');io.unobserve(e.target)}}),{threshold:.15});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
</script>
```

## icons.svg 必須 symbol id(20個・viewBox="0 0 24 24"・currentColor)

`home` `user` `users` `mail` `phone` `calendar` `clock` `map-pin` `search`
`heart` `star` `check` `arrow-right` `chevron-down` `menu` `close` `cart`
`download` `settings` `info`

- 幾何(モチーフ)は presets/clean を流用してよいが、**線質はテーマに合わせて必ず変える**
  (stroke-width、linecap/linejoin、角の丸み、塗り/線の別 など)。
- 使い方: `<svg class="icon"><use href="./icons.svg#home"/></svg>`
  ※file://直開きでは外部sprite参照が効かないブラウザがあるため、
  サンプルHTMLには **spriteをインラインで先頭に埋め込む**(hidden div)。icons.svg は配布用の原本。

## sample-lp.html 必須セクション(順序も揃える)

nav → hero → 特徴3枚(grid-3+card+icon) → サービス/こだわり → 料金/メニュー → お客様の声 → CTA → footer

## sample-app.html 必須構成

app-layout(sidebar: アイコン付きメニュー / topbar / stat×4 / table / フォームパネル)

## テーマ一覧(slug / 印象語 / 方向性)

| slug | 印象語 | 配色・質感 | フォント(Google Fonts) | アイコン線質 | サンプル業種 |
|---|---|---|---|---|---|
| clean | 清潔 | 白×スカイブルー、空気感 | Noto Sans JP | 1.8px/丸端 | 歯科クリニック |
| cool | かっこいい | ダーク×スチールブルー、鋭角 | Oswald + Noto Sans JP | 1.5px/角端・直線的 | パーソナルジム |
| cute | かわいい | クリーム×ピンク、まる | M PLUS Rounded 1c | 2.5px/丸端・角丸強 | ネイルサロン |
| warm | 温かい | ベージュ×オレンジ茶、柔らか | Zen Maru Gothic | 2px/丸端 | ベーカリーカフェ |
| pop | 元気・ポップ | 白×イエロー+多色、太枠 | Mochiy Pop One + M PLUS Rounded 1c | 2.8px/丸端・太い | 子ども英会話教室 |
| luxury | 高級 | 黒×ゴールド、艶 | Cormorant Garamond + Noto Serif JP | 1.2px/角端・繊細 | 高級フレンチ |
| elegant | 上品 | 白×グレージュ+ローズ、静か | Shippori Mincho | 1.4px/丸端・細身 | ブライダルサロン |
| calm | 落ち着き・自然 | セージグリーン×アース、余白 | Zen Kaku Gothic New | 1.6px/丸端 | ヨガスタジオ |
| minimal | ミニマル | 白×黒+1差し色、余白最大 | Inter + Noto Sans JP | 1.5px/角端・幾何学 | 建築設計事務所 |
| modern | 都会的モダン | ライトグレー×ネイビー、グリッド | Manrope + Noto Sans JP | 1.7px/角端 | ITコンサル(SaaS) |
| cyber | 未来的 | 黒×ネオン(シアン/グリーン)、グロー | Orbitron + Noto Sans JP | 1.5px/角端+発光 | eスポーツチーム |
| wamodern | 和モダン | 生成り×藍+朱、縦組アクセント | Shippori Mincho + Noto Serif JP | 1.6px/角端・筆意識 | 温泉旅館 |
| retro | レトロ | クリーム×ブラウン/マスタード/ティール | Zen Old Mincho + DotGothic16(見出し装飾) | 2px/丸端・オールド | 純喫茶 |
| craft | 職人・クラフト | クラフト紙×濃茶、手仕事感 | Yuji Syuku + Zen Kaku Gothic New | 2.2px/丸端・不均一風 | 家具工房 |

※ 基準実装は presets/clean。構造・クラス名はcleanと同一、見た目・動き・アイコン線質だけ変える。