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 56 right 56 bottom 56 left 56 - 6 equal columns, gap 12 ## Type (px against a 794px canvas) title 34px / 700 / tracking 0.01em lede 14px / 400 / leading 1.8 band-name 11px / 500 / tracking 0.16em / uppercase role 13px / 500 var 11px / 400 measure 11px / 400 / tabular numerals sample-a 40px / 700 / tracking 0.01em sample-b 24px / 500 sample-c 15px / 400 / leading 1.8 foot 12px / 400 / leading 1.7 ## Colour Ground #FDFCFD / Surface #F3F1F4 / Ink #1A1620 / Muted #6C6572 / Accent #8A2E62 / Rule #E0DBE3 ## Constraints — dropping these breaks it - Derive the ramp from the accent at fixed ratios instead of picking each step: hand-picked steps keep the old hue when the palette is swapped - Never print the value beside a swatch — print the role name and the ratio. Values change with the palette; names and ratios do not - Put no text on a swatch: swatch-against-text is not one of the judged role pairs, so it can go unreadable while the checks stay green - Align roles and ramp to the same six columns — different counts read as two unrelated systems - Never send lowercase Latin through a case transform: the bundled subset is cut from the untransformed source, so letters that exist only on screen fall back to whatever the reader has 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/specimen-sheet-derived-ramp/pattern.html.
/ai/designs/specimen-sheet-derived-ramp.json
format: a4-portrait
density: medium
layout:
kind: grid
canvas:
w: 794
h: 1123
margin:
top: 56
right: 56
bottom: 56
left: 56
columns:
count: 6
gap: 12
type:
title:
size: 34
weight: 700
tracking: 0.01em
lede:
size: 14
weight: 400
leading: 1.8
band-name:
size: 11
weight: 500
tracking: 0.16em
transform: upper
role:
size: 13
weight: 500
var:
size: 11
weight: 400
measure:
size: 11
weight: 400
numeric: tabular
sample-a:
size: 40
weight: 700
tracking: 0.01em
sample-b:
size: 24
weight: 500
sample-c:
size: 15
weight: 400
leading: 1.8
foot:
size: 12
weight: 400
leading: 1.7
colors:
ground: "#FDFCFD"
surface: "#F3F1F4"
ink: "#1A1620"
muted: "#6C6572"
accent: "#8A2E62"
rule: "#E0DBE3"
rules:
- "Derive the ramp from the accent at fixed ratios instead of picking each step: hand-picked steps keep the old hue when the palette is swapped"
- Never print the value beside a swatch — print the role name and the ratio. Values change with the palette; names and ratios do not
- "Put no text on a swatch: swatch-against-text is not one of the judged role pairs, so it can go unreadable while the checks stay green"
- Align roles and ramp to the same six columns — different counts read as two unrelated systems
- "Never send lowercase Latin through a case transform: the bundled subset is cut from the untransformed source, so letters that exist only on screen fall back to whatever the reader has"{
"format": "a4-portrait",
"density": "medium",
"layout": {
"kind": "grid",
"canvas": {
"w": 794,
"h": 1123
},
"margin": {
"top": 56,
"right": 56,
"bottom": 56,
"left": 56
},
"columns": {
"count": 6,
"gap": 12
}
},
"type": {
"title": {
"size": 34,
"weight": 700,
"tracking": "0.01em"
},
"lede": {
"size": 14,
"weight": 400,
"leading": 1.8
},
"band-name": {
"size": 11,
"weight": 500,
"tracking": "0.16em",
"transform": "upper"
},
"role": {
"size": 13,
"weight": 500
},
"var": {
"size": 11,
"weight": 400
},
"measure": {
"size": 11,
"weight": 400,
"numeric": "tabular"
},
"sample-a": {
"size": 40,
"weight": 700,
"tracking": "0.01em"
},
"sample-b": {
"size": 24,
"weight": 500
},
"sample-c": {
"size": 15,
"weight": 400,
"leading": 1.8
},
"foot": {
"size": 12,
"weight": 400,
"leading": 1.7
}
},
"colors": {
"ground": "#FDFCFD",
"surface": "#F3F1F4",
"ink": "#1A1620",
"muted": "#6C6572",
"accent": "#8A2E62",
"rule": "#E0DBE3"
},
"rules": [
"Derive the ramp from the accent at fixed ratios instead of picking each step: hand-picked steps keep the old hue when the palette is swapped",
"Never print the value beside a swatch — print the role name and the ratio. Values change with the palette; names and ratios do not",
"Put no text on a swatch: swatch-against-text is not one of the judged role pairs, so it can go unreadable while the checks stay green",
"Align roles and ramp to the same six columns — different counts read as two unrelated systems",
"Never send lowercase Latin through a case transform: the bundled subset is cut from the untransformed source, so letters that exist only on screen fall back to whatever the reader has"
]
} /designs/specimen-sheet-derived-ramp/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="Murecho:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
/* この版そのもの。index.md の layout / type / colors は、この HTML を
scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
:root {
--ground: #FDFCFD;
--surface: #F3F1F4;
--ink: #1A1620;
--muted: #6C6572;
--accent: #8A2E62;
--rule: #E0DBE3;
/* 階調は accent から固定の比率で派生させ、段ごとに色を決めない。
リテラルを持たないので配色プリセットの「役割外の色」には数えられず、
accent を差し替えると 6 段とも新しい accent から引き直される。
この版が主張していることを、この版自身が実演する仕掛け。 */
--step-1: color-mix(in srgb, var(--accent) 100%, var(--ground));
--step-2: color-mix(in srgb, var(--accent) 76%, var(--ground));
--step-3: color-mix(in srgb, var(--accent) 52%, var(--ground));
--step-4: color-mix(in srgb, var(--accent) 32%, var(--ground));
--step-5: color-mix(in srgb, var(--accent) 16%, var(--ground));
--step-6: color-mix(in srgb, var(--accent) 8%, var(--ground));
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 794px; height: 1123px; }
body { font-family: "Murecho", "IPAGothic", sans-serif; }
.artboard {
width: 794px; height: 1123px;
background: var(--ground); color: var(--ink);
padding: 56px; /* → layout.margin */
}
/* [data-content] は版面そのもの。height:100% で余白と一対一に対応させる。 */
.sheet { height: 100%; display: flex; flex-direction: column; gap: 34px; }
.head { padding-bottom: 22px; border-bottom: 1px solid var(--ink); }
.lede { color: var(--muted); margin-top: 8px; max-width: 520px; }
/* 大文字変換に小文字のラテンを通さない。同梱する字は変換前の本文から切られるので、
画面にだけ現れる大文字は同梱されず、環境の書体に落ちる。 */
.band-name { color: var(--muted); padding-bottom: 12px; }
/* 6 列の格子。役割も階調もこの 6 本に揃える。 */
.roles, .ramp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
/* 見本の上に文字を置かない。地と面のコントラストは役割の対として
判定されるが、見本の上に乗せた文字は判定の対象外で、配色を替えたときに
読めなくなっても検査は緑のまま通る。 */
.chip { height: 92px; border: 1px solid var(--rule); }
.role { display: block; margin-top: 10px; }
/* 見本に値を書かない。値は配色ごとに変わり、名前と比は変わらない。 */
.var { display: block; margin-top: 2px; color: var(--muted); }
.c-ground { background: var(--ground); }
.c-surface { background: var(--surface); }
.c-ink { background: var(--ink); }
.c-muted { background: var(--muted); }
.c-accent { background: var(--accent); }
.c-rule { background: var(--rule); }
.step { height: 64px; border: 1px solid var(--rule); }
.s1 { background: var(--step-1); } .s2 { background: var(--step-2); }
.s3 { background: var(--step-3); } .s4 { background: var(--step-4); }
.s5 { background: var(--step-5); } .s6 { background: var(--step-6); }
.scale { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: baseline; gap: 20px; }
.measure { color: var(--muted); width: 96px; flex: none; font-variant-numeric: tabular-nums; }
.terms { display: flex; flex-direction: column; gap: 9px; padding-top: 18px; border-top: 1px solid var(--rule); }
.term { color: var(--muted); display: flex; gap: 14px; }
.term b { font-weight: 500; color: var(--ink); flex: none; width: 96px; }
.foot { margin-top: auto; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--rule); }
.title { font-size: 34px; font-weight: 700; letter-spacing: .01em; }
.lede { font-size: 14px; font-weight: 400; line-height: 1.8; }
.band-name { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.role { font-size: 13px; font-weight: 500; }
.var,
.measure { font-size: 11px; font-weight: 400; }
.sample-a { font-size: 40px; font-weight: 700; letter-spacing: .01em; }
.sample-b { font-size: 24px; font-weight: 500; }
.sample-c { font-size: 15px; font-weight: 400; line-height: 1.8; }
.term,
.foot { font-size: 12px; font-weight: 400; line-height: 1.7; }
</style>
<div class="artboard" data-artboard>
<div class="sheet" data-content>
<div class="head">
<h1 class="title" data-type="title">役割と階調</h1>
<p class="lede" data-type="lede">色は 6 つの役割で持ち、階調は accent から比率で引く。値ではなく名前と比を書いてあるのは、配色を差し替えても、この紙に書いてあることが変わらないようにするため。</p>
</div>
<div>
<p class="band-name" data-type="band-name">役割</p>
<div class="roles">
<div data-col="1"><div class="chip c-ground"></div><span class="role" data-type="role">地</span><span class="var" data-type="var">--ground</span></div>
<div data-col="2"><div class="chip c-surface"></div><span class="role">面</span><span class="var">--surface</span></div>
<div data-col="3"><div class="chip c-ink"></div><span class="role">文字</span><span class="var">--ink</span></div>
<div data-col="4"><div class="chip c-muted"></div><span class="role">補助</span><span class="var">--muted</span></div>
<div data-col="5"><div class="chip c-accent"></div><span class="role">強調</span><span class="var">--accent</span></div>
<div data-col="6"><div class="chip c-rule"></div><span class="role">罫</span><span class="var">--rule</span></div>
</div>
</div>
<div>
<p class="band-name">階調 — 強調からの比率</p>
<div class="ramp">
<div><div class="step s1"></div><span class="var">100%</span></div>
<div><div class="step s2"></div><span class="var">76%</span></div>
<div><div class="step s3"></div><span class="var">52%</span></div>
<div><div class="step s4"></div><span class="var">32%</span></div>
<div><div class="step s5"></div><span class="var">16%</span></div>
<div><div class="step s6"></div><span class="var">8%</span></div>
</div>
</div>
<div>
<p class="band-name">文字</p>
<div class="scale">
<div class="row"><span class="measure" data-type="measure">40 / 700</span><span class="sample-a" data-type="sample-a">見出しはひとつ</span></div>
<div class="row"><span class="measure">24 / 500</span><span class="sample-b" data-type="sample-b">小見出しは短く切る</span></div>
<div class="row"><span class="measure">15 / 400</span><span class="sample-c" data-type="sample-c">本文は行送り 1.8。ひとつの段に 3 行より多く入れない。</span></div>
</div>
</div>
<div class="terms">
<p class="term"><b>値を書かない</b>見本に添えるのは役割の名前と比だけ。値は配色ごとに変わる。</p>
<p class="term"><b>上に載せない</b>見本の上に文字を置かない。その組み合わせは検査の対象外。</p>
<p class="term"><b>段を決めない</b>階調は accent から引く。段ごとに色を決めると引き直せない。</p>
</div>
<p class="foot" data-type="foot">この紙自体が 6 つの役割だけで刷られている。配色を差し替えると、見本も階調もその配色に変わる。</p>
</div>
</div>
/designs/specimen-sheet-derived-ramp/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Murecho 400;500;700
* chars 124 (f6a44214bbdecc96)
*
* pattern.html の文字だけを含む部分集合。描画時に外部へ取りに行かないよう同梱する。
* 版の文字を変えたら取り直すこと — 忘れると足りない字が豆腐になる。
* その取り忘れは pattern-entries.test.ts が上の指紋で検出する。
*/
@font-face {
font-family: 'Murecho';
font-style: normal;
font-weight: 400;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}
@font-face {
font-family: 'Murecho';
font-style: normal;
font-weight: 500;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}
@font-face {
font-family: 'Murecho';
font-style: normal;
font-weight: 700;
font-display: block;
src: url(./font-0.woff2) format('woff2');
unicode-range: U+25, U+2d-38, U+61, U+63-67, U+69, U+6b-6f, U+72-75, U+2014, U+3001-3002, U+3042, U+3044, U+3046, U+3048, U+304b-3054, U+3057-3062, U+3064-306b, U+306e-3070, U+3072-3073, U+307f, U+3081-3082, U+3088-308c, U+308f, U+3092, U+3094, U+3099, U+4e0a, U+4f53, U+5024, U+5165, U+51fa, U+5207, U+5237, U+524d, U+5272, U+52a9, U+5408, U+540d, U+5730, U+5909, U+5916, U+591a, U+5b57, U+5bfe, U+5c0f, U+5dee, U+5e33, U+5f15, U+5f37, U+5f79, U+6301, U+6587, U+66f8, U+66ff, U+672c, U+679a, U+67fb, U+691c, U+6bb5, U+6bd4, U+6c7a, U+6dfb, U+7387, U+76f4, U+77ed, U+7d19, U+7d44, U+7f6b, U+7f6e, U+81ea, U+8272, U+884c, U+88dc, U+898b, U+8abf, U+8c61, U+8f09, U+9001, U+914d, U+968e, U+9762;
}
出典を持たない自作パターン。pattern.html が版そのもので、cover.png と
frontmatter の寸法はどちらもそこから機械的に出している。編集するのは pattern.html だけ。
A self-authored pattern. pattern.html is the artboard itself; both cover.png and the
measurements in the frontmatter are derived from it, so the three cannot drift apart.
Edit the artboard, never the numbers.
:root に color-mix(in srgb, var(--accent) N%, var(--ground)) として置く。
リテラルを持たないので「役割の語彙にない色」には数えられず、配色を当てると
6 段とも新しい accent から引き直される。この版が言っていることを、この版自身が実演するtype は寸法と太さを記録するが、書体そのものは記録しない。だから見本は
書体の見本ではなく寸法の見本にしてある。2 書体を並べると、仕様に載らない差が絵にだけ出るtext-transform: uppercase で組むなら、本文もその字で書く。accent と
書いて ACCENT と出す組み方では、同梱書体の切り出しが本文しか見ないので大文字が抜ける