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 96 right 140 bottom 96 left 140 - 2 equal columns, gap 96 ## Type (px against a 1920px canvas) kicker 20px / 500 / tracking 0.16em name 64px / 700 / tracking 0.06em / leading 1.2 reading 22px / 400 / tracking 0.12em role 26px / 500 / leading 1.6 year 22px / 500 / tabular numerals what 24px / 400 / leading 1.6 todayLabel 20px / 700 todayText 22px / 400 / leading 1.7 folio 16px / 400 / tabular numerals ## Colour Ground #FFFFFF / Surface #F4F6F9 / Ink #131820 / Muted #667183 / Accent #1F5FA8 / Rule #DBE1E9 ## Constraints — dropping these breaks it - Three career lines at most, chosen for today's talk — turn it into a CV and the audience reads a life instead of a reason to listen - The portrait frame is 4:5 with the eyes on the upper third. Until a photo exists, shapes show the ratio and crop — never a drawn person - Put the reading under the name, so nobody mispronounces it for the whole talk - End with one line on today's topic, so the introduction hands over to the talk 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/speaker-profile-portrait/pattern.html.
/ai/designs/speaker-profile-portrait.json
format: slide-16x9
density: medium
layout:
kind: 2-column
canvas:
w: 1920
h: 1080
margin:
top: 96
right: 140
bottom: 96
left: 140
columns:
count: 2
gap: 96
type:
kicker:
size: 20
weight: 500
tracking: 0.16em
name:
size: 64
weight: 700
tracking: 0.06em
leading: 1.2
reading:
size: 22
weight: 400
tracking: 0.12em
role:
size: 26
weight: 500
leading: 1.6
year:
size: 22
weight: 500
numeric: tabular
what:
size: 24
weight: 400
leading: 1.6
todayLabel:
size: 20
weight: 700
todayText:
size: 22
weight: 400
leading: 1.7
folio:
size: 16
weight: 400
numeric: tabular
colors:
ground: "#FFFFFF"
surface: "#F4F6F9"
ink: "#131820"
muted: "#667183"
accent: "#1F5FA8"
rule: "#DBE1E9"
rules:
- Three career lines at most, chosen for today's talk — turn it into a CV and the audience reads a life instead of a reason to listen
- The portrait frame is 4:5 with the eyes on the upper third. Until a photo exists, shapes show the ratio and crop — never a drawn person
- Put the reading under the name, so nobody mispronounces it for the whole talk
- End with one line on today's topic, so the introduction hands over to the talk{
"format": "slide-16x9",
"density": "medium",
"layout": {
"kind": "2-column",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
},
"columns": {
"count": 2,
"gap": 96
}
},
"type": {
"kicker": {
"size": 20,
"weight": 500,
"tracking": "0.16em"
},
"name": {
"size": 64,
"weight": 700,
"tracking": "0.06em",
"leading": 1.2
},
"reading": {
"size": 22,
"weight": 400,
"tracking": "0.12em"
},
"role": {
"size": 26,
"weight": 500,
"leading": 1.6
},
"year": {
"size": 22,
"weight": 500,
"numeric": "tabular"
},
"what": {
"size": 24,
"weight": 400,
"leading": 1.6
},
"todayLabel": {
"size": 20,
"weight": 700
},
"todayText": {
"size": 22,
"weight": 400,
"leading": 1.7
},
"folio": {
"size": 16,
"weight": 400,
"numeric": "tabular"
}
},
"colors": {
"ground": "#FFFFFF",
"surface": "#F4F6F9",
"ink": "#131820",
"muted": "#667183",
"accent": "#1F5FA8",
"rule": "#DBE1E9"
},
"rules": [
"Three career lines at most, chosen for today's talk — turn it into a CV and the audience reads a life instead of a reason to listen",
"The portrait frame is 4:5 with the eyes on the upper third. Until a photo exists, shapes show the ratio and crop — never a drawn person",
"Put the reading under the name, so nobody mispronounces it for the whole talk",
"End with one line on today's topic, so the introduction hands over to the talk"
]
} /designs/speaker-profile-portrait/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: #FFFFFF;
--surface: #F4F6F9;
--ink: #131820;
--muted: #667183;
--accent: #1F5FA8;
--rule: #DBE1E9;
/* 写真の差し替え枠。人物の写真は置かず、比率と切り抜き位置だけを図形で示す */
--frame-shade: color-mix(in srgb, var(--accent) 14%, var(--surface));
--frame-figure: color-mix(in srgb, var(--accent) 32%, var(--surface));
}
* { 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: 96px 140px; /* → layout.margin */
}
.content { height: 100%; display: grid; grid-template-rows: 1fr auto; row-gap: 40px; }
.body { display: grid; grid-template-columns: 600px 1fr; column-gap: 96px; align-items: center; }
/* 4:5。顔は上から 1/3 の線に目が来るよう、頭の円を上寄せに置く */
.portrait { width: 600px; height: 750px; background: var(--frame-shade); position: relative; overflow: hidden; }
.portrait svg { position: absolute; inset: 0; }
.kicker { font-size: 20px; font-weight: 500; letter-spacing: .16em; color: var(--accent); }
.name { font-size: 64px; font-weight: 700; letter-spacing: .06em; margin-top: 20px; line-height: 1.2; }
.reading { font-size: 22px; font-weight: 400; letter-spacing: .12em; color: var(--muted); margin-top: 8px; }
.role { font-size: 26px; font-weight: 500; margin-top: 28px; line-height: 1.6; }
.career { margin-top: 48px; border-top: 1px solid var(--rule); }
.item { display: grid; grid-template-columns: 140px 1fr; column-gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.year { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--muted); }
.what { font-size: 24px; font-weight: 400; line-height: 1.6; }
.what b { font-weight: 700; }
.today { margin-top: 40px; display: flex; gap: 16px; align-items: baseline; }
.todayLabel { font-size: 20px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.todayText { font-size: 22px; font-weight: 400; line-height: 1.7; }
.folio { display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 20px;
font-size: 16px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="body">
<div class="portrait" data-col="1">
<svg width="600" height="750" viewBox="0 0 600 750" aria-hidden="true">
<circle cx="300" cy="290" r="128" fill="var(--frame-figure)"/>
<path d="M60 750 C 60 560, 170 470, 300 470 C 430 470, 540 560, 540 750 Z" fill="var(--frame-figure)"/>
</svg>
</div>
<div data-col="2">
<p class="kicker" data-type="kicker">本日の説明者</p>
<h1 class="name" data-type="name">佐伯 美和</h1>
<p class="reading" data-type="reading">さえき みわ</p>
<p class="role" data-type="role">カスタマーサポート部 部長／問い合わせ窓口一本化の責任者</p>
<div class="career">
<div class="item">
<p class="year" data-type="year">2014</p>
<p class="what" data-type="what">入社。法人向け製品の電話窓口を 4 年担当</p>
</div>
<div class="item">
<p class="year">2019</p>
<p class="what">問い合わせ管理の仕組みを刷新。<b>一次回答の時間を 3 割短縮</b></p>
</div>
<div class="item">
<p class="year">2025</p>
<p class="what">現職。4 つに分かれた窓口の統合計画を立ち上げる</p>
</div>
</div>
<div class="today">
<p class="todayLabel" data-type="todayLabel">今日話すこと</p>
<p class="todayText" data-type="todayText">なぜ窓口を 1 つにするのか、来月から何が変わるのか</p>
</div>
</div>
</div>
<div class="folio" data-type="folio"><span>問い合わせ窓口の一本化 ／ 社内説明会</span><span>01 / 10</span></div>
</div>
</div>
/designs/speaker-profile-portrait/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 119 (4dfd68cac8f54589)
*
* 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+20, U+2f-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3056, U+3059-305c, U+305f-3062, U+3064-3065, U+3068-306b, U+306e, U+307f, U+3089, U+308b-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b6, U+30b9-30ba, U+30bf-30c0, U+30c8-30c9, U+30db-30de, U+30fc, U+4e00, U+4e0a, U+4eba, U+4eca-4ecb, U+4ed5, U+4efb, U+4f1a, U+4f2f, U+4f50, U+4f55, U+5165, U+5185, U+5199, U+5206, U+5237, U+5272, U+5316, U+53e3, U+5408, U+5411, U+548c, U+54c1, U+554f, U+56de, U+58c7, U+5909, U+5e74, U+5f53, U+62c5, U+65b0, U+65e5, U+660e, U+6642, U+6708, U+672c, U+6765, U+67a0, U+683c, U+6b21, U+6b74, U+6cd5, U+73fe, U+7406, U+753b, U+767b, U+771f, U+77ed, U+793e, U+7a93, U+7acb, U+7b54, U+7ba1, U+7d39, U+7d44, U+7d4c, U+7d71, U+7e2e, U+7f8e, U+8005, U+8077, U+88fd, U+8a08, U+8a71, U+8aac, U+8cac, U+8cc7, U+90e8, U+9577, U+9593, U+96fb, U+9854, 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+20, U+2f-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3056, U+3059-305c, U+305f-3062, U+3064-3065, U+3068-306b, U+306e, U+307f, U+3089, U+308b-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b6, U+30b9-30ba, U+30bf-30c0, U+30c8-30c9, U+30db-30de, U+30fc, U+4e00, U+4e0a, U+4eba, U+4eca-4ecb, U+4ed5, U+4efb, U+4f1a, U+4f2f, U+4f50, U+4f55, U+5165, U+5185, U+5199, U+5206, U+5237, U+5272, U+5316, U+53e3, U+5408, U+5411, U+548c, U+54c1, U+554f, U+56de, U+58c7, U+5909, U+5e74, U+5f53, U+62c5, U+65b0, U+65e5, U+660e, U+6642, U+6708, U+672c, U+6765, U+67a0, U+683c, U+6b21, U+6b74, U+6cd5, U+73fe, U+7406, U+753b, U+767b, U+771f, U+77ed, U+793e, U+7a93, U+7acb, U+7b54, U+7ba1, U+7d39, U+7d44, U+7d4c, U+7d71, U+7e2e, U+7f8e, U+8005, U+8077, U+88fd, U+8a08, U+8a71, U+8aac, U+8cac, U+8cc7, U+90e8, U+9577, U+9593, U+96fb, U+9854, 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+20, U+2f-35, U+39, U+2014, U+3001-3002, U+3044, U+3048, U+304b-304e, U+3051-3056, U+3059-305c, U+305f-3062, U+3064-3065, U+3068-306b, U+306e, U+307f, U+3089, U+308b-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b6, U+30b9-30ba, U+30bf-30c0, U+30c8-30c9, U+30db-30de, U+30fc, U+4e00, U+4e0a, U+4eba, U+4eca-4ecb, U+4ed5, U+4efb, U+4f1a, U+4f2f, U+4f50, U+4f55, U+5165, U+5185, U+5199, U+5206, U+5237, U+5272, U+5316, U+53e3, U+5408, U+5411, U+548c, U+54c1, U+554f, U+56de, U+58c7, U+5909, U+5e74, U+5f53, U+62c5, U+65b0, U+65e5, U+660e, U+6642, U+6708, U+672c, U+6765, U+67a0, U+683c, U+6b21, U+6b74, U+6cd5, U+73fe, U+7406, U+753b, U+767b, U+771f, U+77ed, U+793e, U+7a93, U+7acb, U+7b54, U+7ba1, U+7d39, U+7d44, U+7d4c, U+7d71, U+7e2e, U+7f8e, U+8005, U+8077, U+88fd, U+8a08, U+8a71, U+8aac, U+8cac, U+8cc7, U+90e8, U+9577, U+9593, U+96fb, U+9854, U+ff0f;
}
出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の
layout / type / colors はどちらもそこから機械的に測った結果。一式「基本の 10 枚」の 1 枚で、
配色は system-project 一式の淡地・濃地と同じ 2 組に揃えてある。
A self-authored pattern. pattern.html is the artboard itself; both cover.png and the
measurements in the frontmatter are derived from it. One of the ten basic slides, drawn in the
same two palettes as the system-project deck so the two can be mixed.