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 ## Emphasis row 5 only, by fill + rule and nothing else ## Type (px against a 1920px canvas) title 44px / 700 / tracking 0.01em / leading 1.3 window 17px / 500 / tabular numerals time 24px / 700 / tabular numerals task 22px / 500 / leading 1.5 owner 16px / 400 note 16px / 400 / leading 1.7 fkey 14px / 500 / tracking 0.14em fval 18px / 500 / leading 1.6 / tabular numerals ## Colour Ground #111722 / Surface #1A2231 / Ink #E9EDF4 / Muted #8894A6 / Accent #5AA2E8 / Rule #2B3445 ## Constraints — dropping these breaks it - Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night - Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached - Put durations in the note instead of making the reader subtract clock times at three in the morning - State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps - Always show the fallback date; without one, the rollback decision itself gets postponed 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/cutover-runbook-timeline/pattern.html.
/ai/designs/cutover-runbook-timeline.json
format: slide-16x9
density: high
layout:
kind: timeline
canvas:
w: 1920
h: 1080
margin:
top: 96
right: 140
bottom: 96
left: 140
emphasis:
row: 5
via:
- fill
- rule
type:
title:
size: 44
weight: 700
tracking: 0.01em
leading: 1.3
window:
size: 17
weight: 500
numeric: tabular
time:
size: 24
weight: 700
numeric: tabular
task:
size: 22
weight: 500
leading: 1.5
owner:
size: 16
weight: 400
note:
size: 16
weight: 400
leading: 1.7
fkey:
size: 14
weight: 500
tracking: 0.14em
fval:
size: 18
weight: 500
leading: 1.6
numeric: tabular
colors:
ground: "#111722"
surface: "#1A2231"
ink: "#E9EDF4"
muted: "#8894A6"
accent: "#5AA2E8"
rule: "#2B3445"
rules:
- Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night
- Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached
- Put durations in the note instead of making the reader subtract clock times at three in the morning
- State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps
- Always show the fallback date; without one, the rollback decision itself gets postponed{
"format": "slide-16x9",
"density": "high",
"layout": {
"kind": "timeline",
"canvas": {
"w": 1920,
"h": 1080
},
"margin": {
"top": 96,
"right": 140,
"bottom": 96,
"left": 140
},
"emphasis": {
"row": 5,
"via": [
"fill",
"rule"
]
}
},
"type": {
"title": {
"size": 44,
"weight": 700,
"tracking": "0.01em",
"leading": 1.3
},
"window": {
"size": 17,
"weight": 500,
"numeric": "tabular"
},
"time": {
"size": 24,
"weight": 700,
"numeric": "tabular"
},
"task": {
"size": 22,
"weight": 500,
"leading": 1.5
},
"owner": {
"size": 16,
"weight": 400
},
"note": {
"size": 16,
"weight": 400,
"leading": 1.7
},
"fkey": {
"size": 14,
"weight": 500,
"tracking": "0.14em"
},
"fval": {
"size": 18,
"weight": 500,
"leading": 1.6,
"numeric": "tabular"
}
},
"colors": {
"ground": "#111722",
"surface": "#1A2231",
"ink": "#E9EDF4",
"muted": "#8894A6",
"accent": "#5AA2E8",
"rule": "#2B3445"
},
"rules": [
"Give the rollback call a clock time and a row of its own in the sequence — a rollback policy kept on a separate page is not opened on the night",
"Name the team, not the person, on every row — plan for the night when the person you had in mind cannot be reached",
"Put durations in the note instead of making the reader subtract clock times at three in the morning",
"State the outage window beside the title — what gets agreed is how long business stops, not the sum of the steps",
"Always show the fallback date; without one, the rollback decision itself gets postponed"
]
} /designs/cutover-runbook-timeline/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;
--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: 96px 140px; /* → layout.margin */
}
.content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
.title { font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.window { font-size: 17px; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.runbook { align-self: center; display: grid; }
/* 時刻・工程・担当・判断の 4 列。時刻列を固定幅にして、
左端を縦に読めば当日の時系列だけを追えるようにする。 */
.step { display: grid; grid-template-columns: 190px 1fr 260px 300px; align-items: baseline; gap: 34px; padding: 22px 24px; border-left: 2px solid var(--rule); }
.time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.task { font-size: 22px; font-weight: 500; line-height: 1.5; }
.owner { font-size: 16px; font-weight: 400; color: var(--muted); }
.note { font-size: 16px; font-weight: 400; line-height: 1.7; color: var(--muted); }
/* 戻す判断の時刻だけを塗る。当日いちばん重い意思決定がどこかを、
手順の並びの中で 1 回だけ言う。 */
.step[data-emphasis] { background: var(--surface); border-left-color: var(--accent); }
.step[data-emphasis] .time,
.step[data-emphasis] .task { color: var(--accent); }
.step[data-emphasis] .note { color: var(--ink); }
/* 業務停止中の工程は時刻を太字のまま、担当と備考を沈める。 */
.step[data-quiet] .task { color: var(--muted); }
.foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border-top: 1px solid var(--rule); padding-top: 26px; }
.fkey { font-size: 14px; font-weight: 500; letter-spacing: .14em; color: var(--muted); }
.fval { font-size: 18px; font-weight: 500; line-height: 1.6; margin-top: 10px; font-variant-numeric: tabular-nums; }
</style>
<div class="artboard" data-artboard>
<div class="content" data-content>
<div class="head">
<h1 class="title" data-type="title">切替当日の手順</h1>
<p class="window" data-type="window">2027.11.13（土）18:00 - 11.14（日）08:00 ／ 業務停止 14 時間</p>
</div>
<div class="runbook">
<div class="step" data-row="1">
<p class="time" data-type="time">18:00</p>
<p class="task" data-type="task">現行システムの受付停止</p>
<p class="owner" data-type="owner">御社 情報システム部</p>
<p class="note" data-type="note">停止のお知らせは 11.06 に掲示</p>
</div>
<div class="step" data-row="2" data-quiet>
<p class="time">18:30</p>
<p class="task">最終バックアップの取得</p>
<p class="owner">弊社 基盤チーム</p>
<p class="note">所要 90 分。ここまでは戻せる</p>
</div>
<div class="step" data-row="3" data-quiet>
<p class="time">20:00</p>
<p class="task">データ移行の実行</p>
<p class="owner">弊社 基盤チーム</p>
<p class="note">所要 5 時間。件数照合まで含む</p>
</div>
<div class="step" data-row="4" data-quiet>
<p class="time">01:00</p>
<p class="task">移行結果の照合・確認</p>
<p class="owner">合同</p>
<p class="note">差分 0 件を確認して次へ</p>
</div>
<div class="step" data-row="5" data-emphasis="fill rule">
<p class="time">03:00</p>
<p class="task">続行か切戻しかの判断</p>
<p class="owner">合同 PMO ／ 御社責任者</p>
<p class="note">この時刻を過ぎると切戻しが翌営業日に間に合いません</p>
</div>
<div class="step" data-row="6">
<p class="time">03:30</p>
<p class="task">新システムの公開・疎通確認</p>
<p class="owner">弊社 基盤チーム</p>
<p class="note">連携先 4 系統の疎通まで</p>
</div>
<div class="step" data-row="7">
<p class="time">06:00</p>
<p class="task">業務確認（御社 6 名）</p>
<p class="owner">御社 営業推進部</p>
<p class="note">受注登録・照会・帳票の 3 経路</p>
</div>
<div class="step" data-row="8">
<p class="time">08:00</p>
<p class="task">受付再開</p>
<p class="owner">御社 情報システム部</p>
<p class="note">以後 2 週間は合同で監視</p>
</div>
</div>
<div class="foot">
<div>
<p class="fkey" data-type="fkey">切戻しの所要</p>
<p class="fval" data-type="fval">3 時間（03:00 判断なら 06:00 復旧）</p>
</div>
<div>
<p class="fkey">当日の連絡手段</p>
<p class="fval">合同 PMO の常設回線</p>
</div>
<div>
<p class="fkey">予備日</p>
<p class="fval">2027.11.20（土）同時刻</p>
</div>
</div>
</div>
</div>
/designs/cutover-runbook-timeline/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 157 (21d99d8f9303b5dd)
*
* 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-3a, U+4d, U+4f-50, U+2014, U+3002, U+3044, U+304a-3050, U+3053-3054, U+3057-305c, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3080, U+3089, U+308b, U+3092-3093, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30fb-30fc, U+4e88, U+4ed8, U+4ee5, U+4ef6, U+4efb, U+4f1a, U+505c, U+5099, U+5148, U+516c, U+518d, U+5206-5207, U+5224, U+523b, U+52d9, U+53d6-53d7, U+5408, U+540c-540d, U+542b, U+55b6, U+56de, U+571f, U+57fa, U+5831, U+5b9f, U+5dee, U+5e33, U+5e38, U+5f0a, U+5f53, U+5f8c, U+5f97, U+5fa1, U+5fa9, U+60c5, U+623b, U+6240, U+624b, U+63a8, U+63b2, U+643a, U+6570, U+65ad, U+65b0, U+65e5, U+65e7, U+6642, U+66ff-6700, U+679c, U+696d, U+6b21, U+6b62, U+6bb5, U+6ce8, U+7167, U+73fe, U+758e, U+767b, U+76e3-76e4, U+77e5, U+78ba, U+793a, U+793e, U+7968, U+79fb, U+7cfb, U+7d42, U+7d4c, U+7d50, U+7d61, U+7d71, U+7d9a, U+7dda, U+7f6e, U+7fcc, U+8005, U+884c, U+8981, U+8996, U+8a2d, U+8a8d, U+8cac, U+8def, U+901a, U+9023, U+9031-9032, U+904e, U+90e8, U+9332, U+958b, U+9593, U+9806, U+ff08-ff09, 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-3a, U+4d, U+4f-50, U+2014, U+3002, U+3044, U+304a-3050, U+3053-3054, U+3057-305c, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3080, U+3089, U+308b, U+3092-3093, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30fb-30fc, U+4e88, U+4ed8, U+4ee5, U+4ef6, U+4efb, U+4f1a, U+505c, U+5099, U+5148, U+516c, U+518d, U+5206-5207, U+5224, U+523b, U+52d9, U+53d6-53d7, U+5408, U+540c-540d, U+542b, U+55b6, U+56de, U+571f, U+57fa, U+5831, U+5b9f, U+5dee, U+5e33, U+5e38, U+5f0a, U+5f53, U+5f8c, U+5f97, U+5fa1, U+5fa9, U+60c5, U+623b, U+6240, U+624b, U+63a8, U+63b2, U+643a, U+6570, U+65ad, U+65b0, U+65e5, U+65e7, U+6642, U+66ff-6700, U+679c, U+696d, U+6b21, U+6b62, U+6bb5, U+6ce8, U+7167, U+73fe, U+758e, U+767b, U+76e3-76e4, U+77e5, U+78ba, U+793a, U+793e, U+7968, U+79fb, U+7cfb, U+7d42, U+7d4c, U+7d50, U+7d61, U+7d71, U+7d9a, U+7dda, U+7f6e, U+7fcc, U+8005, U+884c, U+8981, U+8996, U+8a2d, U+8a8d, U+8cac, U+8def, U+901a, U+9023, U+9031-9032, U+904e, U+90e8, U+9332, U+958b, U+9593, U+9806, U+ff08-ff09, 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-3a, U+4d, U+4f-50, U+2014, U+3002, U+3044, U+304a-3050, U+3053-3054, U+3057-305c, U+3066-306b, U+306e-3071, U+3078-307a, U+307e, U+3080, U+3089, U+308b, U+3092-3093, U+3099-309a, U+30a2, U+30af-30b0, U+30b7-30ba, U+30bf-30c3, U+30c6-30c7, U+30cf-30d1, U+30d5-30d7, U+30e0, U+30fb-30fc, U+4e88, U+4ed8, U+4ee5, U+4ef6, U+4efb, U+4f1a, U+505c, U+5099, U+5148, U+516c, U+518d, U+5206-5207, U+5224, U+523b, U+52d9, U+53d6-53d7, U+5408, U+540c-540d, U+542b, U+55b6, U+56de, U+571f, U+57fa, U+5831, U+5b9f, U+5dee, U+5e33, U+5e38, U+5f0a, U+5f53, U+5f8c, U+5f97, U+5fa1, U+5fa9, U+60c5, U+623b, U+6240, U+624b, U+63a8, U+63b2, U+643a, U+6570, U+65ad, U+65b0, U+65e5, U+65e7, U+6642, U+66ff-6700, U+679c, U+696d, U+6b21, U+6b62, U+6bb5, U+6ce8, U+7167, U+73fe, U+758e, U+767b, U+76e3-76e4, U+77e5, U+78ba, U+793a, U+793e, U+7968, U+79fb, U+7cfb, U+7d42, U+7d4c, U+7d50, U+7d61, U+7d71, U+7d9a, U+7dda, U+7f6e, U+7fcc, U+8005, U+884c, U+8981, U+8996, U+8a2d, U+8a8d, U+8cac, U+8def, U+901a, U+9023, U+9031-9032, U+904e, U+90e8, U+9332, U+958b, U+9593, U+9806, U+ff08-ff09, U+ff0f;
}
本番切替の当日手順を 1 枚にした版。pattern.html が版そのもので、cover.png と frontmatter の
寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。
The cutover runbook, on one page. pattern.html is the artboard itself; both cover.png and the
measurements come from it, so the three cannot drift apart.
--muted に落とす。止まっている時間帯が塊として見える