As measured
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1920 × 1080 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one slide to the following specification. - Canvas 1920 × 1080 - Margin top 116 right 140 bottom 116 left 140 ## Type (px against a 1920px canvas) doctype 20px / 700 / tracking 0.08em edition 17px / 400 / tracking 0.04em / tabular numerals kicker 15px / 500 / tracking 0.3em / uppercase title 84px / 700 / tracking 0.01em / leading 1.28 lede 20px / 400 / leading 1.9 label 14px / 500 / tracking 0.14em value 21px / 500 / tabular numerals ## Colour Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445 ## Constraints — dropping these breaks it - Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold - The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position - Colour only the second line of the subject — the first names the project, the second names what this deck covers - Never pure white on a dark ground — the cover stays on screen longer than any other slide Replace the content with [your content]. Keep the measurements and colours as given. For an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/deck-cover-project-brief/pattern.html.
/ai/designs/deck-cover-project-brief.json
format: slide-16x9
density: low
layout:
kind: stack
canvas:
w: 1920
h: 1080
margin:
top: 116
right: 140
bottom: 116
left: 140
type:
doctype:
size: 20
weight: 700
tracking: 0.08em
edition:
size: 17
weight: 400
tracking: 0.04em
numeric: tabular
kicker:
size: 15
weight: 500
tracking: 0.3em
transform: upper
title:
size: 84
weight: 700
tracking: 0.01em
leading: 1.28
lede:
size: 20
weight: 400
leading: 1.9
label:
size: 14
weight: 500
tracking: 0.14em
value:
size: 21
weight: 500
numeric: tabular
colors:
ground: "#111722"
surface: "#1A2231"
ink: "#E9EDF4"
muted: "#8894A6"
accent: "#5AA2E8"
rule: "#2B3445"
rules:
- Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold
- "The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position"
- Colour only the second line of the subject — the first names the project, the second names what this deck covers
- Never pure white on a dark ground — the cover stays on screen longer than any other slide{
"format": "slide-16x9",
"density": "low",
"layout": {
"kind": "stack",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 116,
"right": 140,
"bottom": 116,
"left": 140
}
},
"type": {
"doctype": {
"size": 20,
"weight": 700,
"tracking": "0.08em"
},
"edition": {
"size": 17,
"weight": 400,
"tracking": "0.04em",
"numeric": "tabular"
},
"kicker": {
"size": 15,
"weight": 500,
"tracking": "0.3em",
"transform": "upper"
},
"title": {
"size": 84,
"weight": 700,
"tracking": "0.01em",
"leading": 1.28
},
"lede": {
"size": 20,
"weight": 400,
"leading": 1.9
},
"label": {
"size": 14,
"weight": 500,
"tracking": "0.14em"
},
"value": {
"size": 21,
"weight": 500,
"numeric": "tabular"
}
},
"colors": {
"ground": "#111722",
"surface": "#1A2231",
"ink": "#E9EDF4",
"muted": "#8894A6",
"accent": "#5AA2E8",
"rule": "#2B3445"
},
"rules": [
"Keep the four issue fields — a project deck goes out many times under the same subject, and without version, date and recipient no one can tell which copy they hold",
"The document type is the one thing allowed to be read before the subject: a small filled box, separated from the subject by size rather than position",
"Colour only the second line of the subject — the first names the project, the second names what this deck covers",
"Never pure white on a dark ground — the cover stays on screen longer than any other slide"
]
} /designs/deck-cover-project-brief/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>案件資料の表紙 — 件名の下に発行情報を並べる</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* この版そのもの。index.md の layout / type / colors は、この HTML を
scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
:root {
--ground: #111722;
--surface: #1A2231;
--ink: #E9EDF4; /* 純白にしない — 表紙は最も長く映される 1 枚 */
--muted: #8894A6;
--accent: #5AA2E8;
--rule: #2B3445;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1920px; height: 1080px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
.artboard {
width: 1920px; height: 1080px;
background: var(--ground); color: var(--ink);
padding: 116px 140px; /* → layout.margin */
}
/* [data-content] は版面（安全領域）そのもので、中身の外接矩形ではない。
height:100% で余白と一対一に対応させる。 */
.content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
/* 上端は「この紙が何か」だけ。件名より先に読まれてよい唯一の情報。 */
.head { display: flex; align-items: baseline; gap: 28px; }
.doctype {
font-size: 20px; font-weight: 700; letter-spacing: .08em;
background: var(--surface); border: 1px solid var(--rule); padding: 12px 26px;
}
.edition { font-size: 17px; font-weight: 400; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.subject { align-self: center; display: grid; gap: 34px; max-width: 1180px; }
.kicker { font-size: 15px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.title { font-size: 84px; font-weight: 700; line-height: 1.28; letter-spacing: .01em; }
/* 色は件名の 2 行目だけ。1 行目にも置くとどちらが主語か分からなくなる。 */
.title em { font-style: normal; color: var(--accent); }
.lede { font-size: 20px; font-weight: 400; line-height: 1.9; color: var(--muted); }
/* 発行情報は 4 つで固定する。案件資料は同じ件名で何度も出るので、
どの版をいつ誰に出したかが表紙で分からないと現物が特定できない。 */
.foot { border-top: 1px solid var(--rule); padding-top: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }
.label { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.value { font-size: 21px; font-weight: 500; margin-top: 14px; font-variant-numeric: tabular-nums; }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="head">
<p class="doctype" data-type="doctype">提案書</p>
<p class="edition" data-type="edition">第 1.2 版 ／ 2026.09.15 改訂</p>
</div>
<div class="subject">
<p class="kicker" data-type="kicker">RFP RESPONSE</p>
<h1 class="title" data-type="title">受発注システムの刷新<br><em>第 1 期 実施方針</em></h1>
<p class="lede" data-type="lede">現行の受注業務を止めないことを前提に、対象範囲・体制・工程・移行手順をまとめています。</p>
</div>
<div class="foot">
<div>
<p class="label" data-type="label">提出先</p>
<p class="value" data-type="value">株式会社 ○○商事 御中</p>
</div>
<div>
<p class="label">提出日</p>
<p class="value">2026 年 9 月 15 日</p>
</div>
<div>
<p class="label">文書番号</p>
<p class="value">PRP-2026-0915-02</p>
</div>
<div>
<p class="label">作成</p>
<p class="value">システム開発本部</p>
</div>
</div>
</div>
</div>
/designs/deck-cover-project-brief/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 103 (432f5ed07f549fb7)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+2d-2e, U+30-32, U+35-36, U+39, U+45-46, U+4e-50, U+52-53, U+2014, U+25cb, U+3001-3002, U+3044, U+3053-3054, U+3059-305a, U+3066-306b, U+306e, U+3078-3079, U+307e, U+3081, U+308b, U+3092, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e0b, U+4e26, U+4e2d, U+4e8b, U+4ef6, U+4f1a, U+4f53, U+4f5c, U+5148, U+51fa, U+5236-5237, U+524d, U+52d9, U+53d7, U+53f7, U+540d, U+5546, U+56f2, U+5831, U+5b9f, U+5bfe, U+5de5, U+5e74, U+5f0f, U+5fa1, U+60c5, U+6210, U+624b, U+63d0, U+6539, U+6587, U+6599, U+65b0, U+65b9, U+65bd, U+65e5, U+66f8, U+6708, U+671f, U+672c, U+682a, U+6848, U+696d, U+6b62, U+6ce8, U+7248, U+73fe, U+756a, U+767a, U+793e, U+79fb, U+7a0b, U+7b2c, U+7bc4, U+7d19, U+884c, U+8868, U+8a02, U+8c61, U+8cc7, U+90e8, U+91dd, U+958b, U+9806, U+ff0f;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-1.woff2) format('woff2');
unicode-range: U+2d-2e, U+30-32, U+35-36, U+39, U+45-46, U+4e-50, U+52-53, U+2014, U+25cb, U+3001-3002, U+3044, U+3053-3054, U+3059-305a, U+3066-306b, U+306e, U+3078-3079, U+307e, U+3081, U+308b, U+3092, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e0b, U+4e26, U+4e2d, U+4e8b, U+4ef6, U+4f1a, U+4f53, U+4f5c, U+5148, U+51fa, U+5236-5237, U+524d, U+52d9, U+53d7, U+53f7, U+540d, U+5546, U+56f2, U+5831, U+5b9f, U+5bfe, U+5de5, U+5e74, U+5f0f, U+5fa1, U+60c5, U+6210, U+624b, U+63d0, U+6539, U+6587, U+6599, U+65b0, U+65b9, U+65bd, U+65e5, U+66f8, U+6708, U+671f, U+672c, U+682a, U+6848, U+696d, U+6b62, U+6ce8, U+7248, U+73fe, U+756a, U+767a, U+793e, U+79fb, U+7a0b, U+7b2c, U+7bc4, U+7d19, U+884c, U+8868, U+8a02, U+8c61, U+8cc7, U+90e8, U+91dd, U+958b, U+9806, U+ff0f;
}
@font-face {
font-family: 'Zen Kaku Gothic New';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-2.woff2) format('woff2');
unicode-range: U+2d-2e, U+30-32, U+35-36, U+39, U+45-46, U+4e-50, U+52-53, U+2014, U+25cb, U+3001-3002, U+3044, U+3053-3054, U+3059-305a, U+3066-306b, U+306e, U+3078-3079, U+307e, U+3081, U+308b, U+3092, U+3099, U+30b7-30ba, U+30c6-30c7, U+30e0, U+30fb, U+4e0b, U+4e26, U+4e2d, U+4e8b, U+4ef6, U+4f1a, U+4f53, U+4f5c, U+5148, U+51fa, U+5236-5237, U+524d, U+52d9, U+53d7, U+53f7, U+540d, U+5546, U+56f2, U+5831, U+5b9f, U+5bfe, U+5de5, U+5e74, U+5f0f, U+5fa1, U+60c5, U+6210, U+624b, U+63d0, U+6539, U+6587, U+6599, U+65b0, U+65b9, U+65bd, U+65e5, U+66f8, U+6708, U+671f, U+672c, U+682a, U+6848, U+696d, U+6b62, U+6ce8, U+7248, U+73fe, U+756a, U+767a, U+793e, U+79fb, U+7a0b, U+7b2c, U+7bc4, U+7d19, U+884c, U+8868, U+8a02, U+8c61, U+8cc7, U+90e8, U+91dd, U+958b, U+9806, U+ff0f;
}
システム開発案件の一式（RFP 回答 〜 リリース報告）で使う表紙。pattern.html が版そのもので、
cover.png と frontmatter の寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。
The cover for a system-development deck. pattern.html is the artboard itself; both cover.png
and the measurements come from it, so the three cannot drift apart.
1fr で空ける。件名の行数が増えても上下の帯は動かない提案書 を差し替えるだけで通しで使える）