As measured
794 × 1123 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
794 × 1123 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 A4 page to the following specification. - Canvas 794 × 1123 - Margin top 96 right 96 bottom 96 left 96 ## Type (px against a 794px canvas) kicker 13px / 500 / tracking 0.28em / uppercase title 40px / 700 / tracking 0.02em / leading 1.6 lede 15px / 400 / leading 2 client 16px / 500 meta 13px / 400 / tracking 0.04em / tabular numerals ## Colour Ground #12161C / Surface #1B212A / Ink #E8ECF1 / Muted #7C8794 / Accent #B8945A / Rule #2C343F ## Constraints — dropping these breaks it - Two lines of subject at most — a third means you wrote a summary, not a subject - Sink the sender and date to the foot; at the top they get read before the subject - On a dark ground never use pure white — the cover stays on screen longest - Colour only the second line of the subject; colouring both loses the subject 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/cover-a4-centered-subject/pattern.html.
/ai/designs/cover-a4-centered-subject.json
format: a4-portrait
density: low
layout:
kind: centered
canvas:
w: 794
h: 1123
margin:
top: 96
right: 96
bottom: 96
left: 96
type:
kicker:
size: 13
weight: 500
tracking: 0.28em
transform: upper
title:
size: 40
weight: 700
tracking: 0.02em
leading: 1.6
lede:
size: 15
weight: 400
leading: 2
client:
size: 16
weight: 500
meta:
size: 13
weight: 400
tracking: 0.04em
numeric: tabular
colors:
ground: "#12161C"
surface: "#1B212A"
ink: "#E8ECF1"
muted: "#7C8794"
accent: "#B8945A"
rule: "#2C343F"
rules:
- Two lines of subject at most — a third means you wrote a summary, not a subject
- Sink the sender and date to the foot; at the top they get read before the subject
- On a dark ground never use pure white — the cover stays on screen longest
- Colour only the second line of the subject; colouring both loses the subject{
"format": "a4-portrait",
"density": "low",
"layout": {
"kind": "centered",
"canvas": {
"w": 794,
"h": 1123
},
"margin": {
"top": 96,
"right": 96,
"bottom": 96,
"left": 96
}
},
"type": {
"kicker": {
"size": 13,
"weight": 500,
"tracking": "0.28em",
"transform": "upper"
},
"title": {
"size": 40,
"weight": 700,
"tracking": "0.02em",
"leading": 1.6
},
"lede": {
"size": 15,
"weight": 400,
"leading": 2
},
"client": {
"size": 16,
"weight": 500
},
"meta": {
"size": 13,
"weight": 400,
"tracking": "0.04em",
"numeric": "tabular"
}
},
"colors": {
"ground": "#12161C",
"surface": "#1B212A",
"ink": "#E8ECF1",
"muted": "#7C8794",
"accent": "#B8945A",
"rule": "#2C343F"
},
"rules": [
"Two lines of subject at most — a third means you wrote a summary, not a subject",
"Sink the sender and date to the foot; at the top they get read before the subject",
"On a dark ground never use pure white — the cover stays on screen longest",
"Colour only the second line of the subject; colouring both loses the subject"
]
} /designs/cover-a4-centered-subject/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>1 枚企画書の表紙 — 件名を中央に据える</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 は
scripts/render-pattern.mjs でここから実測した値。 */
:root {
--ground: #12161C;
--surface: #1B212A;
--ink: #E8ECF1; /* 純白にしない — 表紙は最も長く映される 1 枚 */
--muted: #7C8794;
--accent: #B8945A;
--rule: #2C343F;
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 794px; height: 1123px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
.artboard {
width: 794px; height: 1123px;
background: var(--ground); color: var(--ink);
padding: 96px; /* → layout.margin */
}
/* 版面そのもの。中身の外接矩形ではないので height を明示する。 */
.content {
height: 100%;
display: grid; grid-template-rows: auto 1fr auto;
}
.kicker { font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
/* 件名は版面の中央に据える。上下の帯は差出人と日付のためだけに空ける。 */
.subject { align-self: center; display: grid; gap: 32px; }
.title { font-size: 40px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.title em { font-style: normal; color: var(--accent); }
.bar { width: 72px; height: 2px; background: var(--accent); }
.lede { font-size: 15px; font-weight: 400; line-height: 2; color: var(--muted); }
.foot { display: grid; gap: 10px; border-top: 1px solid var(--rule); padding-top: 24px; }
.client { font-size: 16px; font-weight: 500; }
.meta { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<p class="kicker" data-type="kicker">PROPOSAL</p>
<div class="subject">
<h1 class="title" data-type="title">問い合わせ対応の<br><em>一次受けを自動化する</em></h1>
<div class="bar"></div>
<p class="lede" data-type="lede">既存の窓口を止めずに、一次受けだけを切り出す方式のご提案</p>
</div>
<div class="foot">
<p class="client" data-type="client">株式会社 ○○○○ 御中</p>
<p class="meta" data-type="meta">2026.09.01 ・ 事業企画部</p>
</div>
</div>
</div>
/designs/cover-a4-centered-subject/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 70 (6a4b2987db56219f)
*
* 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+2e, U+30-32, U+36, U+39, U+41, U+4c, U+4f-50, U+52-53, U+2014, U+25cb, U+3001, U+3044, U+3048, U+3051-3054, U+3059-305c, U+305f-3060, U+306b, U+306e, U+3081, U+308a-308b, U+308f, U+3092, U+3099, U+30fb, U+4e00, U+4e2d, U+4e8b, U+4ef6, U+4f01, U+4f1a, U+51fa, U+5207, U+52d5, U+5316, U+53d7, U+53e3, U+5408, U+540d, U+554f, U+592e, U+5b58, U+5bfe, U+5f0f, U+5fa1, U+5fdc, U+636e, U+63d0, U+65b9, U+65e2, U+66f8, U+679a, U+682a, U+6848, U+696d, U+6b21, U+6b62, U+753b, U+793e, U+7a93, U+7d19, U+81ea, U+8868, U+90e8;
}
@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+2e, U+30-32, U+36, U+39, U+41, U+4c, U+4f-50, U+52-53, U+2014, U+25cb, U+3001, U+3044, U+3048, U+3051-3054, U+3059-305c, U+305f-3060, U+306b, U+306e, U+3081, U+308a-308b, U+308f, U+3092, U+3099, U+30fb, U+4e00, U+4e2d, U+4e8b, U+4ef6, U+4f01, U+4f1a, U+51fa, U+5207, U+52d5, U+5316, U+53d7, U+53e3, U+5408, U+540d, U+554f, U+592e, U+5b58, U+5bfe, U+5f0f, U+5fa1, U+5fdc, U+636e, U+63d0, U+65b9, U+65e2, U+66f8, U+679a, U+682a, U+6848, U+696d, U+6b21, U+6b62, U+753b, U+793e, U+7a93, U+7d19, U+81ea, U+8868, U+90e8;
}
@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+2e, U+30-32, U+36, U+39, U+41, U+4c, U+4f-50, U+52-53, U+2014, U+25cb, U+3001, U+3044, U+3048, U+3051-3054, U+3059-305c, U+305f-3060, U+306b, U+306e, U+3081, U+308a-308b, U+308f, U+3092, U+3099, U+30fb, U+4e00, U+4e2d, U+4e8b, U+4ef6, U+4f01, U+4f1a, U+51fa, U+5207, U+52d5, U+5316, U+53d7, U+53e3, U+5408, U+540d, U+554f, U+592e, U+5b58, U+5bfe, U+5f0f, U+5fa1, U+5fdc, U+636e, U+63d0, U+65b9, U+65e2, U+66f8, U+679a, U+682a, U+6848, U+696d, U+6b21, U+6b62, U+753b, U+793e, U+7a93, U+7d19, U+81ea, U+8868, U+90e8;
}
出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の
寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。
A self-authored pattern. pattern.html is the artboard itself; both cover.png and the
measurements come from it, so the three cannot drift apart.