@deckspec/theme-noir-display 0.1.0

package/LICENSE

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to the Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding any notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2026 hayaoo
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/components/card/index.tsx

@@ -0,0 +1,31 @@
+import type { ReactElement, ReactNode, CSSProperties } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  highlight?: boolean;
+  style?: CSSProperties;
+}
+
+/**
+ * Dark card with subtle border and rounded corners.
+ */
+export function Card({ children, highlight, style }: CardProps): ReactElement {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--color-card-background)",
+        borderRadius: "var(--radius)",
+        border: highlight
+          ? "1px solid var(--color-primary)"
+          : "1px solid var(--color-border)",
+        padding: "32px",
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/components/index.ts

@@ -0,0 +1,2 @@
+export { SlideHeader } from "./slide-header/index.js";
+export { Card } from "./card/index.js";

package/components/slide-header/index.tsx

@@ -0,0 +1,47 @@
+import type { ReactElement } from "react";
+
+interface SlideHeaderProps {
+  label?: string;
+  heading: string;
+  headingSize?: number;
+}
+
+/**
+ * Minimal slide header — optional muted label + display heading.
+ * Apple-style: label is small muted text, heading is large semibold.
+ */
+export function SlideHeader({
+  label,
+  heading,
+  headingSize = 40,
+}: SlideHeaderProps): ReactElement {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {label && (
+        <span
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            letterSpacing: "-0.016em",
+            color: "var(--color-accent)",
+          }}
+        >
+          {label}
+        </span>
+      )}
+      <h2
+        style={{
+          fontFamily: "var(--font-heading)",
+          fontSize: headingSize,
+          fontWeight: 600,
+          lineHeight: 1.1,
+          letterSpacing: headingSize >= 48 ? "-0.015em" : "-0.009em",
+          color: "var(--color-foreground)",
+          margin: 0,
+        }}
+      >
+        {heading}
+      </h2>
+    </div>
+  );
+}

package/design.md

@@ -0,0 +1,289 @@
+# Pristine Display — Design System
+
+Apple.com のプロダクトページにインスパイアされたライト・プレゼンテーションテーマ。
+キャンバスグレー (`#f5f5f7`) の上に白カードを浮かせ、ディスプレイタイポグラフィとドラマティックな余白で視覚的ヒエラルキーを構築する。
+
+## インスピレーション
+
+Apple.com（https://www.apple.com/jp/）のプロダクトページをベースに設計。
+- ページ背景は純白ではなく `#f5f5f7`（キャンバスグレー）
+- カードやコンテンツ面は `#ffffff`（白）
+- テキストは `#1d1d1f`（ニアブラック） — 純黒は使わない
+- サブテキストは `#6e6e73`（ミューテッドグレー） — 色のコントラストで階層を作る
+- セクションごとにグレーと白を交互に配置してリズムを生む
+
+## デザインの原則
+
+### 1. キャンバスグレー + 白カード
+スライド背景は `#f5f5f7`。情報を載せるカードは `#ffffff` で浮かせる。白 on 白ではなく、グレー on 白のレイヤー感が Apple らしさの核。一部のスライド（タイトル、ヒーロー、メトリクス、クロージング）は全面白でインパクトを出す。
+
+### 2. 2ウェイト制
+semibold 600（見出し・ラベル）と regular 400（本文・説明）の 2 種類のみ。bold 700 や light 300 は使わない。ウェイトの差を最小にすることで、Apple のクリーンな印象を保つ。
+
+### 3. タイトなレタースペーシング
+大きいフォントほど負のレタースペーシング。これが Apple のディスプレイタイポグラフィの最大の特徴。
+
+| フォントサイズ | letter-spacing |
+|--------------|---------------|
+| 80px+        | -0.015em      |
+| 48px         | -0.003em      |
+| 40px         | -0.009em      |
+| 17px (body)  | -0.022em      |
+| 14px (caption) | -0.016em    |
+
+### 4. 極端なホワイトスペース
+要素間に大きな gap（32-48px）。情報密度より「呼吸」を優先。1スライド1メッセージが基本。スライドの 40-60% は空白であるべき。
+
+### 5. セクション背景の交替
+スライドを通して見たとき、グレーキャンバス(`#f5f5f7`) と 白面(`#ffffff`) が交互に現れることで Apple.com のスクロール体験に近いリズムが生まれる。
+
+| スライドタイプ | 背景 |
+|--------------|------|
+| タイトル / ヒーロー / メトリクス / クロージング | `#ffffff` |
+| カード系（pillars / comparison / pricing） | `#f5f5f7`（カードは白） |
+| リスト系（bullet-list / photo-split） | `#ffffff` |
+| グラフ / アイコングリッド | `#ffffff` |
+| フロー図 | `#ffffff`（ステップカードは `#f5f5f7`） |
+
+### 6. 控えめなシャドウ
+カードには `4px 4px 12px rgba(0,0,0,0.06)` の極めて subtle な影。ボーダーは基本不要 — 白カードとグレーキャンバスのコントラストだけで十分。ハイライトカードのみ `1.5px solid #0071e3` のボーダー。
+
+### 7. 光学的センタリング
+中央揃えスライドでは、コンテンツグループに `marginBottom: 32px` 程度を追加して視覚的な中心を数学的な中心より少し上にずらす。これは Apple のキーノートで使われるテクニック。
+
+## カラーパレット
+
+| Token | 値 | 用途 |
+|-------|-----|------|
+| background | `#f5f5f7` | スライド背景（キャンバスグレー） |
+| foreground | `#1d1d1f` | 見出し・本文（ニアブラック） |
+| primary | `#0071e3` | CTA、ピルボタン、ハイライトボーダー |
+| accent | `#0066cc` | アイブロウラベル、リンク色 |
+| muted-foreground | `#6e6e73` | サブテキスト、キャプション、番号 |
+| border | `rgba(0,0,0,0.08)` | 境界線（ほぼ不可視） |
+| card-background | `#ffffff` | カード面 |
+| muted | `#e8e8ed` | 非活性面、チップ背景 |
+
+### 使ってはいけない色
+- 純黒 `#000000` をテキストに使わない（`#1d1d1f` を使う）
+- 純白 `#ffffff` をスライド背景全体に使わない（`#f5f5f7` を使う。コンテンツ面だけ白）
+- primary `#0071e3` を大面積の背景に使わない（テキスト・ボーダー・ボタンのみ）
+- 赤・緑・黄色などの強い色は避ける。アクセントは青のみ
+
+## タイポグラフィ
+
+### フォントスタック
+```
+heading: SF Pro JP → SF Pro Display → Hiragino Sans → Helvetica Neue → Noto Sans JP → sans-serif
+body:    SF Pro JP → SF Pro Text    → Hiragino Sans → Helvetica Neue → Noto Sans JP → sans-serif
+```
+
+- macOS: SF Pro JP または Hiragino Sans が適用される
+- Windows: Noto Sans JP にフォールバック
+- 明朝体は使わない
+- `-webkit-font-smoothing: antialiased` 必須
+
+### タイプスケール
+
+| 役割 | サイズ | ウェイト | line-height | letter-spacing |
+|------|--------|---------|-------------|---------------|
+| ヒーロー見出し | 80px | 600 | 1.05 | -0.015em |
+| タイトル / クロージング | 72px | 600 | 1.05 | -0.015em |
+| 巨大数値 | 120px | 600 | 1.0 | -0.025em |
+| セクション見出し | 44-48px | 600 | 1.08 | -0.003em |
+| カード見出し / サブ見出し | 40px | 600 | 1.1 | -0.009em |
+| アイテムタイトル | 17-21px | 600 | 1.24-1.37 | 0.011em〜-0.022em |
+| 本文 | 17px | 400 | 1.47 | -0.022em |
+| アイブロウラベル | 17px | 600 | — | -0.022em |
+| キャプション / 説明 | 14px | 400 | 1.29-1.43 | -0.016em |
+
+## レイアウト
+
+- スライドサイズ: 1200×675 (16:9)
+- パディング: 48-60px（上下）, 60-80px（左右）
+- セクション間 gap: 40-48px
+- アイテム間 gap: 20-24px
+- カード角丸: 18px（大型タイル）, 12px（標準）, 16px（フローステップ）
+- ボタン角丸: 980px（完全ピル）
+
+## パターンカタログ
+
+### title-center
+**用途**: オープニング・タイトルスライド
+**背景**: 白 (`#ffffff`)
+**レイアウト**: 中央揃え、72px ディスプレイ見出し + ミューテッド字幕
+**vars:**
+- `title` (string, max 40): ディスプレイ見出し
+- `subtitle` (string, max 80): 字幕
+
+### hero-statement
+**用途**: インパクト文、ビジョンステートメント
+**背景**: 白
+**レイアウト**: 青アイブロウ + 80px 巨大見出し + ミューテッド本文、全て中央揃え
+**vars:**
+- `eyebrow` (string, max 30): 青アクセントラベル
+- `headline` (string, max 60): 巨大見出し（`\n` で改行可）
+- `body` (string, max 200): 本文
+
+### feature-metrics
+**用途**: KPI、数値ハイライト
+**背景**: 白
+**レイアウト**: 中央見出し + 横並びの巨大数値（56px）
+**vars:**
+- `headline` (string, max 60): セクション見出し
+- `description` (string, optional): 補足テキスト
+- `metrics` (array, 2-4): `{ label, value }`
+
+### bullet-list
+**用途**: 特徴一覧、ステップ
+**背景**: 白
+**レイアウト**: 左カラム（アイブロウ + 見出し）+ 右カラム（番号付きリスト）
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 80): 見出し
+- `items` (array, 2-6): `{ title, description? }`
+
+### three-pillars
+**用途**: 3つの柱、特徴カード
+**背景**: キャンバスグレー（カードは白）
+**レイアウト**: 中央見出し + 2-3カラム白カード（subtle shadow）
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 60): 見出し
+- `pillars` (array, 2-3): `{ title, description, value? }`
+
+### big-number
+**用途**: 単一数値のインパクト
+**背景**: 白
+**レイアウト**: 中央に 120px 巨大数値 + 見出し + 本文
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `value` (string, max 20): 巨大数値
+- `unit` (string, optional): 単位
+- `headline` (string, max 60): 見出し
+- `description` (string, optional): 本文
+
+### icon-grid
+**用途**: 機能一覧、エコシステム紹介
+**背景**: 白
+**レイアウト**: 中央見出し + 3x2 アイコングリッド（`#f5f5f7` バッジ + 青アイコン）
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 60): 見出し
+- `items` (array, 3-6): `{ icon, title, description? }`
+**アイコン**: lucide-react の名前を使用（例: `file-code-2`, `shield-check`）
+
+### chart-bar
+**用途**: 棒グラフ、定量比較
+**背景**: 白
+**レイアウト**: 左寄せ見出し + 凡例 + Recharts 棒グラフ（固定幅 1020px）
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 60): チャート見出し
+- `data` (array, 2-8): `{ label, value, value2? }`
+- `series1Name` (string, optional): 第1系列名
+- `series2Name` (string, optional): 第2系列名
+**注意**: SSR のため `ResponsiveContainer` は使わず固定サイズ
+
+### flow-diagram
+**用途**: プロセスフロー、パイプライン図解
+**背景**: 白（ステップカードは `#f5f5f7`）
+**レイアウト**: 中央見出し + 横並びステップカード + 青矢印
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 60): 見出し
+- `steps` (array, 3-5): `{ title, description? }`
+
+### comparison-columns
+**用途**: 機能比較、A vs B
+**背景**: キャンバスグレー（カードは白）
+**レイアウト**: 中央見出し + 2-3カラム白カード（チェックマーク付きリスト）
+**vars:**
+- `heading` (string, max 60): 見出し
+- `columns` (array, 2-3): `{ name, items[], highlighted? }`
+
+### pricing-tiers
+**用途**: 料金プラン
+**背景**: キャンバスグレー（カードは白）
+**レイアウト**: 中央見出し + 2-3カラムプランカード（価格表示 + 機能リスト）
+**vars:**
+- `heading` (string, max 60): 見出し
+- `plans` (array, 2-3): `{ name, price, description?, features[], highlighted? }`
+
+### photo-split
+**用途**: ビジュアルストーリーテリング、写真 + テキスト
+**背景**: 白
+**レイアウト**: 50/50 分割。片側テキスト（アイブロウ + 見出し + 本文）、片側写真
+**vars:**
+- `label` (string, optional): 青アイブロウ
+- `heading` (string, max 60): 見出し
+- `body` (string, max 300): 本文
+- `image` (string): 画像パス or URL
+- `imagePosition` ("left" | "right", optional): 画像の位置（default: right）
+
+### thank-you
+**用途**: クロージング
+**背景**: 白
+**レイアウト**: 72px 見出し + ミューテッド本文 + ピル型CTA + リンク
+**vars:**
+- `headline` (string, max 40): クロージング見出し
+- `body` (string, optional): 本文
+- `cta` (string, optional): CTAテキスト（ピルボタン表示）
+- `link` (string, optional): URL/連絡先
+
+## コンポーネント
+
+### SlideHeader
+`import { SlideHeader } from "@deckspec/theme-noir-display/components"`
+- `label?` (string): 青アイブロウ（`var(--color-primary)`）
+- `heading` (string): ディスプレイ見出し
+- `headingSize?` (number): フォントサイズ（default 40）
+
+### Card
+`import { Card } from "@deckspec/theme-noir-display/components"`
+- `children` (ReactNode): カード内容
+- `highlight?` (boolean): primary ボーダー + 青シャドウ
+- `style?` (CSSProperties): 追加スタイル
+
+## デッキ構成ガイド
+
+### 推奨スライド順序
+1. **title-center** — タイトル（白面、余白多め）
+2. **hero-statement** — ビジョン・メッセージ（白面、巨大テキスト）
+3. **big-number** — 数値インパクト（白面）
+4. **three-pillars** — アーキテクチャ・柱（グレー面 + 白カード）
+5. **bullet-list** or **icon-grid** — 特徴一覧（白面）
+6. **feature-metrics** — KPI（白面）
+7. **chart-bar** — データ可視化（白面）
+8. **flow-diagram** — プロセス図解（白面）
+9. **photo-split** — ビジュアル（白面）
+10. **comparison-columns** — 比較（グレー面 + 白カード）
+11. **pricing-tiers** — 料金（グレー面 + 白カード）
+12. **thank-you** — クロージング（白面 + CTA）
+
+### 背景交替のリズム
+白 → 白 → 白 → **グレー** → 白 → 白 → 白 → 白 → 白 → **グレー** → **グレー** → 白
+
+カード系スライド（pillars, comparison, pricing）をグレー面に配置し、テキスト中心のスライドを白面に配置すると、Apple.com のスクロール体験に近いリズムが生まれる。
+
+## 禁止事項
+
+- 明朝体の使用
+- `font-weight: 700` (bold) の使用 — 600 (semibold) まで
+- 純黒 `#000` テキスト — `#1d1d1f` を使う
+- primary 青の背景利用 — テキスト・ボーダー・ボタンのみ
+- ボーダー線の多用 — 背景色のレイヤーで区切る
+- 角丸カードの内部を border や背景色の帯で区切る — カード内のセクション分けはタイポグラフィの階層（サイズ・ウェイト・色・余白）だけで表現する。片側 border も背景色バンドも不要
+- 情報の詰め込み — 1スライド1メッセージ
+- アニメーション（SSR 出力のため静的）
+- 影の濃さ — `rgba(0,0,0,0.06)` を超えない
+
+## 使用ガイド
+
+このテーマは以下に最適:
+- プロダクトローンチ、サービス紹介
+- 投資家向けピッチデッキ
+- テクノロジーカンファレンス
+- 社内プレゼン（モダンな印象）
+
+`#f5f5f7` キャンバスグレーと白カードのコントラストで、プロジェクターでもディスプレイでも高い可読性を保ちます。情報密度を low〜medium に抑え、Apple のようなプレミアムな空気感を演出します。