{ "id": "specimen-sheet-derived-ramp", "schemaVersion": 2, "title": { "ja": "役割と階調 — 1 枚の見本帳", "en": "Roles and Ramp — A One-page Specimen" }, "summary": { "ja": "6 つの役割を 6 列に並べ、階調は accent から比率で引く。見本に値ではなく名前と比を書く", "en": "Six roles across six columns, with the ramp derived from the accent — labelled by name and ratio, never by value" }, "capturedAt": "2026-09-05", "categories": [ "brand" ], "tags": [ "typography" ], "useCases": [ "design-system" ], "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", "series": [] }, "rules": [ { "ja": "階調は accent から固定の比率で引き、段ごとに色を決めない。段を個別に決めた瞬間、配色を差し替えても階調だけが元の色相のまま残る", "en": "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" }, { "ja": "見本に値を書かない。添えるのは役割の名前と比だけ。値は配色ごとに変わり、名前と比は変わらない", "en": "Never print the value beside a swatch — print the role name and the ratio. Values change with the palette; names and ratios do not" }, { "ja": "見本の上に文字を置かない。見本と文字の組み合わせは役割の対ではないので、読めなくなっても検査は緑のまま通る", "en": "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" }, { "ja": "役割も階調も同じ 6 本の列に揃える。違う本数で割ると、6 つの役割と 6 段の階調が別の体系に見える", "en": "Align roles and ramp to the same six columns — different counts read as two unrelated systems" }, { "ja": "大文字変換に小文字のラテンを通さない。同梱する書体は変換前の本文から切るので、画面にだけ現れる大文字は同梱されず、読み手の環境の書体に落ちる", "en": "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" } ], "cover": "https://design-vault.pages.dev/_astro/cover.C1potTEO.png", "assets": [], "shortlist": false, "status": "published", "relations": { "similar": [ "settings-panel-single-accent" ] }, "license": "Original", "publishedAt": null, "reproduction": { "spec": { "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" ] }, "prompt": { "ja": "以下の仕様でA4 の資料を 1 枚作ってください。\n\n- 版面 794 × 1123\n- 余白 上 56 右 56 下 56 左 56\n- 6 カラム（等分）、間隔 12\n\n## 文字（版面 794px に対する px）\ntitle 34px / 700 / 字間 0.01em\nlede 14px / 400 / 行送り 1.8\nband-name 11px / 500 / 字間 0.16em / 大文字\nrole 13px / 500\nvar 11px / 400\nmeasure 11px / 400 / 等幅数字\nsample-a 40px / 700 / 字間 0.01em\nsample-b 24px / 500\nsample-c 15px / 400 / 行送り 1.8\nfoot 12px / 400 / 行送り 1.7\n\n## 配色\n地 #FDFCFD / 面 #F3F1F4 / 文字 #1A1620 / 補助 #6C6572 / 強調 #8A2E62 / 罫 #E0DBE3\n\n## 外すと崩れる点\n- 階調は accent から固定の比率で引き、段ごとに色を決めない。段を個別に決めた瞬間、配色を差し替えても階調だけが元の色相のまま残る\n- 見本に値を書かない。添えるのは役割の名前と比だけ。値は配色ごとに変わり、名前と比は変わらない\n- 見本の上に文字を置かない。見本と文字の組み合わせは役割の対ではないので、読めなくなっても検査は緑のまま通る\n- 役割も階調も同じ 6 本の列に揃える。違う本数で割ると、6 つの役割と 6 段の階調が別の体系に見える\n- 大文字変換に小文字のラテンを通さない。同梱する書体は変換前の本文から切るので、画面にだけ現れる大文字は同梱されず、読み手の環境の書体に落ちる\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/pattern.html", "en": "Produce one A4 page to the following specification.\n\n- Canvas 794 × 1123\n- Margin top 56 right 56 bottom 56 left 56\n- 6 equal columns, gap 12\n\n## Type (px against a 794px canvas)\ntitle 34px / 700 / tracking 0.01em\nlede 14px / 400 / leading 1.8\nband-name 11px / 500 / tracking 0.16em / uppercase\nrole 13px / 500\nvar 11px / 400\nmeasure 11px / 400 / tabular numerals\nsample-a 40px / 700 / tracking 0.01em\nsample-b 24px / 500\nsample-c 15px / 400 / leading 1.8\nfoot 12px / 400 / leading 1.7\n\n## Colour\nGround #FDFCFD / Surface #F3F1F4 / Ink #1A1620 / Muted #6C6572 / Accent #8A2E62 / Rule #E0DBE3\n\n## Constraints — dropping these breaks it\n- 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\n- Never print the value beside a swatch — print the role name and the ratio. Values change with the palette; names and ratios do not\n- 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\n- Align roles and ramp to the same six columns — different counts read as two unrelated systems\n- 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\n\nReplace the content with [your content]. Keep the measurements and colours as given.\nFor an exact reproduction, use the verbatim HTML at https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/pattern.html." }, "code": { "html": "\n\n役割と階調 — 1 枚の見本帳\n\n\n\n\n
\n
\n
\n

役割と階調

\n

色は 6 つの役割で持ち、階調は accent から比率で引く。値ではなく名前と比を書いてあるのは、配色を差し替えても、この紙に書いてあることが変わらないようにするため。

\n
\n\n
\n

役割

\n
\n
地--ground
\n
面--surface
\n
文字--ink
\n
補助--muted
\n
強調--accent
\n
罫--rule
\n
\n
\n\n
\n

階調 — 強調からの比率

\n
\n
100%
\n
76%
\n
52%
\n
32%
\n
16%
\n
8%
\n
\n
\n\n
\n

文字

\n
\n
40 / 700見出しはひとつ
\n
24 / 500小見出しは短く切る
\n
15 / 400本文は行送り 1.8。ひとつの段に 3 行より多く入れない。
\n
\n
\n\n
\n

値を書かない見本に添えるのは役割の名前と比だけ。値は配色ごとに変わる。

\n

上に載せない見本の上に文字を置かない。その組み合わせは検査の対象外。

\n

段を決めない階調は accent から引く。段ごとに色を決めると引き直せない。

\n
\n\n

この紙自体が 6 つの役割だけで刷られている。配色を差し替えると、見本も階調もその配色に変わる。

\n
\n
\n", "url": "https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/pattern.html", "fonts": [ "https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/font.css", "https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp/font-0.woff2" ] } }, "urls": { "ja": "https://design-vault.pages.dev/designs/specimen-sheet-derived-ramp", "en": "https://design-vault.pages.dev/en/designs/specimen-sheet-derived-ramp" }, "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と\nfrontmatter の寸法はどちらもそこから機械的に出している。編集するのは `pattern.html` だけ。\n\nA self-authored pattern. `pattern.html` is the artboard itself; both `cover.png` and the\nmeasurements in the frontmatter are derived from it, so the three cannot drift apart.\nEdit the artboard, never the numbers.\n\n### Techniques\n\n- 階調は `:root` に `color-mix(in srgb, var(--accent) N%, var(--ground))` として置く。\n リテラルを持たないので「役割の語彙にない色」には数えられず、配色を当てると\n 6 段とも新しい accent から引き直される。この版が言っていることを、この版自身が実演する\n- `type` は寸法と太さを記録するが、書体そのものは記録しない。だから見本は\n 書体の見本ではなく寸法の見本にしてある。2 書体を並べると、仕様に載らない差が絵にだけ出る\n- 「地」の見本は紙と同じ色なので、罫で囲まないと存在しない。囲みは装飾ではなく必要\n- 帯の見出しを `text-transform: uppercase` で組むなら、本文もその字で書く。`accent` と\n 書いて `ACCENT` と出す組み方では、同梱書体の切り出しが本文しか見ないので大文字が抜ける\n\n### Apply to\n\n- 配色と寸法の取り決めを 1 枚で渡すとき（開発者・外注・生成器のいずれにも同じ紙）\n- 既存のデザインを別の配色で運用できるか確かめるとき" }