
Spec Driven Presentation Maker
- 11 installs
- 124 repo stars
- Updated August 5, 2026
- aws-samples/sample-spec-driven-presentation-maker
spec-driven-presentation-maker is a Claude Code skill that generates PowerPoint decks from a JSON spec with template analysis and design patterns.
About
spec-driven-presentation-maker generates PowerPoint presentations by converting a JSON spec into PPTX using template analysis and design patterns. A developer uses it to move from an approved brief through outline, composition, and design review to a finished deck. It bundles a python-pptx build engine, style templates, and design guides for charts, grids, and typography.
- Generates PowerPoint decks from a JSON spec with template analysis
- Runs a staged briefing, outline, compose, and design-review workflow
- Enforces design rules like WCAG contrast and minimum font sizes
Spec Driven Presentation Maker by the numbers
- 11 all-time installs (skills.sh)
- Ranked #482 of 688 Office & Documents skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
spec-driven-presentation-maker capabilities & compatibility
Free; runs locally with Python and uv, no API keys stated.
- Capabilities
- pptx generation · slide design · template analysis · chart generation
- Use cases
- presentations · documentation
- Pricing
- Free
What spec-driven-presentation-maker says it does
PowerPoint generation engine — JSON to PPTX with template analysis and design patterns
Contrast ratios follow WCAG: 4.5:1 for normal text, 3:1 for large text (18pt+).
npx skills add https://github.com/aws-samples/sample-spec-driven-presentation-maker --skill spec-driven-presentation-makerAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 11 |
|---|---|
| repo stars | ★ 124 |
| Last updated | August 5, 2026 |
| Repository | aws-samples/sample-spec-driven-presentation-maker ↗ |
What it does
Turn a brief into a designed PowerPoint deck through a staged spec-to-PPTX workflow with template and design guidance.
Who is it for?
Producing a structured, design-consistent PowerPoint deck from a brief through a repeatable spec-driven workflow.
Skip if: Quick freeform slide edits without a brief; the workflow requires an approved brief before proceeding.
When should I use this skill?
A developer needs a new presentation authored from source material with template-matched styling and design review.
What you get
A reviewed PPTX deck generated from a JSON slide spec that follows the template's theme and design rules.
- PPTX presentation
- specs/brief.md
- slide JSON spec
By the numbers
- 16:9, 4:3, and 16:10 layouts
- body text 14pt+ and headings 20pt+ minimums
- WCAG 4.5:1 contrast for normal text
Files
{
"output_dir": "~/Documents/SDPM-Presentations",
"extra_sources": [],
"preview": {
"backend": ""
}
}
[project]
name = "sdpm-skill"
dynamic = ["version"]
description = "PowerPoint generation engine — JSON to PPTX with template analysis and design patterns"
requires-python = ">=3.10"
dependencies = [
"python-pptx",
"lxml",
"Pillow",
"qrcode",
"pygments>=2.19.2",
"defusedxml",
]
[tool.setuptools.packages.find]
include = ["sdpm*"]
[tool.setuptools.dynamic]
version = {attr = "sdpm.__version__"}
[dependency-groups]
dev = [
"pytest>=9.0.2",
"ruff",
]
[tool.ruff]
line-length = 120
[tool.ruff.lint.per-file-ignores]
"sdpm/converter/color.py" = ["E402"]
"sdpm/converter/constants.py" = ["E402"]
"sdpm/converter/slide.py" = ["E402"]
"sdpm/converter/xml_helpers.py" = ["E402"]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>border — 額縁が空間をつくる。線と余白だけで、静かに語る。</title>
<style>
:root {
/* --- Colors --- */
--color-border: #303030;
--color-bg-start: #F7F7F7;
--color-bg-end: #D3D3D3;
--color-outline: #FFFFFF;
--color-text: #0A0A0A;
--color-text-light: #666666;
--color-mark: #FFEF92;
--color-card-bg: #FFFFFF;
--color-blockquote-bg: #DADADA;
/* --- Typography (pt) --- */
--font-cover: 54pt;
--font-title: 40pt;
--font-heading: 28pt;
--font-body: 20pt;
--font-caption: 15pt;
/* --- Font family (recommended) --- */
--font-family: Inter, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial,
"ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, sans-serif;
/* --- Frame --- */
--frame-border: 56px;
--frame-outline: 40px;
/* --- Spacing --- */
--spacing-lg: 60px;
--spacing-md: 40px;
--spacing-sm: 20px;
/* --- Components --- */
--card-border-width: 1.5px;
--accent-line-width: 4px;
--divider-width: 1.5px;
--mark-radius: 4px;
}
body {
margin: 0; padding: 40px;
background: #E5E5E5;
zoom: 0.7;
font-family: var(--font-family);
}
.slide {
position: relative;
width: 1920px; height: 1080px;
margin: 0 auto 40px;
background: linear-gradient(to bottom right, var(--color-bg-start), var(--color-bg-end));
overflow: hidden;
border: var(--frame-border) solid var(--color-border);
outline: var(--frame-outline) solid var(--color-outline);
outline-offset: calc(var(--frame-outline) * -0.5);
}
.el { position: absolute; }
/* --- Text styles --- */
.t-cover {
font-size: var(--font-cover);
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.t-title {
font-size: var(--font-title);
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.t-heading {
font-size: var(--font-heading);
font-weight: 700;
color: var(--color-text);
line-height: 1.3;
}
.t-body {
font-size: var(--font-body);
font-weight: 400;
color: var(--color-text);
line-height: 1.6;
}
.t-caption {
font-size: var(--font-caption);
font-weight: 400;
color: var(--color-text-light);
line-height: 1.5;
}
/* --- Components --- */
.card {
background: var(--color-card-bg);
border: var(--card-border-width) solid var(--color-border);
}
.accent-left {
border-left: var(--accent-line-width) solid var(--color-border);
padding-left: var(--spacing-sm);
}
.blockquote {
background: var(--color-blockquote-bg);
border-left: var(--accent-line-width) solid var(--color-border);
padding: var(--spacing-sm);
}
.mark {
background: var(--color-mark);
border-radius: var(--mark-radius);
padding: 0 4px 2px;
}
.divider {
border: none;
border-top: var(--divider-width) solid var(--color-border);
}
</style>
</head>
<body>
<!-- Slide 1: Cover -->
<div class="slide">
<div class="el t-cover" style="left:120px; top:380px; width:1680px;">
border
</div>
<div class="el" style="left:120px; top:500px; width:600px;">
<hr class="divider">
</div>
<div class="el t-body" style="left:120px; top:540px; width:1680px; color:var(--color-text-light);">
額縁が空間をつくる。線と余白だけで、静かに語る。
</div>
</div>
<!-- Slide 2: Colors & Typography -->
<div class="slide">
<div class="el t-title" style="left:120px; top:60px; width:1680px;">
Colors & Typography
</div>
<div class="el" style="left:120px; top:140px; width:1680px;"><hr class="divider"></div>
<!-- Color swatches -->
<div class="el t-heading" style="left:120px; top:190px;">Palette</div>
<div class="el card" style="left:120px; top:260px; width:180px; height:180px; background:var(--color-border);"></div>
<div class="el t-caption" style="left:120px; top:450px; width:180px; text-align:center;">#303030<br>Border</div>
<div class="el card" style="left:340px; top:260px; width:180px; height:180px; background:var(--color-text);"></div>
<div class="el t-caption" style="left:340px; top:450px; width:180px; text-align:center;">#0A0A0A<br>Text</div>
<div class="el card" style="left:560px; top:260px; width:180px; height:180px; background:var(--color-text-light);"></div>
<div class="el t-caption" style="left:560px; top:450px; width:180px; text-align:center;">#666666<br>Caption</div>
<div class="el card" style="left:780px; top:260px; width:180px; height:180px; background:var(--color-blockquote-bg);"></div>
<div class="el t-caption" style="left:780px; top:450px; width:180px; text-align:center;">#DADADA<br>Quote BG</div>
<div class="el card" style="left:1000px; top:260px; width:180px; height:180px; background:var(--color-card-bg);"></div>
<div class="el t-caption" style="left:1000px; top:450px; width:180px; text-align:center;">#FFFFFF<br>Card BG</div>
<div class="el card" style="left:1220px; top:260px; width:180px; height:180px; background:var(--color-mark);"></div>
<div class="el t-caption" style="left:1220px; top:450px; width:180px; text-align:center;">#FFEF92<br>Highlight</div>
<!-- Typography scale -->
<div class="el" style="left:120px; top:540px; width:1680px;"><hr class="divider"></div>
<div class="el t-heading" style="left:120px; top:580px;">Type Scale</div>
<div class="el t-cover" style="left:120px; top:650px; width:800px;">Cover 54pt</div>
<div class="el t-title" style="left:120px; top:730px; width:800px;">Title 40pt</div>
<div class="el t-heading" style="left:120px; top:790px; width:800px;">Heading 28pt</div>
<div class="el t-body" style="left:120px; top:840px; width:800px;">Body 20pt — 本文テキスト</div>
<div class="el t-caption" style="left:120px; top:890px; width:800px;">Caption 15pt — 補足・注釈</div>
<div class="el t-caption accent-left" style="left:1000px; top:660px; width:700px;">
推奨フォント:<br>
Inter / SF Pro Display / Segoe UI / Helvetica Neue<br>
ヒラギノ角ゴシック / メイリオ<br><br>
見出し: Bold 700<br>
本文: Regular 400
</div>
</div>
<!-- Slide 3: Components -->
<div class="slide">
<div class="el t-title" style="left:120px; top:60px; width:1680px;">
Components
</div>
<div class="el" style="left:120px; top:140px; width:1680px;"><hr class="divider"></div>
<!-- Card -->
<div class="el t-heading" style="left:120px; top:190px;">Card</div>
<div class="el card" style="left:120px; top:250px; width:700px; height:200px; padding:var(--spacing-sm);">
<div class="t-body" style="margin-bottom:12px;">白背景+細いボーダー。シャドウなし、角丸なし。</div>
<div class="t-caption">情報をグループ化するときに使う。装飾ではなく境界。</div>
</div>
<!-- Accent left -->
<div class="el t-heading" style="left:120px; top:510px;">左線アクセント</div>
<div class="el accent-left" style="left:120px; top:570px; width:700px;">
<div class="t-body">太い左線で注目を引く。引用やポイントの強調に。</div>
<div class="t-caption" style="margin-top:8px;">blockquoteの代わりにも使える。</div>
</div>
<!-- Blockquote -->
<div class="el t-heading" style="left:1000px; top:190px;">引用</div>
<div class="el blockquote" style="left:1000px; top:250px; width:700px;">
<div class="t-body">グレー背景+左線。引用文やコメントに。</div>
</div>
<!-- Highlight -->
<div class="el t-heading" style="left:1000px; top:420px;">ハイライト</div>
<div class="el t-body" style="left:1000px; top:480px; width:700px;">
唯一の色味は<span class="mark">黄色のハイライト</span>。ここぞという単語だけに使う。
</div>
<!-- Divider -->
<div class="el t-heading" style="left:1000px; top:580px;">区切り線</div>
<div class="el" style="left:1000px; top:640px; width:700px;"><hr class="divider"></div>
<div class="el t-caption" style="left:1000px; top:670px; width:700px;">
セクションの区切りに。細い線で静かに分ける。
</div>
</div>
<!-- Slide 4: Layout & Whitespace -->
<div class="slide">
<div class="el t-title" style="left:120px; top:60px; width:1680px;">
Layout & Whitespace
</div>
<div class="el" style="left:120px; top:140px; width:1680px;"><hr class="divider"></div>
<div class="el accent-left" style="left:120px; top:200px; width:760px;">
<div class="t-body">余白は装飾。要素を減らすほど、残ったものが強くなる。</div>
</div>
<div class="el card" style="left:120px; top:320px; width:760px; padding:var(--spacing-sm);">
<div class="t-heading" style="margin-bottom:16px;">間隔のルール</div>
<div class="t-body">
要素間: 最低 40px<br>
セクション間: 60px<br>
額縁からコンテンツ: 120px<br>
行間: 1.6(本文)
</div>
</div>
<div class="el card" style="left:120px; top:640px; width:760px; padding:var(--spacing-sm);">
<div class="t-heading" style="margin-bottom:16px;">レイアウトの考え方</div>
<div class="t-body">
2カラムが基本。左右 960px ずつ。<br>
1カラムで大きく見せるのも良い。<br>
3カラム以上は避ける — 余白が死ぬ。
</div>
</div>
<!-- Right side: visual demo of whitespace -->
<div class="el t-caption" style="left:1040px; top:200px; width:700px; color:var(--color-text-light);">
← この右半分が空いていること自体がデモ。
</div>
<div class="el t-body" style="left:1040px; top:500px; width:700px;">
スライドの半分が空白でも<br>それは失敗ではなく<span class="mark">設計</span>。
</div>
</div>
<!-- Slide 5: Do / Don't -->
<div class="slide">
<div class="el t-title" style="left:120px; top:60px; width:1680px;">
Do / Don't
</div>
<div class="el" style="left:120px; top:140px; width:1680px;"><hr class="divider"></div>
<!-- Do -->
<div class="el t-heading" style="left:120px; top:200px; width:760px;">
<span class="mark">Do</span>
</div>
<div class="el accent-left" style="left:120px; top:270px; width:760px;">
<div class="t-body">線と余白で構造をつくる</div>
</div>
<div class="el accent-left" style="left:120px; top:340px; width:760px;">
<div class="t-body">モノクロで統一する</div>
</div>
<div class="el accent-left" style="left:120px; top:410px; width:760px;">
<div class="t-body">ハイライトは1スライド1〜2箇所まで</div>
</div>
<div class="el accent-left" style="left:120px; top:480px; width:760px;">
<div class="t-body">要素を減らして余白を残す</div>
</div>
<div class="el accent-left" style="left:120px; top:550px; width:760px;">
<div class="t-body">カードはボーダーのみ、塗りは白</div>
</div>
<!-- Don't -->
<div class="el t-heading" style="left:1040px; top:200px; width:700px;">
Don't
</div>
<div class="el accent-left" style="left:1040px; top:270px; width:700px;">
<div class="t-body" style="color:var(--color-text-light);">色を追加する(黄色以外)</div>
</div>
<div class="el accent-left" style="left:1040px; top:340px; width:700px;">
<div class="t-body" style="color:var(--color-text-light);">シャドウを使う</div>
</div>
<div class="el accent-left" style="left:1040px; top:410px; width:700px;">
<div class="t-body" style="color:var(--color-text-light);">角丸にする</div>
</div>
<div class="el accent-left" style="left:1040px; top:480px; width:700px;">
<div class="t-body" style="color:var(--color-text-light);">グラデーション(背景以外)</div>
</div>
<div class="el accent-left" style="left:1040px; top:550px; width:700px;">
<div class="t-body" style="color:var(--color-text-light);">余白を埋めようとする</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Corporate Executive — 静かな権威。装飾ではなく構造と余白で信頼を語る。</title>
<style>
:root {
/* Colors */
--color-primary: #1E2761;
--color-accent: #4472C4;
--color-bg-dark: #1A1F36;
--color-bg-light: #F8F9FC;
--color-bg-card: #FFFFFF;
--color-text: #1E293B;
--color-text-sub: #475569;
--color-text-muted: #94A3B8;
--color-text-on-dark: #FFFFFF;
--color-border: #E2E8F0;
--color-success: #059669;
--color-danger: #DC2626;
/* Typography - Fonts */
--font-heading: "Georgia", serif;
--font-body: "Calibri", "Segoe UI", sans-serif;
--font-mono: "Consolas", monospace;
/* Typography - Sizes */
--size-cover-title: 54pt;
--size-slide-title: 32pt;
--size-section-header: 40pt;
--size-heading: 28pt;
--size-body: 20pt;
--size-caption: 14pt;
--size-kpi: 72pt;
/* Template */
--template-theme: light;
/* 推奨テンプレート: Blank Light
ライトテンプレートのみ使用。ダークスライドは background + defaultTextColor で切り替える。
テンプレートの切り替えは行わない。 */
/* Components - Card */
--card-radius: 8px;
--card-border: 0.75pt solid var(--color-border);
--card-shadow: 0 2px 6px rgba(0,0,0,0.10);
/* Components - Accent bar */
--accent-bar-width: 3pt;
--accent-bar-color: var(--color-primary);
/* Components - Divider */
--divider: 0.5pt solid var(--color-border);
/* Components - Icon circle */
--icon-circle-bg: var(--color-accent);
--icon-circle-size: 48px;
}
body {
margin: 0; padding: 40px;
background: #E5E5E5;
zoom: 0.7;
}
.slide {
position: relative;
width: 1920px; height: 1080px;
margin: 0 auto 40px;
background: var(--color-bg-light);
overflow: hidden;
}
.slide--dark {
background: var(--color-bg-dark);
}
.el { position: absolute; }
/* Text styles */
.t-cover-title {
font-family: var(--font-heading);
font-size: var(--size-cover-title);
font-weight: bold;
color: var(--color-text-on-dark);
line-height: 1.2;
}
.t-slide-title {
font-family: var(--font-heading);
font-size: var(--size-slide-title);
font-weight: bold;
color: var(--color-text);
line-height: 1.3;
}
.t-section-header {
font-family: var(--font-heading);
font-size: var(--size-section-header);
font-weight: bold;
color: var(--color-text-on-dark);
line-height: 1.2;
}
.t-heading {
font-family: var(--font-heading);
font-size: var(--size-heading);
font-weight: bold;
color: var(--color-text);
line-height: 1.3;
}
.t-body {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: normal;
color: var(--color-text-sub);
line-height: 1.6;
}
.t-caption {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: normal;
color: var(--color-text-muted);
line-height: 1.5;
}
.t-kpi {
font-family: var(--font-body);
font-size: var(--size-kpi);
font-weight: bold;
color: var(--color-text);
line-height: 1.0;
}
.t-body-on-dark {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: normal;
color: rgba(255,255,255,0.7);
line-height: 1.6;
}
/* Component styles */
.card {
background: var(--color-bg-card);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.card--accent {
border-left: var(--accent-bar-width) solid var(--accent-bar-color);
}
.icon-circle {
width: var(--icon-circle-size);
height: var(--icon-circle-size);
border-radius: 50%;
background: var(--icon-circle-bg);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-on-dark);
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: bold;
}
/* Card-internal text (smaller than slide-level) */
.t-card-title {
font-family: var(--font-heading);
font-size: var(--size-body);
font-weight: bold;
color: var(--color-text);
line-height: 1.3;
}
.t-card-body {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: normal;
color: var(--color-text-sub);
line-height: 1.6;
}
.t-card-body-on-dark {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: normal;
color: rgba(255,255,255,0.7);
line-height: 1.6;
}
.t-label {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: bold;
color: var(--color-accent);
line-height: 1.5;
}
.t-mono {
font-family: var(--font-mono);
font-size: var(--size-caption);
color: var(--color-text-sub);
line-height: 1.5;
}
.t-mini {
font-family: var(--font-body);
font-size: var(--size-caption);
color: var(--color-text-muted);
line-height: 1.5;
}
.divider {
border: none;
border-top: var(--divider);
}
</style>
</head>
<body>
<!-- Slide 1: Cover (Dark) -->
<div class="slide slide--dark">
<div class="el t-cover-title" style="left:96px; top:340px; width:1200px;">
Corporate Executive
</div>
<div class="el t-body-on-dark" style="left:96px; top:430px; width:900px;">
静かな権威。装飾ではなく構造と余白で信頼を語る。
</div>
<!-- Corner accent: L-shape -->
<div class="el" style="left:0; bottom:0; width:4px; height:120px; background:var(--color-accent);"></div>
<div class="el" style="left:0; bottom:0; width:120px; height:4px; background:var(--color-accent);"></div>
</div>
<!-- Slide 2: Color Palette (Light) -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1200px;">
カラーパレット
</div>
<div class="el t-body" style="left:96px; top:100px; width:1400px;">
ネイビー濃淡だけで場面を切り替える。色数を絞ることで「信頼」を視覚化する。
</div>
<!-- Primary -->
<div class="el card" style="left:96px; top:200px; width:260px; height:280px; padding:24px; box-sizing:border-box;">
<div style="width:212px; height:120px; background:var(--color-primary); border-radius:4px; margin-bottom:16px;"></div>
<div class="t-card-title" style="margin-bottom:4px;">Primary</div>
<div class="t-caption">#1E2761</div>
<div class="t-caption" style="margin-top:4px;">メインブランドカラー。見出し強調、アクセントバー。</div>
</div>
<!-- Accent -->
<div class="el card" style="left:386px; top:200px; width:260px; height:280px; padding:24px; box-sizing:border-box;">
<div style="width:212px; height:120px; background:var(--color-accent); border-radius:4px; margin-bottom:16px;"></div>
<div class="t-card-title" style="margin-bottom:4px;">Accent</div>
<div class="t-caption">#4472C4</div>
<div class="t-caption" style="margin-top:4px;">CTA、アイコン背景、リンク。</div>
</div>
<!-- BG Dark -->
<div class="el card" style="left:676px; top:200px; width:260px; height:280px; padding:24px; box-sizing:border-box;">
<div style="width:212px; height:120px; background:var(--color-bg-dark); border-radius:4px; margin-bottom:16px;"></div>
<div class="t-card-title" style="margin-bottom:4px;">BG Dark</div>
<div class="t-caption">#1A1F36</div>
<div class="t-caption" style="margin-top:4px;">カバー、セクション区切り、クロージング。</div>
</div>
<!-- BG Light -->
<div class="el card" style="left:966px; top:200px; width:260px; height:280px; padding:24px; box-sizing:border-box;">
<div style="width:212px; height:120px; background:var(--color-bg-light); border-radius:4px; border:1px solid var(--color-border); margin-bottom:16px;"></div>
<div class="t-card-title" style="margin-bottom:4px;">BG Light</div>
<div class="t-caption">#F8F9FC</div>
<div class="t-caption" style="margin-top:4px;">コンテンツスライド背景。</div>
</div>
<!-- BG Card -->
<div class="el card" style="left:1256px; top:200px; width:260px; height:280px; padding:24px; box-sizing:border-box;">
<div style="width:212px; height:120px; background:var(--color-bg-card); border-radius:4px; border:1px solid var(--color-border); margin-bottom:16px;"></div>
<div class="t-card-title" style="margin-bottom:4px;">BG Card</div>
<div class="t-caption">#FFFFFF</div>
<div class="t-caption" style="margin-top:4px;">カード、パネル背景。</div>
</div>
<!-- Text colors row -->
<div class="el t-card-title" style="left:96px; top:520px;">テキストカラー</div>
<div class="el card" style="left:96px; top:570px; width:360px; height:80px; padding:20px 24px; box-sizing:border-box; display:flex; align-items:center; gap:16px;">
<div style="width:40px; height:40px; background:var(--color-text); border-radius:4px; flex-shrink:0;"></div>
<div>
<div class="t-caption" style="color:var(--color-text);">Text Primary #1E293B</div>
<div class="t-caption">本文テキスト</div>
</div>
</div>
<div class="el card" style="left:486px; top:570px; width:360px; height:80px; padding:20px 24px; box-sizing:border-box; display:flex; align-items:center; gap:16px;">
<div style="width:40px; height:40px; background:var(--color-text-sub); border-radius:4px; flex-shrink:0;"></div>
<div>
<div class="t-caption" style="color:var(--color-text-sub);">Text Sub #475569</div>
<div class="t-caption">サブテキスト</div>
</div>
</div>
<div class="el card" style="left:876px; top:570px; width:360px; height:80px; padding:20px 24px; box-sizing:border-box; display:flex; align-items:center; gap:16px;">
<div style="width:40px; height:40px; background:var(--color-text-muted); border-radius:4px; flex-shrink:0;"></div>
<div>
<div class="t-caption" style="color:var(--color-text-muted);">Text Muted #94A3B8</div>
<div class="t-caption">キャプション・注釈</div>
</div>
</div>
<!-- Semantic colors -->
<div class="el t-card-title" style="left:96px; top:690px;">セマンティックカラー</div>
<div class="el card" style="left:96px; top:740px; width:260px; height:80px; padding:20px 24px; box-sizing:border-box; display:flex; align-items:center; gap:16px;">
<div style="width:40px; height:40px; background:var(--color-success); border-radius:4px; flex-shrink:0;"></div>
<div>
<div class="t-caption" style="color:var(--color-success);">Success #059669</div>
<div class="t-caption">正値・成功</div>
</div>
</div>
<div class="el card" style="left:386px; top:740px; width:260px; height:80px; padding:20px 24px; box-sizing:border-box; display:flex; align-items:center; gap:16px;">
<div style="width:40px; height:40px; background:var(--color-danger); border-radius:4px; flex-shrink:0;"></div>
<div>
<div class="t-caption" style="color:var(--color-danger);">Danger #DC2626</div>
<div class="t-caption">負値・警告</div>
</div>
</div>
<div class="el card" style="left:676px; top:740px; width:540px; height:80px; padding:20px 24px; box-sizing:border-box;">
<div class="t-caption">ダーク背景上のテキストは常に #FFFFFF。中間色は rgba(255,255,255,0.7) で表現。</div>
</div>
<div class="el t-caption" style="left:96px; top:1000px; width:1700px;">
色数を12色に制限。ネイビー系の濃淡でダーク/ライトを切り替え、アクセントのロイヤルブルーは控えめに使う。
</div>
</div>
<!-- Slide 3: Typography (Light) -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1200px;">
タイポグラフィ
</div>
<div class="el t-body" style="left:96px; top:100px; width:1400px;">
Georgia(セリフ)で権威を、Calibri(サンセリフ)で可読性を。この二刀流がスタイルの核。
</div>
<!-- Heading font showcase -->
<div class="el card" style="left:96px; top:190px; width:840px; height:520px; padding:40px; box-sizing:border-box;">
<div class="t-caption" style="margin-bottom:24px; color:var(--color-accent); font-weight:bold;">見出しフォント — Georgia</div>
<div style="font-family:var(--font-heading); font-size:var(--size-cover-title); font-weight:bold; color:var(--color-text); margin-bottom:20px;">
カバータイトル 54pt
</div>
<div style="font-family:var(--font-heading); font-size:var(--size-section-header); font-weight:bold; color:var(--color-text); margin-bottom:20px;">
セクションヘッダー 40pt
</div>
<div style="font-family:var(--font-heading); font-size:var(--size-slide-title); font-weight:bold; color:var(--color-text); margin-bottom:20px;">
スライドタイトル 32pt
</div>
<div style="font-family:var(--font-heading); font-size:var(--size-heading); font-weight:bold; color:var(--color-text);">
見出し 28pt
</div>
</div>
<!-- Body font showcase -->
<div class="el card" style="left:976px; top:190px; width:840px; height:520px; padding:40px; box-sizing:border-box;">
<div class="t-caption" style="margin-bottom:24px; color:var(--color-accent); font-weight:bold;">本文フォント — Calibri</div>
<div style="font-family:var(--font-body); font-size:var(--size-kpi); font-weight:bold; color:var(--color-text); margin-bottom:20px;">
KPI 72pt
</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-sub); margin-bottom:20px; line-height:1.6;">
本文 20pt — プレゼンテーションの大半を占めるテキスト。<br>
Calibriの高い可読性が長文でも疲れさせない。<br>
行間 1.6 で十分な呼吸を確保する。
</div>
<div style="font-family:var(--font-body); font-size:var(--size-caption); color:var(--color-text-muted); margin-bottom:20px;">
キャプション 14pt — 注釈、出典、補足情報に使用。老眼でも読める最小サイズ。
</div>
<div class="t-mono" style="background:#F1F5F9; padding:12px 16px; border-radius:4px;">
Consolas — データ表示・コード用
</div>
</div>
<!-- Rules -->
<div class="el card card--accent" style="left:96px; top:750px; width:1720px; height:120px; padding:28px 32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:8px;">タイポグラフィ規則</div>
<div class="t-card-body">
隣接レベルは最低4ptの差を確保 / タイトルには letter-spacing 2-4 推奨 / 本文の最小サイズは20pt / 見出しの最小サイズは28pt
</div>
</div>
<div class="el t-caption" style="left:96px; top:1000px; width:1700px;">
セリフ体の見出しが「この情報は重要だ」と無言で伝える。サンセリフの本文が「読みやすいから安心して読め」と伝える。
</div>
</div>
<!-- Slide 4: Cards & Components (Light) -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1200px;">
カード&コンポーネント
</div>
<div class="el t-body" style="left:96px; top:100px; width:1400px;">
許可された装飾は4つだけ。カード、アクセントバー、アイコン丸、区切り線。
</div>
<!-- Standard card -->
<div class="el card" style="left:96px; top:200px; width:540px; height:240px; padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:8px;">標準カード</div>
<div class="t-card-body">
白背景 + 細ボーダー(0.75pt #E2E8F0)+ 控えめな影(blur 6, opacity 10%)。角丸8px。情報をグループ化する基本単位。
</div>
</div>
<!-- Accent card -->
<div class="el card card--accent" style="left:686px; top:200px; width:540px; height:240px; padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:8px;">アクセントカード</div>
<div class="t-card-body">
左辺に3ptのネイビーバー。「このカードは特に重要」を示す。ボーダーの代わりにバーが視線を誘導する。
</div>
</div>
<!-- Dark card example -->
<div class="el" style="left:1276px; top:200px; width:540px; height:240px; padding:32px; box-sizing:border-box; background:#1C2536; border-radius:var(--card-radius); border:0.75pt solid #2D3748;">
<div class="t-card-title" style="margin-bottom:8px; color:var(--color-text-on-dark);">ダークカード</div>
<div class="t-card-body-on-dark">
ダークスライド上のカード。背景 #1C2536、ボーダー #2D3748。ライトカードの反転版。
</div>
</div>
<!-- Icon circles -->
<div class="el card" style="left:96px; top:490px; width:840px; height:200px; padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:16px;">アイコン丸</div>
<div style="display:flex; gap:24px; align-items:center;">
<div class="icon-circle">A</div>
<div class="icon-circle">B</div>
<div class="icon-circle">C</div>
<div class="t-card-body" style="margin-left:16px;">
accent色(#4472C4)の塗りつぶし円 + 白テキスト/アイコン。<br>
48px。ステップ番号やカテゴリ表示に使用。
</div>
</div>
</div>
<!-- Divider -->
<div class="el card" style="left:976px; top:490px; width:840px; height:200px; padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:16px;">区切り線</div>
<div class="t-card-body" style="margin-bottom:16px;">
#E2E8F0、0.5pt。セクション間の区切りに使用。
</div>
<hr class="divider" style="width:100%;">
<div class="t-caption" style="margin-top:12px;">控えめだが確実に領域を分ける。太い線や装飾的な区切りは禁止。</div>
</div>
<!-- KPI panel example -->
<div class="el card card--accent" style="left:96px; top:740px; width:540px; height:200px; padding:32px; box-sizing:border-box;">
<div class="t-caption" style="margin-bottom:4px; color:var(--color-accent); font-weight:bold;">KPIパネル</div>
<div class="t-kpi" style="margin-bottom:4px;">¥12.4M</div>
<div class="t-card-body">
数値を大きく(64pt bold)、ラベルを小さく。データの重要度を視覚的に表現。
</div>
</div>
<!-- Shadow spec -->
<div class="el card" style="left:686px; top:740px; width:540px; height:200px; padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="margin-bottom:8px;">影の仕様</div>
<div class="t-card-body">
outer / blur: 6px / offset: 2px / opacity: 10%<br>
影は「浮いている」ではなく「紙が置いてある」程度。影の多用は禁止。
</div>
</div>
<div class="el t-caption" style="left:96px; top:1000px; width:1700px;">
装飾は各スライド最大2-3要素。「足りない」くらいがちょうどいい。
</div>
</div>
<!-- Slide 5: Dark/Light Structure (Dark) -->
<div class="slide slide--dark">
<div class="el" style="left:0; top:0; width:1920px; height:1080px;">
<!-- Section divider demo -->
<div class="el t-section-header" style="left:96px; top:48px; width:1200px;">
ダーク / ライト構造
</div>
<div class="el t-body-on-dark" style="left:96px; top:110px; width:1400px;">
1つのライトテンプレートで全スライドをカバー。ダークスライドは background + defaultTextColor で背景を切り替える。
</div>
<!-- Sandwich diagram -->
<!-- Dark slide mini -->
<div class="el" style="left:96px; top:220px; width:320px; height:180px; background:var(--color-bg-dark); border:1px solid #2D3748; border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">🌑 COVER</div>
<div class="t-card-title" style="color:var(--color-text-on-dark);">タイトル</div>
</div>
<!-- Light slides mini -->
<div class="el" style="left:446px; top:220px; width:220px; height:180px; background:var(--color-bg-light); border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">☀️ CONTENT</div>
<div style="width:180px; height:60px; background:white; border:1px solid var(--color-border); border-radius:4px; margin-bottom:8px;"></div>
<div style="width:180px; height:40px; background:white; border:1px solid var(--color-border); border-radius:4px;"></div>
</div>
<div class="el" style="left:696px; top:220px; width:220px; height:180px; background:var(--color-bg-light); border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">☀️ CONTENT</div>
<div style="width:180px; height:60px; background:white; border:1px solid var(--color-border); border-radius:4px; margin-bottom:8px;"></div>
<div style="width:180px; height:40px; background:white; border:1px solid var(--color-border); border-radius:4px;"></div>
</div>
<!-- Dark divider mini -->
<div class="el" style="left:946px; top:220px; width:320px; height:180px; background:var(--color-bg-dark); border:1px solid #2D3748; border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">🌑 SECTION</div>
<div class="t-card-title" style="color:var(--color-text-on-dark);">02</div>
</div>
<!-- More light slides -->
<div class="el" style="left:1296px; top:220px; width:220px; height:180px; background:var(--color-bg-light); border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">☀️ CONTENT</div>
<div style="width:180px; height:60px; background:white; border:1px solid var(--color-border); border-radius:4px; margin-bottom:8px;"></div>
<div style="width:180px; height:40px; background:white; border:1px solid var(--color-border); border-radius:4px;"></div>
</div>
<div class="el" style="left:1546px; top:220px; width:280px; height:180px; background:var(--color-bg-dark); border:1px solid #2D3748; border-radius:4px; padding:16px; box-sizing:border-box;">
<div class="t-mini" style="color:var(--color-accent); margin-bottom:8px;">🌑 CLOSING</div>
<div class="t-card-title" style="color:var(--color-text-on-dark);">Thank you</div>
</div>
<!-- Explanation cards -->
<div class="el" style="left:96px; top:460px; width:840px; height:240px; background:#1C2536; border:0.75pt solid #2D3748; border-radius:var(--card-radius); padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="color:var(--color-text-on-dark); margin-bottom:12px;">ダークスライドの作り方</div>
<div class="t-card-body-on-dark">
スライドに "background": "#1A1F36" と "defaultTextColor": "#FFFFFF" を指定する。<br>
テンプレートの切り替えは不要。background で背景色を制御する。
</div>
</div>
<div class="el" style="left:976px; top:460px; width:840px; height:240px; background:#1C2536; border:0.75pt solid #2D3748; border-radius:var(--card-radius); padding:32px; box-sizing:border-box;">
<div class="t-card-title" style="color:var(--color-text-on-dark); margin-bottom:12px;">セクション区切りの役割</div>
<div class="t-card-body-on-dark">
ダークスライドは「ここが区切り」を伝えるリズム装置。<br>
セクション番号を60pt+で薄く表示し、タイトルを36ptで配置。<br>
ライトスライドが続いた後のダークは、視覚的なリセットになる。
</div>
</div>
<!-- Corner accent -->
<div class="el" style="left:96px; top:760px; width:1720px;">
<div class="t-card-body-on-dark">
カバースライドのみ、控えめなL字コーナー装飾(accent色、4pt)を許可。他のダークスライドでは使わない。
</div>
</div>
<!-- L-shape demo -->
<div class="el" style="left:96px; top:830px; width:300px; height:180px; background:var(--color-bg-dark); border:1px solid #2D3748; border-radius:4px; position:relative;">
<div style="position:absolute; left:0; bottom:0; width:4px; height:60px; background:var(--color-accent);"></div>
<div style="position:absolute; left:0; bottom:0; width:60px; height:4px; background:var(--color-accent);"></div>
<div class="t-mini" style="position:absolute; left:16px; top:16px;">L字コーナー装飾(カバーのみ)</div>
</div>
</div>
</div>
<!-- Slide 6: Do's / Don'ts (Light) -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1200px;">
Do's / Don'ts
</div>
<div class="el t-body" style="left:96px; top:100px; width:1400px;">
このスタイルの判断基準。迷ったら「引き算」を選ぶ。
</div>
<!-- Do's -->
<div class="el card card--accent" style="left:96px; top:200px; width:840px; height:700px; padding:40px; box-sizing:border-box;">
<div style="display:flex; align-items:center; gap:12px; margin-bottom:24px;">
<div class="icon-circle" style="width:36px; height:36px; background:var(--color-success);">✓</div>
<div class="t-card-title" style="color:var(--color-success);">Do's</div>
</div>
<div class="t-card-body" style="line-height:2.2;">
余白を十分に確保する(最低 0.5" マージン)<br>
コントラスト比 4.5:1 以上を維持する<br>
データはチャート / KPIパネルで視覚化する<br>
ダーク / ライトの「サンドイッチ構造」を使う<br>
見出しはGeorgia、本文はCalibriを徹底する<br>
カード左辺のアクセントバーで重要度を示す<br>
装飾は各スライド最大 2-3 要素に抑える<br>
アイコンは塗りつぶし丸(accent色 + 白)を使う<br>
区切り線は細く控えめに(0.5pt #E2E8F0)
</div>
</div>
<!-- Don'ts -->
<div class="el card" style="left:976px; top:200px; width:840px; height:700px; padding:40px; box-sizing:border-box; border-left:var(--accent-bar-width) solid var(--color-danger);">
<div style="display:flex; align-items:center; gap:12px; margin-bottom:24px;">
<div class="icon-circle" style="width:36px; height:36px; background:var(--color-danger);">✗</div>
<div class="t-card-title" style="color:var(--color-danger);">Don'ts</div>
</div>
<div class="t-card-body" style="line-height:2.2;">
タイトル下のアクセントラインを使わない(AI生成感)<br>
グラデーションを使わない(pptxgenjs非対応)<br>
派手なパターンや幾何学模様を入れない<br>
3D効果を使わない<br>
影を多用しない(1カードにつき1影まで)<br>
過度な角丸を使わない(0.12" 以下に抑える)<br>
太いボーダーを使わない(1pt 以下)<br>
装飾的な区切り線を使わない<br>
色数を増やさない(パレット外の色は禁止)
</div>
</div>
<div class="el t-caption" style="left:96px; top:1000px; width:1700px;">
「静かな権威」— 足すのではなく、引くことで信頼を作る。装飾が少ないほど、情報が際立つ。
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Cute / Playful — 楽しさは伝染する。スライドが楽しければ、場も楽しくなる。(ジョーク用)</title>
<style>
:root {
/* === Colors === */
--color-primary: #FF6B9D;
--color-secondary: #C084FC;
--color-accent: #FCD34D;
--color-accent-2: #67E8F9;
--color-accent-3: #86EFAC;
--color-bg-dark: #2D1B4E;
--color-bg-light: #FFF5F7;
--color-bg-alt: #FEFCE8;
--color-bg-card: #FFFFFF;
--color-text-primary: #4A1D6A;
--color-text-secondary: #7C5B99;
--color-text-muted: #B89ED1;
--color-text-on-dark: #FFF5F7;
--color-border: #F3D5E0;
--color-fun-red: #EF4444;
/* === Tints (12%) === */
--color-primary-tint: #FFE1EA;
--color-secondary-tint: #F0DFFE;
--color-accent-tint: #FEF5D0;
--color-accent-2-tint: #DFF9FE;
--color-accent-3-tint: #E3FBE9;
/* === Template === */
/* 推奨テンプレート: Blank Light */
/* === Typography === */
--font-heading: "Trebuchet MS", "メイリオ", sans-serif;
--font-body: "Calibri", "メイリオ", sans-serif;
--fs-cover-title: 48pt;
--fs-cover-sub: 22pt;
--fs-slide-title: 38pt;
--fs-heading: 26pt;
--fs-body: 16pt;
--fs-caption: 12pt;
--fs-fun-stat: 72pt;
/* === Shape === */
--radius: 20px;
--radius-sm: 12px;
--radius-pill: 999px;
--radius-circle: 50%;
--shadow-card: 0 3px 12px rgba(255,107,157,0.12);
--shadow-sticker: 2px 4px 10px rgba(192,132,252,0.18);
--border-w: 2pt;
/* === Decoration === */
--deco-opacity: 0.25;
--deco-opacity-soft: 0.08;
--deco-confetti-opacity: 0.4;
--deco-confetti-radius: 3px;
--deco-dot-size-sm: 10px;
--deco-dot-size-md: 16px;
--deco-dot-size-lg: 22px;
--deco-star-size: 32pt;
--deco-heart-size: 28pt;
--deco-blob-size: 300px;
}
body {
margin: 0; padding: 40px;
background: #E5E5E5;
zoom: 0.7;
}
.slide {
position: relative;
width: 1920px; height: 1080px;
margin: 0 auto 40px;
background: var(--color-bg-light);
overflow: hidden;
}
.slide-dark { background: var(--color-bg-dark); }
.slide-alt { background: var(--color-bg-alt); }
.el { position: absolute; }
/* === Text styles === */
.t-cover-title {
font-family: var(--font-heading);
font-size: var(--fs-cover-title);
font-weight: bold;
color: var(--color-text-on-dark);
line-height: 1.3;
}
.t-cover-sub {
font-family: var(--font-body);
font-size: var(--fs-cover-sub);
color: var(--color-text-on-dark);
line-height: 1.5;
opacity: 0.85;
}
.t-slide-title {
font-family: var(--font-heading);
font-size: var(--fs-slide-title);
font-weight: bold;
color: var(--color-text-primary);
line-height: 1.3;
}
.t-heading {
font-family: var(--font-heading);
font-size: var(--fs-heading);
font-weight: bold;
color: var(--color-text-primary);
line-height: 1.4;
}
.t-body {
font-family: var(--font-body);
font-size: var(--fs-body);
color: var(--color-text-primary);
line-height: 1.6;
}
.t-caption {
font-family: var(--font-body);
font-size: var(--fs-caption);
color: var(--color-text-secondary);
line-height: 1.5;
}
.t-fun-stat {
font-family: var(--font-heading);
font-size: var(--fs-fun-stat);
font-weight: bold;
color: var(--color-primary);
line-height: 1.0;
}
.t-on-dark { color: var(--color-text-on-dark); }
.t-primary { color: var(--color-primary); }
.t-secondary { color: var(--color-secondary); }
.t-accent { color: var(--color-accent); }
.t-accent-2 { color: var(--color-accent-2); }
.t-accent-3 { color: var(--color-accent-3); }
.t-muted { color: var(--color-text-muted); }
.t-center { text-align: center; }
/* === Components === */
.card {
background: var(--color-bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-card);
border: var(--border-w) solid var(--color-border);
}
.card-pink { border-color: var(--color-primary); }
.card-purple { border-color: var(--color-secondary); }
.card-yellow { border-color: var(--color-accent); }
.card-blue { border-color: var(--color-accent-2); }
.card-green { border-color: var(--color-accent-3); }
.badge {
display: inline-block;
padding: 6px 18px;
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: var(--fs-caption);
font-weight: bold;
color: var(--color-bg-card);
}
.badge-pink { background: var(--color-primary); }
.badge-purple { background: var(--color-secondary); }
.badge-yellow { background: var(--color-accent); color: var(--color-text-primary); }
.badge-blue { background: var(--color-accent-2); color: var(--color-text-primary); }
.badge-green { background: var(--color-accent-3); color: var(--color-text-primary); }
.sticker {
border-radius: var(--radius);
box-shadow: var(--shadow-sticker);
padding: 12px 24px;
font-family: var(--font-heading);
font-size: var(--fs-body);
font-weight: bold;
display: inline-block;
}
.sticker-pink { background: var(--color-primary); color: var(--color-bg-card); }
.sticker-yellow { background: var(--color-accent); color: var(--color-text-primary); }
.sticker-blue { background: var(--color-accent-2); color: var(--color-text-primary); }
.icon-circle {
border-radius: var(--radius-circle);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-heading);
}
.icon-circle-pink { background: var(--color-primary-tint); }
.icon-circle-purple { background: var(--color-secondary-tint); }
.icon-circle-yellow { background: var(--color-accent-tint); }
.icon-circle-blue { background: var(--color-accent-2-tint); }
.icon-circle-green { background: var(--color-accent-3-tint); }
.color-swatch {
border-radius: var(--radius);
border: var(--border-w) solid var(--color-border);
}
/* === Decorations === */
.deco { position: absolute; pointer-events: none; }
.deco-dot { border-radius: var(--radius-circle); opacity: 0.5; }
.deco-dot-pink { background: var(--color-primary); }
.deco-dot-purple { background: var(--color-secondary); }
.deco-dot-yellow { background: var(--color-accent); }
.deco-dot-blue { background: var(--color-accent-2); }
.deco-dot-green { background: var(--color-accent-3); }
.deco-heart { font-size: var(--deco-heart-size); opacity: var(--deco-opacity); }
.deco-heart-pink { color: var(--color-primary); }
.deco-heart-yellow { color: var(--color-accent); }
.deco-heart-purple { color: var(--color-secondary); }
.deco-heart-blue { color: var(--color-accent-2); }
.deco-star { font-size: var(--deco-star-size); opacity: var(--deco-opacity); }
.deco-star-yellow { color: var(--color-accent); }
.deco-star-pink { color: var(--color-primary); }
.deco-star-green { color: var(--color-accent-3); }
.deco-confetti {
border-radius: var(--deco-confetti-radius);
opacity: var(--deco-confetti-opacity);
}
.deco-confetti-pink { background: var(--color-primary); }
.deco-confetti-purple { background: var(--color-secondary); }
.deco-confetti-yellow { background: var(--color-accent); }
.deco-confetti-blue { background: var(--color-accent-2); }
.deco-confetti-green { background: var(--color-accent-3); }
.deco-blob {
border-radius: var(--radius-circle);
opacity: var(--deco-opacity-soft);
}
.deco-blob-pink { background: var(--color-primary); }
.deco-blob-purple { background: var(--color-secondary); }
.deco-blob-yellow { background: var(--color-accent); }
.deco-blob-blue { background: var(--color-accent-2); }
.deco-wave {
border-radius: 50% 50% 0 0;
opacity: 0.06;
background: var(--color-primary);
}
.deco-footer {
font-family: var(--font-body);
font-size: var(--fs-caption);
color: var(--color-text-on-dark);
opacity: 0.5;
}
</style>
</head>
<body>
<!-- SLIDE 1: COVER -->
<div class="slide slide-dark">
<!-- 装飾: blob -->
<div class="deco deco-blob deco-blob-pink" style="left:-80px; top:-80px; width:300px; height:300px;"></div>
<div class="deco deco-blob deco-blob-yellow" style="left:1700px; top:-60px; width:250px; height:250px;"></div>
<div class="deco deco-blob deco-blob-purple" style="left:1600px; top:850px; width:350px; height:350px;"></div>
<div class="deco deco-blob deco-blob-blue" style="left:-50px; top:800px; width:280px; height:280px;"></div>
<!-- 装飾: dot -->
<div class="deco deco-dot deco-dot-pink" style="left:120px; top:80px; width:18px; height:18px;"></div>
<div class="deco deco-dot deco-dot-yellow" style="left:300px; top:160px; width:12px; height:12px;"></div>
<div class="deco deco-dot deco-dot-purple" style="left:1700px; top:120px; width:22px; height:22px;"></div>
<div class="deco deco-dot deco-dot-green" style="left:1500px; top:60px; width:10px; height:10px;"></div>
<div class="deco deco-dot deco-dot-blue" style="left:1820px; top:300px; width:14px; height:14px;"></div>
<div class="deco deco-dot deco-dot-yellow" style="left:80px; top:900px; width:16px; height:16px;"></div>
<div class="deco deco-dot deco-dot-pink" style="left:400px; top:950px; width:20px; height:20px;"></div>
<!-- 装飾: heart -->
<div class="deco deco-heart deco-heart-pink" style="left:200px; top:250px;">♥</div>
<div class="deco deco-heart deco-heart-yellow" style="left:1650px; top:200px;">♥</div>
<div class="deco deco-heart deco-heart-purple" style="left:1750px; top:750px;">♥</div>
<div class="deco deco-heart deco-heart-blue" style="left:100px; top:700px;">♥</div>
<!-- 装飾: star -->
<div class="deco deco-star deco-star-yellow" style="left:500px; top:100px;">★</div>
<div class="deco deco-star deco-star-yellow" style="left:1400px; top:900px;">★</div>
<div class="deco deco-star deco-star-green" style="left:1800px; top:500px;">★</div>
<div class="deco deco-star deco-star-pink" style="left:60px; top:500px;">★</div>
<!-- 装飾: confetti -->
<div class="deco deco-confetti deco-confetti-pink" style="left:700px; top:80px; width:8px; height:24px; transform:rotate(25deg);"></div>
<div class="deco deco-confetti deco-confetti-blue" style="left:850px; top:130px; width:6px; height:20px; transform:rotate(-15deg);"></div>
<div class="deco deco-confetti deco-confetti-yellow" style="left:1100px; top:60px; width:8px; height:22px; transform:rotate(40deg);"></div>
<div class="deco deco-confetti deco-confetti-green" style="left:1300px; top:110px; width:6px; height:18px; transform:rotate(-30deg);"></div>
<div class="deco deco-confetti deco-confetti-purple" style="left:600px; top:950px; width:8px; height:24px; transform:rotate(15deg);"></div>
<div class="deco deco-confetti deco-confetti-yellow" style="left:900px; top:980px; width:6px; height:20px; transform:rotate(-45deg);"></div>
<div class="deco deco-confetti deco-confetti-pink" style="left:1200px; top:940px; width:8px; height:22px; transform:rotate(35deg);"></div>
<!-- 波形 -->
<div class="deco deco-wave" style="left:0; top:980px; width:1920px; height:100px;"></div>
<!-- コンテンツ -->
<div class="el t-cover-title t-center" style="left:96px; top:340px; width:1728px;">✨ Cute / Playful ✨</div>
<div class="el t-cover-sub t-center" style="left:96px; top:460px; width:1728px;">楽しさは伝染する。スライドが楽しければ、場も楽しくなる。</div>
<!-- ステッカー -->
<div class="el sticker sticker-pink" style="left:660px; top:580px; transform:rotate(-3deg);">🎉 Have Fun!</div>
<div class="el sticker sticker-yellow" style="left:920px; top:570px; transform:rotate(2deg);">💖 Kawaii</div>
<div class="el sticker sticker-blue" style="left:1150px; top:585px; transform:rotate(-1deg);">⭐ Pop!</div>
<!-- フッター -->
<div class="el deco-footer t-center" style="left:96px; top:1000px; width:1728px;">Style Guide — イベント用プレゼンテーション</div>
</div>
<!-- SLIDE 2: カラーパレット -->
<div class="slide">
<!-- 装飾 -->
<div class="deco deco-dot deco-dot-purple" style="left:1800px; top:60px; width:18px; height:18px;"></div>
<div class="deco deco-dot deco-dot-yellow" style="left:100px; top:950px; width:14px; height:14px;"></div>
<div class="deco deco-star deco-star-yellow" style="left:1780px; top:950px;">★</div>
<div class="deco deco-heart deco-heart-pink" style="left:1750px; top:150px;">♥</div>
<div class="deco deco-confetti deco-confetti-green" style="left:180px; top:100px; width:6px; height:20px; transform:rotate(20deg);"></div>
<div class="deco deco-confetti deco-confetti-purple" style="left:1650px; top:80px; width:8px; height:22px; transform:rotate(-25deg);"></div>
<!-- タイトル -->
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px;">🎨 カラーパレット</div>
<div class="el t-body" style="left:96px; top:120px; width:1728px;">5色をバランスよく使い分ける。単色は退屈 — 多色でポップに。</div>
<!-- メインカラー行 -->
<div class="el color-swatch" style="left:96px; top:200px; width:320px; height:140px; background:var(--color-primary);"></div>
<div class="el t-heading t-primary" style="left:96px; top:350px; width:320px;">Primary</div>
<div class="el t-caption" style="left:96px; top:395px; width:320px;">#FF6B9D コーラルピンク</div>
<div class="el color-swatch" style="left:456px; top:200px; width:320px; height:140px; background:var(--color-secondary);"></div>
<div class="el t-heading t-secondary" style="left:456px; top:350px; width:320px;">Secondary</div>
<div class="el t-caption" style="left:456px; top:395px; width:320px;">#C084FC ラベンダー</div>
<div class="el color-swatch" style="left:816px; top:200px; width:320px; height:140px; background:var(--color-accent);"></div>
<div class="el t-heading t-accent" style="left:816px; top:350px; width:320px;">Accent</div>
<div class="el t-caption" style="left:816px; top:395px; width:320px;">#FCD34D サンシャインイエロー</div>
<div class="el color-swatch" style="left:1176px; top:200px; width:320px; height:140px; background:var(--color-accent-2);"></div>
<div class="el t-heading t-accent-2" style="left:1176px; top:350px; width:320px;">Accent 2</div>
<div class="el t-caption" style="left:1176px; top:395px; width:320px;">#67E8F9 スカイブルー</div>
<div class="el color-swatch" style="left:1536px; top:200px; width:320px; height:140px; background:var(--color-accent-3);"></div>
<div class="el t-heading t-accent-3" style="left:1536px; top:350px; width:320px;">Accent 3</div>
<div class="el t-caption" style="left:1536px; top:395px; width:320px;">#86EFAC ミントグリーン</div>
<!-- 背景色行 -->
<div class="el t-heading" style="left:96px; top:460px; width:1728px;">背景カラー</div>
<div class="el color-swatch" style="left:96px; top:510px; width:240px; height:100px; background:var(--color-bg-dark);"></div>
<div class="el t-caption" style="left:96px; top:620px; width:240px;">bg-dark #2D1B4E<br>カバー・クロージング用</div>
<div class="el color-swatch" style="left:376px; top:510px; width:240px; height:100px; background:var(--color-bg-light);"></div>
<div class="el t-caption" style="left:376px; top:620px; width:240px;">bg-light #FFF5F7<br>ベビーピンク(基本背景)</div>
<div class="el color-swatch" style="left:656px; top:510px; width:240px; height:100px; background:var(--color-bg-alt);"></div>
<div class="el t-caption" style="left:656px; top:620px; width:240px;">bg-alt #FEFCE8<br>クリームイエロー(代替)</div>
<div class="el color-swatch" style="left:936px; top:510px; width:240px; height:100px; background:var(--color-bg-card);"></div>
<div class="el t-caption" style="left:936px; top:620px; width:240px;">bg-card #FFFFFF<br>カード背景</div>
<!-- テキストカラー -->
<div class="el t-heading" style="left:96px; top:700px; width:1728px;">テキストカラー</div>
<div class="el t-body" style="left:96px; top:750px; width:500px;">text-primary #4A1D6A — 本文</div>
<div class="el t-body t-muted" style="left:96px; top:785px; width:500px;">text-secondary #7C5B99 — サブ</div>
<div class="el t-body" style="left:96px; top:820px; width:500px;"><span style="color:var(--color-text-muted);">text-muted #B89ED1 — ミュート</span></div>
<div class="el card t-body t-on-dark" style="left:650px; top:750px; width:350px; height:90px; background:var(--color-bg-dark); padding:16px; border:none;">text-on-dark #FFF5F7<br>ダーク背景上のテキスト</div>
<!-- ルール -->
<div class="el card card-pink" style="left:96px; top:900px; width:1728px; height:130px; padding:20px;">
<span class="t-heading t-primary">ルール</span><br>
<span class="t-body">・モノトーン禁止 — 常に2色以上使う ・ダーク背景はカバーとクロージングのみ ・ボーダーはprimaryまたはsecondary</span>
</div>
</div>
<!-- SLIDE 3: タイポグラフィ -->
<div class="slide slide-alt">
<!-- 装飾 -->
<div class="deco deco-dot deco-dot-pink" style="left:1780px; top:80px; width:16px; height:16px;"></div>
<div class="deco deco-dot deco-dot-blue" style="left:120px; top:980px; width:12px; height:12px;"></div>
<div class="deco deco-heart deco-heart-purple" style="left:1800px; top:500px;">♥</div>
<div class="deco deco-star deco-star-yellow" style="left:80px; top:200px;">★</div>
<div class="deco deco-confetti deco-confetti-pink" style="left:1700px; top:900px; width:8px; height:24px; transform:rotate(30deg);"></div>
<div class="deco deco-confetti deco-confetti-blue" style="left:1750px; top:870px; width:6px; height:18px; transform:rotate(-20deg);"></div>
<div class="deco deco-confetti deco-confetti-yellow" style="left:200px; top:950px; width:7px; height:22px; transform:rotate(45deg);"></div>
<!-- タイトル -->
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px;">✏️ タイポグラフィ</div>
<div class="el t-body" style="left:96px; top:120px; width:1728px;">Trebuchet MS + メイリオ。丸みのあるサンセリフで柔らかさを出す。</div>
<!-- サイズ階層デモ -->
<div class="el t-cover-title t-primary" style="left:96px; top:200px; width:1200px;">カバータイトル 48pt</div>
<div class="el t-slide-title" style="left:96px; top:290px; width:1200px;">スライドタイトル 38pt</div>
<div class="el t-heading" style="left:96px; top:365px; width:1200px;">セクション見出し 26pt</div>
<div class="el t-body" style="left:96px; top:420px; width:1200px;">本文テキスト 16pt — 読みやすさを最優先。行間1.6で余裕を持たせる。</div>
<div class="el t-caption" style="left:96px; top:460px; width:1200px;">キャプション 12pt — 補足情報やクレジットに使用</div>
<!-- Fun Stat デモ -->
<div class="el card card-yellow" style="left:96px; top:530px; width:500px; height:240px; padding:24px;">
<span class="t-caption">楽しい大数値 — fun-stat 72pt</span><br><br>
<span class="t-fun-stat">🎉 42%</span><br>
<span class="t-body">インパクトのある数値を大きく見せる。</span>
</div>
<!-- フォント指定カード -->
<div class="el card card-purple" style="left:660px; top:530px; width:500px; height:240px; padding:24px;">
<span class="t-heading t-secondary">フォント指定</span><br><br>
<span class="t-body">見出し: Trebuchet MS, メイリオ<br>本文: Calibri, メイリオ<br><br>絵文字はタイトル・見出しに控えめに使用OK。</span>
</div>
<!-- ルールカード -->
<div class="el card card-pink" style="left:1224px; top:530px; width:600px; height:240px; padding:24px;">
<span class="t-heading t-primary">タイポルール</span><br><br>
<span class="t-body">・隣接レベルは4pt以上の差をつける<br>・本文14pt以上、見出し20pt以上<br>・太字は見出しのみ。本文はregular<br>・モノスペース多用禁止</span>
</div>
<!-- 装飾: 大きな丸 -->
<div class="deco deco-blob deco-blob-pink" style="left:1750px; top:-40px; width:200px; height:200px;"></div>
</div>
<!-- SLIDE 4: カード&コンポーネント -->
<div class="slide">
<!-- 装飾 -->
<div class="deco deco-dot deco-dot-yellow" style="left:1800px; top:50px; width:14px; height:14px;"></div>
<div class="deco deco-dot deco-dot-green" style="left:80px; top:980px; width:18px; height:18px;"></div>
<div class="deco deco-heart deco-heart-pink" style="left:1820px; top:600px;">♥</div>
<div class="deco deco-star deco-star-yellow" style="left:60px; top:300px;">★</div>
<div class="deco deco-confetti deco-confetti-purple" style="left:1750px; top:950px; width:7px; height:22px; transform:rotate(-35deg);"></div>
<div class="deco deco-confetti deco-confetti-pink" style="left:300px; top:980px; width:6px; height:18px; transform:rotate(20deg);"></div>
<!-- タイトル -->
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px;">🧩 カード&コンポーネント</div>
<div class="el t-body" style="left:96px; top:120px; width:1728px;">大角丸 + カラフルボーダー + 軽い影。柔らかくて楽しいコンテナ。</div>
<!-- カード5色 -->
<div class="el card card-pink" style="left:96px; top:200px; width:330px; height:180px; padding:20px;">
<span class="icon-circle icon-circle-pink" style="width:48px; height:48px; display:inline-flex;">🎀</span>
<span class="t-heading t-primary"> ピンク</span><br>
<span class="t-caption">border: primary</span>
</div>
<div class="el card card-purple" style="left:466px; top:200px; width:330px; height:180px; padding:20px;">
<span class="icon-circle icon-circle-purple" style="width:48px; height:48px; display:inline-flex;">🔮</span>
<span class="t-heading t-secondary"> パープル</span><br>
<span class="t-caption">border: secondary</span>
</div>
<div class="el card card-yellow" style="left:836px; top:200px; width:330px; height:180px; padding:20px;">
<span class="icon-circle icon-circle-yellow" style="width:48px; height:48px; display:inline-flex;">⭐</span>
<span class="t-heading t-accent"> イエロー</span><br>
<span class="t-caption">border: accent</span>
</div>
<div class="el card card-blue" style="left:1206px; top:200px; width:330px; height:180px; padding:20px;">
<span class="icon-circle icon-circle-blue" style="width:48px; height:48px; display:inline-flex;">💎</span>
<span class="t-heading t-accent-2"> ブルー</span><br>
<span class="t-caption">border: accent-2</span>
</div>
<div class="el card card-green" style="left:1576px; top:200px; width:260px; height:180px; padding:20px;">
<span class="icon-circle icon-circle-green" style="width:48px; height:48px; display:inline-flex;">🌿</span>
<span class="t-heading t-accent-3"> グリーン</span><br>
<span class="t-caption">border: accent-3</span>
</div>
<!-- バッジ -->
<div class="el t-heading" style="left:96px; top:430px; width:800px;">バッジ</div>
<div class="el" style="left:96px; top:480px;">
<span class="badge badge-pink">ピンク</span>
<span class="badge badge-purple">パープル</span>
<span class="badge badge-yellow">イエロー</span>
<span class="badge badge-blue">ブルー</span>
<span class="badge badge-green">グリーン</span>
</div>
<div class="el t-caption" style="left:96px; top:520px; width:800px;">pill型(radius: 999px)。ラベルやタグに使用。</div>
<!-- ステッカー -->
<div class="el t-heading" style="left:96px; top:580px; width:800px;">ステッカー</div>
<div class="el" style="left:96px; top:630px;">
<span class="sticker sticker-pink" style="transform:rotate(-3deg);">🎉 パーティー</span>
<span class="sticker sticker-yellow" style="transform:rotate(2deg);">💖 かわいい</span>
<span class="sticker sticker-blue" style="transform:rotate(-1deg);">✨ キラキラ</span>
</div>
<div class="el t-caption" style="left:96px; top:700px; width:800px;">角丸 + 回転 + パステル塗り = ステッカー風。</div>
<!-- アイコンサークル -->
<div class="el t-heading" style="left:96px; top:760px; width:800px;">アイコンサークル</div>
<div class="el" style="left:96px; top:810px;">
<span class="icon-circle icon-circle-pink" style="width:56px; height:56px; display:inline-flex;">🎀</span>
<span class="icon-circle icon-circle-purple" style="width:56px; height:56px; display:inline-flex;">🔮</span>
<span class="icon-circle icon-circle-yellow" style="width:56px; height:56px; display:inline-flex;">⭐</span>
<span class="icon-circle icon-circle-blue" style="width:56px; height:56px; display:inline-flex;">💎</span>
<span class="icon-circle icon-circle-green" style="width:56px; height:56px; display:inline-flex;">🌿</span>
</div>
<div class="el t-caption" style="left:96px; top:880px; width:800px;">tint色の丸背景 + 絵文字。各カードのアイコンに使用。</div>
<!-- ルール -->
<div class="el card card-purple" style="left:1000px; top:430px; width:820px; height:480px; padding:24px;">
<span class="t-heading t-secondary">コンポーネントルール</span><br><br>
<span class="t-body">
・角丸は常に大きめ(radius: 20px)— シャープ角禁止<br>
・カードは白背景 + カラーボーダー + ピンク系シャドウ<br>
・ボーダーはやや太め(2pt)で存在感を出す<br>
・各カードに色違いのアイコンサークルを配置<br>
・ステッカーは軽い回転で手作り感を演出<br>
・バッジはpill型で丸く<br>
・色は5色をローテーション — 同色の連続を避ける
</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Elegant Dark — 余白と静寂が高級感を語る。装飾ではなく、引き算の美学。</title>
<style>
:root {
/* Colors */
--color-primary: #1A1A2E;
--color-secondary: #B8860B;
--color-accent: #D4AF37;
--color-accent-light: #F5E6B8;
--color-bg-dark: #0C0C1D;
--color-bg-light: #FAF8F5;
--color-bg-card: #16162A;
--color-text: #F5E6B8;
--color-text-sub: #9A9AAA;
--color-text-muted: #6A6A7A;
--color-text-on-light: #1A1A2E;
--color-text-sub-on-light: #4A4A5A;
--color-border: #2A2A3E;
--color-border-light: #E8E0D5;
--color-burgundy: #6D2E46;
/* Template */
--template-theme: dark;
/* 推奨テンプレート: Blank Dark
ダークテンプレート使用。ライトスライドは background + defaultTextColor で切り替える。 */
/* Typography - Fonts */
--font-heading: "Palatino", "Georgia", serif;
--font-body: "Garamond", "Georgia", serif;
/* Typography - Sizes */
--size-cover-title: 48pt;
--size-slide-title: 38pt;
--size-section-header: 28pt;
--size-body: 16pt;
--size-caption: 11pt;
/* Spacing */
--title-letter-spacing: 6px;
/* Components - Card */
--card-radius: 0px;
--card-border: 0.5pt solid var(--color-border);
--card-shadow: 0 1px 5px rgba(0,0,0,0.06);
/* Components - Gold frame */
--frame-inset: 58px;
--frame-border: 0.5pt solid var(--color-accent);
/* Components - Corner accent */
--corner-size: 58px;
--corner-weight: 0.5pt;
--corner-color: var(--color-accent);
/* Components - Divider */
--divider: 0.5pt solid var(--color-accent);
--divider-muted: 0.5pt solid var(--color-border);
}
body {
margin: 0; padding: 40px;
background: #E5E5E5;
zoom: 0.7;
}
.slide {
position: relative;
width: 1920px; height: 1080px;
margin: 0 auto 40px;
background: var(--color-bg-dark);
overflow: hidden;
}
.slide--light {
background: var(--color-bg-light);
}
.el { position: absolute; }
/* Text styles */
.t-cover-title {
font-family: var(--font-heading);
font-size: var(--size-cover-title);
font-weight: normal;
color: var(--color-accent-light);
line-height: 1.2;
letter-spacing: var(--title-letter-spacing);
text-transform: uppercase;
}
.t-slide-title {
font-family: var(--font-heading);
font-size: var(--size-slide-title);
font-weight: normal;
color: var(--color-text);
line-height: 1.3;
}
.t-slide-title-on-light {
font-family: var(--font-heading);
font-size: var(--size-slide-title);
font-weight: normal;
color: var(--color-text-on-light);
line-height: 1.3;
}
.t-section-header {
font-family: var(--font-heading);
font-size: var(--size-section-header);
font-weight: normal;
color: var(--color-accent-light);
line-height: 1.3;
}
.t-body {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: 300;
color: var(--color-text-sub);
line-height: 1.7;
}
.t-body-on-light {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: 300;
color: var(--color-text-sub-on-light);
line-height: 1.7;
}
.t-caption {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: normal;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
}
.t-accent {
font-family: var(--font-body);
font-size: var(--size-body);
font-style: italic;
color: var(--color-accent-light);
line-height: 1.7;
}
/* Components */
.card {
background: var(--color-bg-card);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.gold-frame {
border: var(--frame-border);
position: absolute;
top: var(--frame-inset);
left: var(--frame-inset);
right: var(--frame-inset);
bottom: var(--frame-inset);
pointer-events: none;
}
.diamond {
width: 10px; height: 10px;
background: var(--color-accent);
transform: rotate(45deg);
}
.gold-line-h {
height: 0;
border-top: var(--divider);
}
</style>
</head>
<body>
<!-- Slide 1: Cover -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-cover-title" style="left:200px; top:380px; width:1520px; text-align:center;">Elegant Dark</div>
<div class="el" style="left:910px; top:480px; width:100px; text-align:center;"><div class="diamond" style="margin:0 auto;"></div></div>
<div class="el t-section-header" style="left:200px; top:510px; width:1520px; text-align:center; font-style:italic;">余白と静寂が高級感を語る</div>
<div class="el t-caption" style="left:200px; top:600px; width:1520px; text-align:center;">装飾ではなく、引き算の美学。</div>
</div>
<!-- Slide 2: Color Palette -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Color Palette</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:800px;">ダーク背景にゴールドアクセント。色数は3色以内に抑え、余白で高級感を演出する。</div>
<!-- Primary colors row -->
<div class="el t-caption" style="left:96px; top:240px;">PRIMARY COLORS</div>
<div class="el" style="left:96px; top:270px; width:180px; height:120px; background:var(--color-primary);"></div>
<div class="el t-caption" style="left:96px; top:395px; color:var(--color-text-sub);">Primary<br>#1A1A2E</div>
<div class="el" style="left:296px; top:270px; width:180px; height:120px; background:var(--color-secondary);"></div>
<div class="el t-caption" style="left:296px; top:395px; color:var(--color-text-sub);">Secondary<br>#B8860B</div>
<div class="el" style="left:496px; top:270px; width:180px; height:120px; background:var(--color-accent);"></div>
<div class="el t-caption" style="left:496px; top:395px; color:var(--color-text-sub);">Accent<br>#D4AF37</div>
<div class="el" style="left:696px; top:270px; width:180px; height:120px; background:var(--color-accent-light);"></div>
<div class="el t-caption" style="left:696px; top:395px; color:var(--color-text-sub);">Accent Light<br>#F5E6B8</div>
<div class="el" style="left:896px; top:270px; width:180px; height:120px; background:var(--color-burgundy);"></div>
<div class="el t-caption" style="left:896px; top:395px; color:var(--color-text-sub);">Burgundy<br>#6D2E46</div>
<!-- Background colors row -->
<div class="el t-caption" style="left:96px; top:470px;">BACKGROUNDS</div>
<div class="el" style="left:96px; top:500px; width:180px; height:120px; background:var(--color-bg-dark); border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:96px; top:625px; color:var(--color-text-sub);">BG Dark<br>#0C0C1D</div>
<div class="el" style="left:296px; top:500px; width:180px; height:120px; background:var(--color-bg-light); border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:296px; top:625px; color:var(--color-text-sub);">BG Light<br>#FAF8F5</div>
<div class="el" style="left:496px; top:500px; width:180px; height:120px; background:var(--color-bg-card); border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:496px; top:625px; color:var(--color-text-sub);">Card Dark<br>#16162A</div>
<!-- Text colors row -->
<div class="el t-caption" style="left:96px; top:700px;">TEXT COLORS</div>
<div class="el" style="left:96px; top:730px; width:180px; height:60px; background:var(--color-bg-card); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-accent-light); font-family:var(--font-body); font-size:var(--size-body);">On Dark</span></div>
<div class="el" style="left:296px; top:730px; width:180px; height:60px; background:var(--color-bg-card); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-text-sub); font-family:var(--font-body); font-size:var(--size-body);">Sub</span></div>
<div class="el" style="left:496px; top:730px; width:180px; height:60px; background:var(--color-bg-light); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-text-on-light); font-family:var(--font-body); font-size:var(--size-body);">On Light</span></div>
</div>
<!-- Slide 3: Typography -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Typography</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:900px;">セリフフォント主体。見出しはPalatino regular、本文はGaramond light。boldよりregularで上品さを保つ。</div>
<div class="el t-cover-title" style="left:96px; top:260px; width:1200px;">Cover Title — 48pt</div>
<div class="el t-slide-title" style="left:96px; top:360px; width:1200px;">Slide Title — 38pt Palatino</div>
<div class="el t-section-header" style="left:96px; top:440px; width:1200px;">Section Header — 28pt Palatino</div>
<div class="el t-body" style="left:96px; top:520px; width:1200px;">Body text — 16pt Garamond light。本文は軽いウェイトで繊細さを表現する。行間は1.7で呼吸空間を確保。</div>
<div class="el t-accent" style="left:96px; top:600px; width:1200px;">Accent italic — 引用やキーフレーズにイタリック体を使用する。</div>
<div class="el t-caption" style="left:96px; top:660px; width:1200px;">Caption — 11pt Garamond italic。補足情報や出典表記に使用。</div>
<div class="el t-caption" style="left:96px; top:780px;">LETTER SPACING</div>
<div class="el t-slide-title" style="left:96px; top:810px; width:1200px; letter-spacing:0;">letter-spacing: 0(通常)</div>
<div class="el t-slide-title" style="left:96px; top:880px; width:1200px; letter-spacing:var(--title-letter-spacing);">letter-spacing: 6px(タイトル用)</div>
</div>
<!-- Slide 4: Components & Decoration -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Components</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:900px;">直角カード、極細ボーダー、控えめな影。装飾は最小限に。</div>
<!-- Card examples -->
<div class="el card" style="left:96px; top:240px; width:500px; height:180px; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:8px;">ミニマルカード</div>
<div class="t-body">極細ボーダー 0.5pt + 角丸なし。影は存在を主張しない。</div>
</div>
<div class="el card" style="left:650px; top:240px; width:500px; height:180px; padding:24px; box-sizing:border-box; border-color:var(--color-accent);">
<div class="t-section-header" style="margin-bottom:8px;">ゴールドフレームカード</div>
<div class="t-body">アクセントとしてゴールドボーダーを使用。</div>
</div>
<!-- Double border frame -->
<div class="el" style="left:1220px; top:240px; width:500px; height:180px; border:0.5pt solid var(--color-accent); padding:6px; box-sizing:border-box;">
<div style="border:0.5pt solid var(--color-accent); width:100%; height:100%; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:8px;">二重線フレーム</div>
<div class="t-body">額縁風の二重線ボーダー。</div>
</div>
</div>
<!-- Decorative elements -->
<div class="el t-caption" style="left:96px; top:480px;">DECORATIVE ELEMENTS</div>
<!-- Gold horizontal line -->
<div class="el t-body" style="left:96px; top:520px; width:300px;">ゴールド区切り線</div>
<div class="el gold-line-h" style="left:96px; top:560px; width:400px;"></div>
<!-- Diamond separator -->
<div class="el t-body" style="left:96px; top:600px; width:300px;">ダイヤモンド区切り</div>
<div class="el" style="left:96px; top:650px; width:400px; display:flex; align-items:center; gap:16px;">
<div style="flex:1; border-top:var(--divider);"></div>
<div class="diamond"></div>
<div style="flex:1; border-top:var(--divider);"></div>
</div>
<!-- L-corner accents demo -->
<div class="el t-body" style="left:96px; top:720px; width:300px;">L字コーナーアクセント</div>
<div class="el" style="left:96px; top:770px; width:200px; height:200px;">
<!-- Top-left -->
<div style="position:absolute; top:0; left:0; width:var(--corner-size); border-top:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; top:0; left:0; height:var(--corner-size); border-left:var(--corner-weight) solid var(--corner-color);"></div>
<!-- Top-right -->
<div style="position:absolute; top:0; right:0; width:var(--corner-size); border-top:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; top:0; right:0; height:var(--corner-size); border-right:var(--corner-weight) solid var(--corner-color);"></div>
<!-- Bottom-left -->
<div style="position:absolute; bottom:0; left:0; width:var(--corner-size); border-bottom:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; left:0; height:var(--corner-size); border-left:var(--corner-weight) solid var(--corner-color);"></div>
<!-- Bottom-right -->
<div style="position:absolute; bottom:0; right:0; width:var(--corner-size); border-bottom:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; right:0; height:var(--corner-size); border-right:var(--corner-weight) solid var(--corner-color);"></div>
<div class="t-caption" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">四隅 L字 0.5pt</div>
</div>
<!-- Rules -->
<div class="el card" style="left:650px; top:520px; width:1070px; height:450px; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:16px;">装飾ルール</div>
<div class="t-body" style="margin-bottom:8px;">✓ ゴールド細線は区切りとして使用可</div>
<div class="t-body" style="margin-bottom:8px;">✓ 四隅L字コーナー(0.3", 0.5pt)</div>
<div class="t-body" style="margin-bottom:8px;">✓ ダイヤモンド形でセクション区切り</div>
<div class="t-body" style="margin-bottom:8px;">✓ スライド全体を囲む極細ゴールドフレーム</div>
<div class="t-body" style="margin-bottom:16px;">✓ 影は極めて控えめ(blur:5, opacity:6%)</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ タイトル下のアクセントライン禁止</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 太いボーダー禁止(2pt以上)</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 大きな角丸禁止</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 3D効果・ネオン・パターン過多禁止</div>
</div>
</div>
<!-- Slide 5: Light Content on Dark Template -->
<div class="slide">
<!-- Light background via slide-level override -->
<div class="el" style="left:0; top:0; width:1920px; height:1080px; background:var(--color-bg-light);"></div>
<div class="el t-slide-title-on-light" style="left:96px; top:48px; width:1728px;">ライトコンテンツスライド</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body-on-light" style="left:96px; top:140px; width:900px;">ダークテンプレート上でライトスライドを実現するには、スライドに "background": "#FAF8F5" と "defaultTextColor": "#1A1A2E" を指定する。</div>
<div class="el" style="left:96px; top:280px; width:820px; height:300px; background:#FFFFFF; border:0.5pt solid var(--color-border-light); padding:32px; box-sizing:border-box;">
<div style="font-family:var(--font-heading); font-size:var(--size-section-header); color:var(--color-text-on-light); margin-bottom:16px;">ライトモードのカード</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-sub-on-light); line-height:1.7;">コンテンツスライドはライト背景で読みやすさを確保。カード背景は#FFFFFF、ボーダーは暖色系#E8E0D5を使用。</div>
</div>
<div class="el" style="left:960px; top:280px; width:860px; height:300px; padding:32px; box-sizing:border-box; border:0.5pt solid var(--color-border-light);">
<div style="font-family:var(--font-heading); font-size:var(--size-section-header); color:var(--color-text-on-light); margin-bottom:16px;">テキストカラー</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-on-light); margin-bottom:8px;">Primary — #1A1A2E</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-sub-on-light); margin-bottom:8px;">Secondary — #4A4A5A</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:#9A9AAA;">Muted — #9A9AAA</div>
</div>
<div class="el t-caption" style="left:96px; top:640px; color:var(--color-text-sub-on-light); font-style:normal;">実装メモ: slides.jsonでは z-order:0 の全面矩形で背景を覆い、コンテンツ要素はその上に配置する。</div>
</div>
<!-- Slide 6: Do's & Don'ts -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Do's & Don'ts</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<!-- Do's -->
<div class="el t-section-header" style="left:96px; top:180px; width:800px; color:var(--color-accent);">Do's</div>
<div class="el t-body" style="left:96px; top:230px; width:800px;">余白を最大限活用(内容の「呼吸空間」確保)</div>
<div class="el t-body" style="left:96px; top:280px; width:800px;">ゴールド要素は控えめに(アクセントのみ)</div>
<div class="el t-body" style="left:96px; top:330px; width:800px;">セリフフォントを主体に使用</div>
<div class="el t-body" style="left:96px; top:380px; width:800px;">イタリック体で引用・キーフレーズを強調</div>
<div class="el t-body" style="left:96px; top:430px; width:800px;">色数を3色以内に抑制</div>
<div class="el t-body" style="left:96px; top:480px; width:800px;">カバー・セクション区切り・クロージングはダーク背景</div>
<div class="el t-body" style="left:96px; top:530px; width:800px;">セクション番号はローマ数字(I, II, III...)</div>
<!-- Don'ts -->
<div class="el t-section-header" style="left:1020px; top:180px; width:800px; color:var(--color-burgundy);">Don'ts</div>
<div class="el t-body" style="left:1020px; top:230px; width:800px; color:var(--color-burgundy);">派手な色使い(ネオン・パステル・ポップ色)</div>
<div class="el t-body" style="left:1020px; top:280px; width:800px; color:var(--color-burgundy);">太いボーダー(2pt以上)</div>
<div class="el t-body" style="left:1020px; top:330px; width:800px; color:var(--color-burgundy);">大きな角丸(rectRadius > 0.08)</div>
<div class="el t-body" style="left:1020px; top:380px; width:800px; color:var(--color-burgundy);">装飾の詰め込み(スペースが高級感を生む)</div>
<div class="el t-body" style="left:1020px; top:430px; width:800px; color:var(--color-burgundy);">影の多用・3D効果</div>
<div class="el t-body" style="left:1020px; top:480px; width:800px; color:var(--color-burgundy);">タイトル下のアクセントライン</div>
<div class="el t-body" style="left:1020px; top:530px; width:800px; color:var(--color-burgundy);">カラフルな要素・パターン過多</div>
<div class="el" style="left:96px; top:620px; width:1728px; display:flex; align-items:center; gap:16px;">
<div style="flex:1; border-top:var(--divider);"></div>
<div class="diamond"></div>
<div style="flex:1; border-top:var(--divider);"></div>
</div>
<div class="el t-accent" style="left:96px; top:680px; width:1728px; text-align:center;">「Less is more — 余白こそが最高の装飾である」</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Elegant Light — 余白と静寂が高級感を語る。装飾ではなく、引き算の美学。</title>
<style>
:root {
/* Colors */
--color-primary: #1A1A2E;
--color-secondary: #B8860B;
--color-accent: #D4AF37;
--color-accent-light: #F5E6B8;
--color-bg-dark: #0C0C1D;
--color-bg-light: #FAF8F5;
--color-bg-card: #FFFFFF;
--color-bg-card-dark: #16162A;
--color-text: #1A1A2E;
--color-text-sub: #4A4A5A;
--color-text-muted: #9A9AAA;
--color-text-on-dark: #F5E6B8;
--color-text-sub-on-dark: #9A9AAA;
--color-border: #E8E0D5;
--color-border-dark: #2A2A3E;
--color-burgundy: #6D2E46;
/* Template */
--template-theme: light;
/* 推奨テンプレート: Blank Light
ライトテンプレート使用。ダークスライドは background + defaultTextColor で切り替える。 */
/* Typography - Fonts */
--font-heading: "Palatino", "Georgia", serif;
--font-body: "Garamond", "Georgia", serif;
/* Typography - Sizes */
--size-cover-title: 48pt;
--size-slide-title: 38pt;
--size-section-header: 28pt;
--size-body: 16pt;
--size-caption: 11pt;
/* Spacing */
--title-letter-spacing: 6px;
/* Components - Card */
--card-radius: 0px;
--card-border: 0.5pt solid var(--color-border);
--card-shadow: 0 1px 5px rgba(0,0,0,0.06);
/* Components - Gold frame */
--frame-inset: 58px;
--frame-border: 1pt solid var(--color-secondary);
/* Components - Corner accent */
--corner-size: 58px;
--corner-weight: 0.5pt;
--corner-color: var(--color-accent);
/* Components - Divider */
--divider: 0.5pt solid var(--color-accent);
--divider-muted: 0.5pt solid var(--color-border);
}
body {
margin: 0; padding: 40px;
background: #E5E5E5;
zoom: 0.7;
}
.slide {
position: relative;
width: 1920px; height: 1080px;
margin: 0 auto 40px;
background: var(--color-bg-light);
overflow: hidden;
}
.el { position: absolute; }
/* Text styles */
.t-cover-title {
font-family: var(--font-heading);
font-size: var(--size-cover-title);
font-weight: normal;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: var(--title-letter-spacing);
text-transform: uppercase;
}
.t-slide-title {
font-family: var(--font-heading);
font-size: var(--size-slide-title);
font-weight: normal;
color: var(--color-text);
line-height: 1.3;
}
.t-slide-title-on-dark {
font-family: var(--font-heading);
font-size: var(--size-slide-title);
font-weight: normal;
color: var(--color-text-on-dark);
line-height: 1.3;
}
.t-section-header {
font-family: var(--font-heading);
font-size: var(--size-section-header);
font-weight: normal;
color: var(--color-text);
line-height: 1.3;
}
.t-body {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: 300;
color: var(--color-text-sub);
line-height: 1.7;
}
.t-body-on-dark {
font-family: var(--font-body);
font-size: var(--size-body);
font-weight: 300;
color: var(--color-text-sub-on-dark);
line-height: 1.7;
}
.t-caption {
font-family: var(--font-body);
font-size: var(--size-caption);
font-weight: normal;
font-style: italic;
color: var(--color-text-muted);
line-height: 1.5;
}
.t-accent {
font-family: var(--font-body);
font-size: var(--size-body);
font-style: italic;
color: var(--color-secondary);
line-height: 1.7;
}
/* Components */
.card {
background: var(--color-bg-card);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.gold-frame {
border: var(--frame-border);
position: absolute;
top: var(--frame-inset);
left: var(--frame-inset);
right: var(--frame-inset);
bottom: var(--frame-inset);
pointer-events: none;
}
.diamond {
width: 10px; height: 10px;
background: var(--color-accent);
transform: rotate(45deg);
}
.gold-line-h {
height: 0;
border-top: var(--divider);
}
</style>
</head>
<body>
<!-- Slide 1: Cover (Light) -->
<div class="slide">
<div class="gold-frame"></div>
<div class="el t-cover-title" style="left:200px; top:380px; width:1520px; text-align:center;">Elegant Light</div>
<div class="el" style="left:910px; top:480px; width:100px; text-align:center;"><div class="diamond" style="margin:0 auto;"></div></div>
<div class="el t-section-header" style="left:200px; top:510px; width:1520px; text-align:center; font-style:italic; color:var(--color-secondary);">余白と静寂が高級感を語る</div>
<div class="el t-caption" style="left:200px; top:600px; width:1520px; text-align:center;">装飾ではなく、引き算の美学。</div>
</div>
<!-- Slide 2: Color Palette -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Color Palette</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:800px;">アイボリー背景にゴールドアクセント。色数は3色以内に抑え、余白で高級感を演出する。</div>
<div class="el t-caption" style="left:96px; top:240px;">PRIMARY COLORS</div>
<div class="el" style="left:96px; top:270px; width:180px; height:120px; background:var(--color-primary);"></div>
<div class="el t-caption" style="left:96px; top:395px;">Primary<br>#1A1A2E</div>
<div class="el" style="left:296px; top:270px; width:180px; height:120px; background:var(--color-secondary);"></div>
<div class="el t-caption" style="left:296px; top:395px;">Secondary<br>#B8860B</div>
<div class="el" style="left:496px; top:270px; width:180px; height:120px; background:var(--color-accent);"></div>
<div class="el t-caption" style="left:496px; top:395px;">Accent<br>#D4AF37</div>
<div class="el" style="left:696px; top:270px; width:180px; height:120px; background:var(--color-accent-light);border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:696px; top:395px;">Accent Light<br>#F5E6B8</div>
<div class="el" style="left:896px; top:270px; width:180px; height:120px; background:var(--color-burgundy);"></div>
<div class="el t-caption" style="left:896px; top:395px;">Burgundy<br>#6D2E46</div>
<div class="el t-caption" style="left:96px; top:470px;">BACKGROUNDS</div>
<div class="el" style="left:96px; top:500px; width:180px; height:120px; background:var(--color-bg-light); border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:96px; top:625px;">BG Light<br>#FAF8F5</div>
<div class="el" style="left:296px; top:500px; width:180px; height:120px; background:var(--color-bg-card); border:0.5pt solid var(--color-border);"></div>
<div class="el t-caption" style="left:296px; top:625px;">Card<br>#FFFFFF</div>
<div class="el" style="left:496px; top:500px; width:180px; height:120px; background:var(--color-bg-dark);"></div>
<div class="el t-caption" style="left:496px; top:625px;">BG Dark<br>#0C0C1D</div>
<div class="el t-caption" style="left:96px; top:700px;">TEXT COLORS</div>
<div class="el" style="left:96px; top:730px; width:180px; height:60px; background:var(--color-bg-light); border:0.5pt solid var(--color-border); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-text); font-family:var(--font-body); font-size:var(--size-body);">Primary</span></div>
<div class="el" style="left:296px; top:730px; width:180px; height:60px; background:var(--color-bg-light); border:0.5pt solid var(--color-border); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-text-sub); font-family:var(--font-body); font-size:var(--size-body);">Sub</span></div>
<div class="el" style="left:496px; top:730px; width:180px; height:60px; background:var(--color-bg-dark); display:flex; align-items:center; justify-content:center;"><span style="color:var(--color-text-on-dark); font-family:var(--font-body); font-size:var(--size-body);">On Dark</span></div>
</div>
<!-- Slide 3: Typography -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Typography</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:900px;">セリフフォント主体。見出しはPalatino regular、本文はGaramond light。boldよりregularで上品さを保つ。</div>
<div class="el t-cover-title" style="left:96px; top:260px; width:1200px;">Cover Title — 48pt</div>
<div class="el t-slide-title" style="left:96px; top:360px; width:1200px;">Slide Title — 38pt Palatino</div>
<div class="el t-section-header" style="left:96px; top:440px; width:1200px;">Section Header — 28pt Palatino</div>
<div class="el t-body" style="left:96px; top:520px; width:1200px;">Body text — 16pt Garamond light。本文は軽いウェイトで繊細さを表現する。行間は1.7で呼吸空間を確保。</div>
<div class="el t-accent" style="left:96px; top:600px; width:1200px;">Accent italic — 引用やキーフレーズにイタリック体を使用する。</div>
<div class="el t-caption" style="left:96px; top:660px; width:1200px;">Caption — 11pt Garamond italic。補足情報や出典表記に使用。</div>
<div class="el t-caption" style="left:96px; top:780px;">LETTER SPACING</div>
<div class="el t-slide-title" style="left:96px; top:810px; width:1200px; letter-spacing:0;">letter-spacing: 0(通常)</div>
<div class="el t-slide-title" style="left:96px; top:880px; width:1200px; letter-spacing:var(--title-letter-spacing);">letter-spacing: 6px(タイトル用)</div>
</div>
<!-- Slide 4: Components -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Components</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body" style="left:96px; top:140px; width:900px;">直角カード、極細ボーダー、控えめな影。装飾は最小限に。</div>
<div class="el card" style="left:96px; top:240px; width:500px; height:180px; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:8px;">ミニマルカード</div>
<div class="t-body">極細ボーダー 0.5pt + 角丸なし。影は存在を主張しない。</div>
</div>
<div class="el card" style="left:650px; top:240px; width:500px; height:180px; padding:24px; box-sizing:border-box; border-color:var(--color-accent);">
<div class="t-section-header" style="margin-bottom:8px;">ゴールドフレームカード</div>
<div class="t-body">アクセントとしてゴールドボーダーを使用。</div>
</div>
<div class="el" style="left:1220px; top:240px; width:500px; height:180px; border:0.5pt solid var(--color-accent); padding:6px; box-sizing:border-box;">
<div style="border:0.5pt solid var(--color-accent); width:100%; height:100%; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:8px;">二重線フレーム</div>
<div class="t-body">額縁風の二重線ボーダー。</div>
</div>
</div>
<div class="el t-caption" style="left:96px; top:480px;">DECORATIVE ELEMENTS</div>
<div class="el t-body" style="left:96px; top:520px; width:300px;">ゴールド区切り線</div>
<div class="el gold-line-h" style="left:96px; top:560px; width:400px;"></div>
<div class="el t-body" style="left:96px; top:600px; width:300px;">ダイヤモンド区切り</div>
<div class="el" style="left:96px; top:650px; width:400px; display:flex; align-items:center; gap:16px;">
<div style="flex:1; border-top:var(--divider);"></div>
<div class="diamond"></div>
<div style="flex:1; border-top:var(--divider);"></div>
</div>
<div class="el t-body" style="left:96px; top:720px; width:300px;">L字コーナーアクセント</div>
<div class="el" style="left:96px; top:770px; width:200px; height:200px;">
<div style="position:absolute; top:0; left:0; width:var(--corner-size); border-top:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; top:0; left:0; height:var(--corner-size); border-left:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; top:0; right:0; width:var(--corner-size); border-top:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; top:0; right:0; height:var(--corner-size); border-right:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; left:0; width:var(--corner-size); border-bottom:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; left:0; height:var(--corner-size); border-left:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; right:0; width:var(--corner-size); border-bottom:var(--corner-weight) solid var(--corner-color);"></div>
<div style="position:absolute; bottom:0; right:0; height:var(--corner-size); border-right:var(--corner-weight) solid var(--corner-color);"></div>
<div class="t-caption" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);">四隅 L字 0.5pt</div>
</div>
<div class="el card" style="left:650px; top:520px; width:1070px; height:450px; padding:24px; box-sizing:border-box;">
<div class="t-section-header" style="margin-bottom:16px;">装飾ルール</div>
<div class="t-body" style="margin-bottom:8px;">✓ ゴールド細線は区切りとして使用可</div>
<div class="t-body" style="margin-bottom:8px;">✓ 四隅L字コーナー(0.3", 0.5pt)</div>
<div class="t-body" style="margin-bottom:8px;">✓ ダイヤモンド形でセクション区切り</div>
<div class="t-body" style="margin-bottom:8px;">✓ スライド全体を囲む極細ゴールドフレーム</div>
<div class="t-body" style="margin-bottom:16px;">✓ 影は極めて控えめ(blur:5, opacity:6%)</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ タイトル下のアクセントライン禁止</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 太いボーダー禁止(2pt以上)</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 大きな角丸禁止</div>
<div class="t-body" style="color:var(--color-burgundy);">✗ 3D効果・ネオン・パターン過多禁止</div>
</div>
</div>
<!-- Slide 5: Dark Slide Implementation -->
<div class="slide">
<div class="el" style="left:0; top:0; width:1920px; height:1080px; background:var(--color-bg-dark);"></div>
<div class="gold-frame"></div>
<div class="el t-slide-title-on-dark" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">ダークスライド実装例</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-body-on-dark" style="left:96px; top:140px; width:900px;">ライトテンプレート上でダークスライドを実現するには、スライドに "background": "#0C0C1D" と "defaultTextColor": "#F5E6B8" を指定する。</div>
<div class="el" style="left:96px; top:280px; width:820px; height:240px; background:var(--color-bg-card-dark); border:0.5pt solid var(--color-border-dark); padding:32px; box-sizing:border-box;">
<div style="font-family:var(--font-heading); font-size:var(--size-section-header); color:var(--color-text-on-dark); margin-bottom:16px;">ダークモードのカード</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-sub-on-dark); line-height:1.7;">カバー・セクション区切り・クロージングで使用。カード背景は#16162A、ボーダーは#2A2A3E。</div>
</div>
<div class="el" style="left:960px; top:280px; width:860px; height:240px; padding:32px; box-sizing:border-box; border:0.5pt solid var(--color-border-dark);">
<div style="font-family:var(--font-heading); font-size:var(--size-section-header); color:var(--color-text-on-dark); margin-bottom:16px;">用途</div>
<div style="font-family:var(--font-body); font-size:var(--size-body); color:var(--color-text-sub-on-dark); line-height:1.7;">• カバースライド<br>• セクション区切り(ローマ数字: I, II, III...)<br>• クロージングスライド</div>
</div>
<div class="el t-caption" style="left:96px; top:580px; color:var(--color-text-sub-on-dark); font-style:normal;">実装メモ: slides.jsonでは z-order:0 の全面矩形で背景を覆い、コンテンツ要素はその上に配置する。</div>
</div>
<!-- Slide 6: Do's & Don'ts -->
<div class="slide">
<div class="el t-slide-title" style="left:96px; top:48px; width:1728px; letter-spacing:var(--title-letter-spacing);">Do's & Don'ts</div>
<div class="el gold-line-h" style="left:96px; top:120px; width:300px;"></div>
<div class="el t-section-header" style="left:96px; top:180px; width:800px; color:var(--color-accent);">Do's</div>
<div class="el t-body" style="left:96px; top:230px; width:800px;">余白を最大限活用(内容の「呼吸空間」確保)</div>
<div class="el t-body" style="left:96px; top:280px; width:800px;">ゴールド要素は控えめに(アクセントのみ)</div>
<div class="el t-body" style="left:96px; top:330px; width:800px;">セリフフォントを主体に使用</div>
<div class="el t-body" style="left:96px; top:380px; width:800px;">イタリック体で引用・キーフレーズを強調</div>
<div class="el t-body" style="left:96px; top:430px; width:800px;">色数を3色以内に抑制</div>
<div class="el t-body" style="left:96px; top:480px; width:800px;">カバー・セクション区切り・クロージングはダーク背景</div>
<div class="el t-body" style="left:96px; top:530px; width:800px;">セクション番号はローマ数字(I, II, III...)</div>
<div class="el t-section-header" style="left:1020px; top:180px; width:800px; color:var(--color-burgundy);">Don'ts</div>
<div class="el t-body" style="left:1020px; top:230px; width:800px; color:var(--color-burgundy);">派手な色使い(ネオン・パステル・ポップ色)</div>
<div class="el t-body" style="left:1020px; top:280px; width:800px; color:var(--color-burgundy);">太いボーダー(2pt以上)</div>
<div class="el t-body" style="left:1020px; top:330px; width:800px; color:var(--color-burgundy);">大きな角丸(rectRadius > 0.08)</div>
<div class="el t-body" style="left:1020px; top:380px; width:800px; color:var(--color-burgundy);">装飾の詰め込み(スペースが高級感を生む)</div>
<div class="el t-body" style="left:1020px; top:430px; width:800px; color:var(--color-burgundy);">影の多用・3D効果</div>
<div class="el t-body" style="left:1020px; top:480px; width:800px; color:var(--color-burgundy);">タイトル下のアクセントライン</div>
<div class="el t-body" style="left:1020px; top:530px; width:800px; color:var(--color-burgundy);">カラフルな要素・パターン過多</div>
<div class="el" style="left:96px; top:620px; width:1728px; display:flex; align-items:center; gap:16px;">
<div style="flex:1; border-top:var(--divider);"></div>
<div class="diamond"></div>
<div style="flex:1; border-top:var(--divider);"></div>
</div>
<div class="el t-accent" style="left:96px; top:680px; width:1728px; text-align:center;">「Less is more — 余白こそが最高の装飾である」</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flat-shadow — フラットデザイン + 影で構造を作る</title>
<style>
:root {
/* ── Colors ── */
--color-text: #161D26;
--color-sub: #6B7280;
--color-bg: #FFFFFF;
--color-surface: #F4F6F8;
--color-dark: #161D26;
--color-blue: #2563EB;
--color-teal: #0D9488;
--color-purple: #7C3AED;
--color-orange: #EA580C;
--color-green: #16A34A;
--color-amber: #D97706;
--color-red: #DC2626;
--tint-blue: #E4ECFC;
--tint-teal: #E1F2F0;
--tint-purple: #EFE7FC;
--tint-orange: #FCEAE1;
--tint-green: #E3F3E9;
--tint-amber: #FAEEE1;
--tint-red: #FAE4E4;
/* ── Typography ── */
--font-cover-title: 60pt;
--font-cover-subtitle: 32pt;
--font-slide-title: 48pt;
--font-section-title: 48pt;
--font-heading: 36pt;
--font-body: 24pt;
--font-caption: 18pt;
/* ── Card ── */
--card-radius: 12px;
--card-shadow: 0 3px 10px rgba(0,0,0,0.10);
--card-padding: 28px 32px;
--accent-bar-height: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: "Amazon Ember", -apple-system, "Segoe UI", sans-serif;
background: #D1D5DB;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
zoom: 0.7;
}
/* ── Slide: 1920×1080 ── */
.slide {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
background: var(--color-bg);
border-radius: 6px;
box-shadow: 0 6px 36px rgba(0,0,0,0.18);
}
.el { position: absolute; }
/* ── Card ── */
.card {
background: var(--color-surface);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
padding: var(--card-padding);
}
.card-accent {
background: var(--color-surface);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
padding: var(--card-padding);
}
.accent-top {
position: absolute;
top: 0; left: 0; right: 0;
height: var(--accent-bar-height);
border-radius: 0;
}
/* ── Swatch ── */
.swatch {
border-radius: var(--card-radius);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 14px 16px;
font-size: var(--font-caption);
font-weight: 600;
box-shadow: var(--card-shadow);
}
.swatch .hex { opacity: 0.6; font-size: var(--font-caption); margin-top: 2px; }
/* ── Badge ── */
.badge {
display: inline-block;
padding: 8px 20px;
border-radius: 8px;
font-size: var(--font-caption);
font-weight: 600;
color: var(--color-text);
}
/* ── Status ── */
.status-item {
display: flex;
align-items: center;
gap: 12px;
font-size: var(--font-caption);
font-weight: 600;
color: var(--color-text);
margin-bottom: 16px;
}
.dot { width: 16px; height: 16px; border-radius: 50%; }
/* ── Section label ── */
.section-label {
font-size: var(--font-caption);
font-weight: 700;
color: var(--color-sub);
text-transform: uppercase;
letter-spacing: 1px;
}
/* ── Reusable text styles ── */
.t-title { font-size: var(--font-slide-title); font-weight: 700; color: var(--color-text); }
.t-heading { font-size: var(--font-heading); font-weight: 700; color: var(--color-text); }
.t-body { font-size: var(--font-body); color: var(--color-sub); line-height: 1.6; }
.t-caption { font-size: var(--font-caption); color: var(--color-sub); }
</style>
</head>
<body>
<!-- ═══════ Slide 1 — Title Side 1A ═══════ -->
<div class="slide">
<div class="el" style="left:75px; top:430px; width:1686px;">
<div style="width:56px; height:5px; background:var(--color-blue); border-radius:3px; margin-bottom:28px;"></div>
<div style="font-size:var(--font-cover-title); font-weight:700; color:var(--color-text); line-height:1.1;">flat-shadow</div>
</div>
<div class="el" style="left:95px; top:700px; width:1665px;">
<div style="font-size:var(--font-cover-subtitle); color:var(--color-sub); line-height:1.4;">フラットデザイン + 影で構造を作る。軽く、明快で、情報が主役。</div>
</div>
</div>
<!-- ═══════ Slide 2 — Color Palette ═══════ -->
<!-- ═══════ Slide 2 — Design Principles ═══════ -->
<div class="slide">
<div class="el" style="left:64px; top:46px; width:1803px; height:97px;">
<div class="t-title">Design Principles</div>
</div>
<div class="el card" style="left:64px; top:200px; width:880px; height:340px;">
<div class="t-heading" style="margin-bottom:20px;">使うもの</div>
<div class="t-body" style="color:var(--color-text);">
影 — カードを浮かせて境界を作る<br>
アクセントライン — カテゴリの意味を色で伝える<br>
角丸 — 視線が引っかからず滑るように読める<br>
フラットな塗り — 確定値だけ、曖昧さがない
</div>
</div>
<div class="el card" style="left:976px; top:200px; width:880px; height:340px;">
<div class="t-heading" style="margin-bottom:20px;">使わないもの</div>
<div class="t-body" style="color:var(--color-text);">
ボーダー — 重い。影が境界を担う<br>
グラデーション(塗り) — フラットの明快さを壊す<br>
不透明度 — 重なり順で色が変わる。実色で指定する<br>
グロー / ドロップシャドウ過多 — ノイズになる
</div>
</div>
<div class="el" style="left:64px; top:620px; width:1792px;">
<div class="t-body" style="color:var(--color-text); line-height:1.8;">
軽さが信頼を作る。重い装飾は情報を邪魔する。<br>
影だけで構造を見せ、色だけで意味を伝える。
</div>
</div>
</div>
<!-- ═══════ Slide 3 — Base Colors ═══════ -->
<div class="slide">
<div class="el" style="left:64px; top:46px; width:1803px; height:97px;">
<div class="t-title">Base Colors</div>
</div>
<div class="el" style="left:64px; top:200px; display:flex; gap:24px;">
<div class="swatch" style="width:360px; height:240px; background:var(--color-bg); border:1px solid #E5E7EB; color:var(--color-text);">
<span>White</span><span class="hex">#FFFFFF — 背景</span>
</div>
<div class="swatch" style="width:360px; height:240px; background:var(--color-surface); color:var(--color-text);">
<span>Surface</span><span class="hex">#F4F6F8 — カード・コンテナ</span>
</div>
<div class="swatch" style="width:360px; height:240px; background:var(--color-dark); color:#FFFFFF;">
<span>Dark Navy</span><span class="hex">#161D26 — テキスト・ダーク背景</span>
</div>
</div>
<div class="el" style="left:64px; top:540px; width:1792px;">
<div class="section-label" style="margin-bottom:20px;">テキスト色ルール</div>
<div class="t-body" style="color:var(--color-text); line-height:2.0;">
背景色でテキスト色が決まる。迷う余地をなくす。
</div>
</div>
<div class="el card" style="left:64px; top:680px; width:560px; height:160px;">
<div class="t-body" style="color:var(--color-text);">
White / Surface 背景<br>→ <span style="font-weight:700;">Dark Navy</span> テキスト
</div>
</div>
<div class="el card" style="left:648px; top:680px; width:560px; height:160px; background:var(--color-dark);">
<div class="t-body" style="color:#FFFFFF;">
Dark Navy 背景<br>→ <span style="font-weight:700;">White</span> テキスト
</div>
</div>
<div class="el card" style="left:1232px; top:680px; width:624px; height:160px;">
<div class="t-body" style="color:var(--color-sub);">
サブテキスト(補足・キャプション)<br>→ <span style="font-weight:700;">#6B7280</span>
</div>
</div>
</div>
<!-- ═══════ Slide 4 — Accent Colors ═══════ -->
<div class="slide">
<div class="el" style="left:64px; top:46px; width:1803px; height:97px;">
<div class="t-title">Accent & Status Colors</div>
</div>
<div class="el" style="left:64px; top:200px; display:flex; gap:20px;">
<div class="swatch" style="width:280px; height:180px; background:var(--color-blue); color:#FFFFFF;">
<span>Blue</span><span class="hex">#2563EB — 信頼・基盤</span>
</div>
<div class="swatch" style="width:280px; height:180px; background:var(--color-teal); color:#FFFFFF;">
<span>Teal</span><span class="hex">#0D9488 — 成長・展開</span>
</div>
<div class="swatch" style="width:280px; height:180px; background:var(--color-purple); color:#FFFFFF;">
<span>Purple</span><span class="hex">#7C3AED — 先進・変革</span>
</div>
<div class="swatch" style="width:280px; height:180px; background:var(--color-orange); color:#FFFFFF;">
<span>Orange</span><span class="hex">#EA580C — 注意喚起</span>
</div>
</div>
<div class="el t-body" style="left:64px; top:430px; width:1200px; color:var(--color-text); line-height:1.8;">
色相が均等に散らばり、並べたとき明確に区別できる4色。<br>
3カードなら Blue → Teal → Purple。4つ目が要るときだけ Orange。<br>
アクセント色の上はすべて白テキスト。
</div>
<div class="el" style="left:64px; top:620px; display:flex; gap:40px;">
<div>
<div class="section-label" style="margin-bottom:16px;">Status</div>
<div class="status-item"><div class="dot" style="background:var(--color-green);"></div>Green — 完了・正常</div>
<div class="status-item"><div class="dot" style="background:var(--color-amber);"></div>Amber — 注意・進行中</div>
<div class="status-item"><div class="dot" style="background:var(--color-red);"></div>Red — 未着手・課題</div>
</div>
<div>
<div class="section-label" style="margin-bottom:16px;">Tint(バッジ・ラベル背景)</div>
<div style="display:flex; gap:12px; flex-wrap:wrap; width:800px;">
<span class="badge" style="background:var(--tint-blue);">Blue</span>
<span class="badge" style="background:var(--tint-teal);">Teal</span>
<span class="badge" style="background:var(--tint-purple);">Purple</span>
<span class="badge" style="background:var(--tint-orange);">Orange</span>
<span class="badge" style="background:var(--tint-green);">Green</span>
<span class="badge" style="background:var(--tint-amber);">Amber</span>
<span class="badge" style="background:var(--tint-red);">Red</span>
</div>
<div class="t-body" style="margin-top:16px; color:var(--color-text);">各色の12%濃度。不透明度ではなく確定Hex値。</div>
</div>
</div>
</div>
<!-- ═══════ Slide 5 — Containers ═══════ -->
<div class="slide">
<div class="el" style="left:64px; top:46px; width:1803px; height:97px;">
<div class="t-title">Containers</div>
</div>
<div class="el" style="left:64px; top:180px;"><div class="section-label">カテゴリなし — カード + 影のみ</div></div>
<div class="el card" style="left:64px; top:230px; width:580px; height:240px;">
<div class="t-heading" style="margin-bottom:14px;">Card Title</div>
<div class="t-body">分類情報がない場合。<br>角丸カード + 影のみ。</div>
</div>
<div class="el t-body" style="left:680px; top:250px; width:500px; color:var(--color-text); line-height:1.8;">
影で浮かせて境界を作る。<br>枠線は重い。影は軽い。<br>同じ「区切り」でも印象が違う。
</div>
<div class="el" style="left:64px; top:530px;"><div class="section-label">カテゴリ付き — アクセントライン + カード + 影</div></div>
<div class="el card-accent" style="left:64px; top:580px; width:430px; height:380px;">
<div class="accent-top" style="background:var(--color-blue);"></div>
<div class="t-heading" style="margin-bottom:10px;">Step 1</div>
<div class="t-body">アクセントラインが<br>カテゴリの意味を伝える</div>
</div>
<div class="el card-accent" style="left:518px; top:580px; width:430px; height:380px;">
<div class="accent-top" style="background:var(--color-teal);"></div>
<div class="t-heading" style="margin-bottom:10px;">Step 2</div>
<div class="t-body">ラインがカードの角丸を<br>覆い隠す太さ</div>
</div>
<div class="el card-accent" style="left:972px; top:580px; width:430px; height:380px;">
<div class="accent-top" style="background:var(--color-purple);"></div>
<div class="t-heading" style="margin-bottom:10px;">Step 3</div>
<div class="t-body">ラインの位置は用途に応じて自由<br>— 上辺、左辺など</div>
</div>
<div class="el card-accent" style="left:1426px; top:580px; width:430px; height:380px;">
<div class="accent-top" style="background:var(--color-orange);"></div>
<div class="t-heading" style="margin-bottom:10px;">Step 4</div>
<div class="t-body">色がステップの順序を<br>視覚的に伝える</div>
</div>
</div>
<!-- ═══════ Slide 6 — Typography ═══════ -->
<div class="slide">
<div class="el" style="left:64px; top:46px; width:1803px; height:97px;">
<div class="t-title">Typography</div>
</div>
<div class="el" style="left:64px; top:200px; width:1100px;">
<div style="font-size:var(--font-cover-title); font-weight:700; color:var(--color-text); margin-bottom:48px;">Cover Title — 60pt</div>
<div style="font-size:var(--font-slide-title); font-weight:700; color:var(--color-text); margin-bottom:48px;">Slide Title — 48pt</div>
<div style="font-size:var(--font-heading); font-weight:700; color:var(--color-text); margin-bottom:48px;">Heading — 36pt</div>
<div class="t-body" style="color:var(--color-text); margin-bottom:48px;">Body — 24pt — 本文テキスト。情報の中心を担う。</div>
<div class="t-caption">Caption — 18pt — 補足説明、キャプション、ラベル</div>
</div>
<div class="el t-body" style="left:1300px; top:220px; width:560px; color:var(--color-text); line-height:2.0;">
サイズの差が情報の階層を作る。<br>
差が小さいと構造が読めない。<br>
差が大きすぎると本文が小さくなる。<br><br>
最小 18pt。これ以下はプロジェクタで読めない。
</div>
</div>
<!-- ═══════ Slide 7 — Section Divider ═══════ -->
<div class="slide">
<div class="el" style="left:0; top:0; width:1920px; height:1080px; background:var(--color-dark); opacity:0.88;"></div>
<div class="el" style="left:95px; top:300px; width:1547px; z-index:1;">
<div class="t-caption" style="color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; margin-bottom:24px;">Section Divider</div>
<div style="font-size:var(--font-section-title); font-weight:700; color:#FFFFFF; line-height:1.1; margin-bottom:24px;">ここで話が変わる</div>
<div class="t-body" style="font-size:20pt; color:rgba(255,255,255,0.55); line-height:1.8;">
コンテンツスライドは白背景。セクション区切りだけダークにする。<br>
Dark Navy の矩形をスライド全面に敷いて背景を擬似的に作る。<br>
この切り替えが「ここで話が変わる」を視覚的に伝える。
</div>
</div>
</div>
</body>
</html>
AWS Design Guide
Design guide for AWS architecture diagrams and AWS service introduction slides.
Color Palette (AWS default template)
| Name | Color | Usage |
|---|---|---|
| - | #232F3E | AWS Dark Blue |
| - | #FF9900 | AWS Orange |
| - | #00A1C9 | Cyan |
| - | #3F8624 | Green |
| - | #D13212 | Red |
| accent1 | #41B3FF | Light blue |
| accent2 | #AD5CFF | Purple |
| accent3 | #00E500 | Green |
| accent4 | #FF5C85 | Pink |
| accent5 | #FF693C | Orange |
| accent6 | #FBD332 | Yellow |
Icon selection
- General concepts →
search-assets --type general - Actual AWS services →
search-assets -s awsto find the corresponding AWS icon
AWS service category colors
Official colors for representing services by category. Used for group borders, card borders, section color-coding, etc.
| Color | Code | Category |
|---|---|---|
| Purple | #8C4FFF | Analytics, Games, Networking Content Delivery, Serverless |
| Pink | #E7157B | Application Integration, Management & Governance |
| Green | #7AA116 | Cloud Financial Management, Internet of Things, Storage |
| Teal | #01A88D | Artificial Intelligence, End User Computing, Migration & Modernization |
| Orange | #ED7100 | Blockchain, Compute, Containers, Media Services, Quantum Technologies |
| Red | #DD344C | Business Applications, Contact Center, Front End Web & Mobile, Robotics, Security Identity & Compliance |
| Magenta | #C925D1 | Customer Enablement, Databases, Developer Tools, Satellite |
Identify the category from the [category/service] display in search-assets, then look up the color in this table.
Bar charts (vertical, horizontal, stacked) for comparison data.
Use cases
- Latency/cost comparison across services
- Before/after improvement effects
- Component-level breakdown (stacked)
Design points
- Single series: legend is auto-hidden (category axis is sufficient)
numberFormatcontrols data label format ("$#,##0","#,##0", etc.)
Constraints:
- You SHOULD set
dataLabels: falsefor stacked bars with small segments (<10% of total) because labels overlap and become unreadable
Variations
stacked: true→ stacked barhorizontal: true→ horizontal bar- Both → horizontal stacked bar
Style-adjustable properties
gapWidth: gap between bars (default: clustered=80, stacked=60)overlap: overlap between clustered bars (default: -10, negative=gap, positive=overlap)gridlineColor,gridlineWidth,gridlineDash: gridlinesaxisColor,axisWidth: axis linesfontColor,fontSize: textlegendPosition: legend position (bottom/right/left/top)
These can be set either as top-level style object or individually:
"style": {
"gapWidth": 80, "gridlineColor": "#E0E0E0", "gridlineWidth": 0.25,
"gridlineDash": "dash", "axisColor": "#CCC", "axisWidth": 0.5,
"fontColor": "#333", "fontSize": 10, "legendPosition": "bottom"
}Axis control
"valueAxis": {"min": 0, "max": 100, "majorUnit": 20, "gridlines": true, "line": "none", "tickMark": "none"},
"categoryAxis": {"tickMark": "none"}gridlines: falseremoves gridlines entirelyline: "none"hides the axis linetickMark: "none"hides tick marks
Additional properties
title: chart title texttitleFontSize: title font size (default: 14)titleFontColor: title colorpointColors: per-bar colors{"0": "#FF0000", "2": "#00FF00"}(index → color)
JSON: Vertical bar (comparison)
{
"slides": [
{
"layout": "content",
"title": "Latency Comparison",
"elements": [
{
"type": "chart",
"chartType": "bar",
"x": 58, "y": 173, "width": 1804, "height": 750,
"categories": ["Lambda", "ECS", "EC2"],
"series": [
{"name": "p50 (ms)", "values": [12, 45, 89], "color": "#FF9900"},
{"name": "p99 (ms)", "values": [34, 120, 250], "color": "#41B3FF"}
],
"dataLabels": true,
"numberFormat": "#,##0"
}
]
}
]
}JSON: Horizontal bar (cost comparison)
{
"slides": [
{
"layout": "content",
"title": "Monthly Cost",
"elements": [
{
"type": "chart",
"chartType": "bar",
"horizontal": true,
"x": 58, "y": 173, "width": 1804, "height": 750,
"categories": ["Lambda", "ECS", "EC2"],
"series": [
{"name": "Cost ($/month)", "values": [120, 450, 890]}
],
"dataLabels": true,
"numberFormat": "$#,##0"
}
]
}
]
}JSON: Stacked bar (breakdown)
{
"slides": [
{
"layout": "content",
"title": "Cost Breakdown",
"elements": [
{
"type": "chart",
"chartType": "bar",
"stacked": true,
"x": 58, "y": 173, "width": 1804, "height": 750,
"categories": ["Lambda", "ECS", "EC2"],
"series": [
{"name": "Compute", "values": [80, 300, 600]},
{"name": "Storage", "values": [20, 80, 150]},
{"name": "Network", "values": [20, 70, 140]}
]
}
]
}
]
}Design Review Guide
Review preview PNG images and report design quality issues.
Input
1. Preview image path: Directory or file path of PNG images generated from the PPTX 2. Output JSON path: For reference when fixes are needed
Procedure
1. Read preview images
Read slide preview images with fs_read Image mode.
2. Check each slide
Detect issues from the following perspectives:
Clarity:
- Is the slide easy to understand?
- Is the composition effective?
- Are there structural improvements to make?
Layout:
- Are elements overflowing outside the slide?
- Is there unnatural whitespace at the top or bottom?
- Are elements overlapping?
- Is text clipped?
- Is text on shapes positioned at the visual sweet spot (e.g. vertically centered)?
Text:
- Is the text content correct?
- Is text too small to read?
- Are line breaks awkward?
Design:
- Is color contrast sufficient (e.g. dark text on dark background)?
- Is there overall visual consistency?
- Is whitespace used appropriately?
3. Report review results
Report issues in the following format:
## Review Results
### Slide N: Title
- [Issue type] Specific description of the problem
- [Fix suggestion] How to fix it
### No issues
- Slides 1, 3, 5, 7 have no issuesConstraints:
- You MUST read ALL preview images before reporting
- You MUST be specific about what is wrong and where
- You MUST suggest concrete fixes (e.g. "move y coordinate down by 50px", "change fontSize to 20pt")
- You MUST NOT report minor aesthetic preferences as issues — focus on actual problems
Related skills
FAQ
Does it just pick a diagram type?
No. It builds slides from a JSON spec and enforces design rules such as WCAG contrast (4.5:1 for normal text) and minimum font sizes.
Can it skip the brief?
No. The workflow requires an approved brief before reading the next phase, since skipping leads to unfocused slides.