闇のアトリエ Dark Atelier

DESIGN.md

DESIGN.md をコピーDESIGN.mdtokens.css

https://3pt.co.jp/design-library/md/dark-atelier/DESIGN.md

# DESIGN.md — 闇のアトリエ / dark-atelier

> **使い方**: このファイルをプロジェクトに置き、AIに
> 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。
> ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト）

## 1. コンセプト

暗がりを「背景」ではなく「主役」に据える。温かい墨色の闇に、骨色の文字と
くすんだ真鍮色の細い線だけを置き、余白と静けさで奢侈を語る。光らせない・盛らない。
陰翳の中で素材と言葉がゆっくり立ち上がる、夜のアトリエの佇まい。

**キーワード**: 陰翳 / 奢侈 / 静寂 / 真鍮 / 夜
**この見た目が向く場面**: 美容・香り・ジュエリー・建築/内装・オーベルジュ・作家の工房

## 2. タイポグラフィ

- 和文（見出し・本文とも）: Hina Mincho（繊細で高コントラストな明朝。ウェイトは1つだけなので
  **強弱は「太さ」でなく「大きさ」と「字間」で作る**）
- 欧文・数字: Bodoni Moda（高コントラストのディドネ。ブランド名・番号・英字ラベルに使う。
  大きく組むと象牙のような艶が出る。イタリックを引用や添え書きに。**Inter に置換しない**）
- 本文: 16px / 行間 2.1 / 字間 0.06em（明朝が細いので行間を広く、ゆったり読ませる）
- 見出しスケール: 大判ディスプレイ 72px / h2 34px / h3 20px / ラベル 11px
  （モバイルはディスプレイ 40px / h2 26px）
- 特記: 和文明朝と欧文ディドネで意図的にコントラストをつける（mixed-contrast）。
  英字ラベルは 11px・字間 +0.24em・大文字・真鍮色。キャッチは短く、余韻を残す
  体言止め。感嘆符を使わない。「〜を、あなたに。」型の空虚コピーを書かない

## 3. カラー

**闇＝温かい墨黒**を基調に、骨色と真鍮色1色だけを足す dark-luxury。
青黒（#0b1020系）に寄せないこと。青黒はAIダークの手癖なので明確に避ける。

| 役割 | 値 | 使用比率の目安 |
|---|---|---|
| 地（闇・ベース） | #17130f（温かい墨黒） | 70% |
| 地（節替え・やや明） | #1f1a14 | — |
| 文字（主・骨色） | #e9e0d0 | 20% |
| 文字（弱・くすみ） | #a79a85 | — |
| アクセント（真鍮/くすみ金） | #b8996a | 8%以下 |
| 罫線・境界（暗ライン） | #3a332a | — |

- 配色ルール: 真鍮色は「細い線」と「小さな文字」にのみ使う。許される用法は
  ①英字ラベル ②節番号 ③見出し脇の細い罫/線画 ④リンクのホバー の4つ。
  **真鍮を面（背景）に塗らない。金を光らせない（グラデ・グロー・メタリック表現を作らない）。**
  純黒 #000000・純白 #ffffff を使わない。青・紫・緑を一切足さない

## 4. レイアウト・余白

- コンテンツ最大幅: 1240px / **split-screen**（左に固定の題字カラム、右に本文がスクロール）
- 左カラム（約 40%）: `position: sticky` でブランド名・縦組みまたは大判の題字・ナビを留め置く。
  右カラム（約 60%）が本文としてスクロールする。左右の境は 1px の暗い罫 or 真鍮の細線1本
- セクション間余白: 上下 140px 基準（暗がりの余白を広く取る）。要素間は 8px の倍数
- 各節の頭に「節番号（Bodoni、例: I / 01）＋真鍮の短い罫＋英字ラベル＋和文見出し」を置く
- ヒーローの構成: **中央寄せの定型にしない。** 左の題字カラムに大判の一文を据え、
  右に短い導入文を置く非対称。ボタンは置かず、真鍮の細線と英字ラベルで締める。
  「特大中央見出し＋サブコピー＋ボタン2つ＋背景に光るグラデ」を作らない
- モバイルでは左右を縦積みにし、題字カラムを上に、本文を下に落とす

## 5. コンポーネントの質感

- ヘッダー・ナビゲーション: 透明地・骨色文字・下線なし。ナビはホバーで文字が真鍮色に
  変わる（下線は出さない）。ロゴは Bodoni の語幹＋和文の小さな添え
- 角丸: 0px（全要素直角）/ 影: 使わない（**box-shadow・グローを一切使わない。
  暗さで奥行きを作り、光の滲みを作らない**）/ 境界線: 1px solid #3a332a、
  強調したい線のみ 1px の真鍮 #b8996a
- ボタン: 原則ボタンを避け、テキストリンク＋真鍮の細い下線で誘導。必要なら
  透明地＋1px 真鍮罫線＋字間広め、ホバーで罫線と文字が真鍮色に灯る（塗り面にしない）
- カード的要素: 面や影で囲わない。区切りは横1本の暗い罫線（1px #3a332a）と余白。
  「3カラムの角丸カード＋影」を作らない
- リスト（香り・作品など）: 番号（Bodoni）＋名称（明朝）＋注記（弱・小）を横罫線で
  1行ずつ区切る。中黒やドットリーダで埋めず余白で対応
- フォーム要素: 地色背景・下線1px（#3a332a）のみ（囲み枠を作らない）・角丸0・
  フォーカスで下線が真鍮に変わる。プレースホルダはくすみ色
- 画像の扱い: 写真に頼らず線画とタイポで成立させる。使う場合は暗部を活かした
  低明度・低彩度の実物写真を1画面に1点まで、角丸なし・枠なし・影なし
- アクセント（真鍮）の適用範囲: §3 の4用法に限定。面・大面積に使わない

## 6. モーション

- 量: rich（ただし速さ・派手さではなく、遅さと余韻で魅せる。夜の所作）
- 使う動き:
  - スクロール進入で opacity 0→1・translateY(20px)→0 を 1.1s ease-out（暗がりから
    ゆっくり浮かび上がるように。複数要素は 140ms ずつ遅らせる）
  - 真鍮の細線を 1.6s かけて左→右（または上→下）に引く（幅/高さ 0→100%）
  - 大判見出しは文字を 90ms ずつ遅らせて 1 文字ずつ浮かべてもよい（やり過ぎない）
- 使わない動き: 発光/明滅、ネオン、グラデの移動、パララックスの多用、バウンス、
  高速スライド、数字カウントアップ。**「光る演出」を一切作らない**
- prefers-reduced-motion 時はすべて停止し、要素は最初から表示する

## 7. 写真・イラスト・図版

- 写真に頼らず「明朝＋ディドネの組版・闇の余白・真鍮の細線」で成立させる
- 装飾は真鍮 1px の線画（細い罫・簡素な幾何の枠・一本の縦線）に限る。
  グラデの抽象ブロブ・光の粒子・レンズフレア・3D などの「リッチ演出」素材を使わない
- 絵文字・既製アイコンセットを使わない。記号が要るなら約物か自作の細線SVG

## 8. 禁止事項（must not）

- Inter / Roboto / Arial / Noto Sans を使わない（Hina Mincho / Bodoni Moda で組む）
- **青黒・紺（#0b1020 系）のダークにしない**（温かい墨黒 #17130f を使う）。青・紫・緑を足さない
- グラデーションを一切使わない（背景・文字・罫すべて）。box-shadow・グロー・発光を使わない
- 金（真鍮）を光らせない。メタリックグラデ・金の面塗り・金のグローを作らない
- border-radius を使わない（常に 0）。「3カラムの角丸カード＋影」を作らない
- 純黒 #000000・純白 #ffffff を使わない（闇は #17130f、文字は骨色 #e9e0d0）
- 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ＋背景グラデ）を作らない
- グラスモーフィズム（半透明＋blur）を使わない
- 絵文字・既製アイコンセットをアイコンに使わない

## 9. 実装ノート

```css
/* tokens.css — この変数セットをそのまま使うこと */
:root {
  --color-bg: #17130f;       /* 温かい墨黒（青黒にしない・純黒にしない） */
  --color-bg-alt: #1f1a14;   /* 節替えのやや明るい暗色 */
  --color-text: #e9e0d0;     /* 骨色オフホワイト（純白は使わない） */
  --color-text-weak: #a79a85;/* くすみの弱文字 */
  --color-gold: #b8996a;     /* くすんだ真鍮。細線と小文字にのみ・光らせない */
  --color-line: #3a332a;     /* 暗色の罫線 */
  /* 変数には総称ファミリ(serif)を含めないこと（フォールバック連結が壊れる） */
  --font-latin: "Bodoni Moda";
  --font-heading: "Hina Mincho";
  --font-body: "Hina Mincho";
  --space-unit: 8px;
  --radius: 0;
  --max-width: 1240px;
}
```

- フォント読み込み:
  `https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;1,400&family=Hina+Mincho&display=swap`
- 本文の font-family は `var(--font-latin), var(--font-body), serif` の順に指定する
  （英数字が自動で Bodoni Moda になる）
- Hina Mincho はウェイトが 400 のみ。強弱は font-size と letter-spacing で作る
  （太字にできない前提で階層を設計する）
- split-screen は左カラムを `position: sticky; top: 0; height: 100vh` にし、
  右カラムを通常フローでスクロールさせる。モバイル（900px以下）では縦積みに戻す