{
"id": "settings-panel-single-accent",
"schemaVersion": 2,
"title": {
"ja": "設定パネル — 状態に色を足さない",
"en": "Settings Panel — No Extra Colour for State"
},
"summary": {
"ja": "入切も誤りも accent 1 色と罫の太さと文言で示す。赤も黄も足さない 480×640 の部品",
"en": "On, off and invalid carried by one accent, rule weight and words — no red, no amber"
},
"capturedAt": "2026-09-05",
"categories": [
"ui-component"
],
"tags": [
"minimal",
"typography"
],
"useCases": [
"settings"
],
"format": "component",
"density": "medium",
"layout": {
"kind": "stack",
"canvas": {
"w": 480,
"h": 640
},
"margin": {
"top": 28,
"right": 28,
"bottom": 28,
"left": 28
},
"emphasis": {
"row": 1,
"via": [
"fill"
]
}
},
"type": {
"title": {
"size": 20,
"weight": 700,
"tracking": "0.01em"
},
"note": {
"size": 12,
"weight": 400,
"leading": 1.7
},
"legend": {
"size": 11,
"weight": 500,
"tracking": "0.12em",
"transform": "upper"
},
"label": {
"size": 13,
"weight": 500
},
"state": {
"size": 13,
"weight": 500
},
"value": {
"size": 14,
"weight": 400
},
"help": {
"size": 12,
"weight": 400,
"leading": 1.7
},
"action": {
"size": 14,
"weight": 500
}
},
"colors": {
"ground": "#FFFDFB",
"surface": "#F6F2ED",
"ink": "#1C1815",
"muted": "#6F675E",
"accent": "#B4432A",
"rule": "#E4DCD2",
"series": []
},
"rules": [
{
"ja": "状態のために色を増やさない。入切も誤りも accent 1 色・罫の太さ・文言で示す。赤を足すと、配色を替えたとき意味と色の対応が崩れる",
"en": "Never add a colour for state: on, off and invalid ride on one accent, rule weight and words. A red breaks the meaning as soon as the palette changes"
},
{
"ja": "誤りは罫を太らせて文言で言う。1px の罫を 2px の ink に替え、下の説明も muted から ink へ上げる",
"en": "Show an error by thickening the rule and saying so — 1px hairline becomes a 2px ink rule, and the note below rises from muted to ink"
},
{
"ja": "欄は罫で囲まず面（surface）で示す。罫は地との差が 1.10 まで落ちてよい約束なので、配色によっては輪郭だけが消える",
"en": "Draw fields as panels, not outlines: a hairline is only promised 1.10 against the page, so an outline can vanish under some palettes"
},
{
"ja": "ラベルは欄の上に置く。幅 480 で左に置くと、入力できる幅が読めないほど短くなる",
"en": "Put the label above the field — at 480 wide, a left-hand label starves the value of room"
},
{
"ja": "主操作は 1 つ。2 つ目は塗らず、罫も外して文字だけにする",
"en": "One primary action. The second gets no fill and no border — just its words"
}
],
"cover": "https://design-vault.pages.dev/_astro/cover.CzIH8pmm.png",
"assets": [],
"shortlist": false,
"status": "published",
"relations": {
"similar": [
"app-shell-single-tone"
]
},
"license": "Original",
"publishedAt": null,
"reproduction": {
"spec": {
"format": "component",
"density": "medium",
"layout": {
"kind": "stack",
"canvas": {
"w": 480,
"h": 640
},
"margin": {
"top": 28,
"right": 28,
"bottom": 28,
"left": 28
},
"emphasis": {
"row": 1,
"via": [
"fill"
]
}
},
"type": {
"title": {
"size": 20,
"weight": 700,
"tracking": "0.01em"
},
"note": {
"size": 12,
"weight": 400,
"leading": 1.7
},
"legend": {
"size": 11,
"weight": 500,
"tracking": "0.12em",
"transform": "upper"
},
"label": {
"size": 13,
"weight": 500
},
"state": {
"size": 13,
"weight": 500
},
"value": {
"size": 14,
"weight": 400
},
"help": {
"size": 12,
"weight": 400,
"leading": 1.7
},
"action": {
"size": 14,
"weight": 500
}
},
"colors": {
"ground": "#FFFDFB",
"surface": "#F6F2ED",
"ink": "#1C1815",
"muted": "#6F675E",
"accent": "#B4432A",
"rule": "#E4DCD2"
},
"rules": [
"Never add a colour for state: on, off and invalid ride on one accent, rule weight and words. A red breaks the meaning as soon as the palette changes",
"Show an error by thickening the rule and saying so — 1px hairline becomes a 2px ink rule, and the note below rises from muted to ink",
"Draw fields as panels, not outlines: a hairline is only promised 1.10 against the page, so an outline can vanish under some palettes",
"Put the label above the field — at 480 wide, a left-hand label starves the value of room",
"One primary action. The second gets no fill and no border — just its words"
]
},
"prompt": {
"ja": "以下の仕様で画面部品を 1 枚作ってください。\n\n- 版面 480 × 640\n- 余白 上 28 右 28 下 28 左 28\n\n## 強調\n1 行目のみ。手段は 塗り だけ。ほかは変えない\n\n## 文字（版面 480px に対する px）\ntitle 20px / 700 / 字間 0.01em\nnote 12px / 400 / 行送り 1.7\nlegend 11px / 500 / 字間 0.12em / 大文字\nlabel 13px / 500\nstate 13px / 500\nvalue 14px / 400\nhelp 12px / 400 / 行送り 1.7\naction 14px / 500\n\n## 配色\n地 #FFFDFB / 面 #F6F2ED / 文字 #1C1815 / 補助 #6F675E / 強調 #B4432A / 罫 #E4DCD2\n\n## 外すと崩れる点\n- 状態のために色を増やさない。入切も誤りも accent 1 色・罫の太さ・文言で示す。赤を足すと、配色を替えたとき意味と色の対応が崩れる\n- 誤りは罫を太らせて文言で言う。1px の罫を 2px の ink に替え、下の説明も muted から ink へ上げる\n- 欄は罫で囲まず面（surface）で示す。罫は地との差が 1.10 まで落ちてよい約束なので、配色によっては輪郭だけが消える\n- ラベルは欄の上に置く。幅 480 で左に置くと、入力できる幅が読めないほど短くなる\n- 主操作は 1 つ。2 つ目は塗らず、罫も外して文字だけにする\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/settings-panel-single-accent/pattern.html",
"en": "Produce one interface component to the following specification.\n\n- Canvas 480 × 640\n- Margin top 28 right 28 bottom 28 left 28\n\n## Emphasis\nrow 1 only, by fill and nothing else\n\n## Type (px against a 480px canvas)\ntitle 20px / 700 / tracking 0.01em\nnote 12px / 400 / leading 1.7\nlegend 11px / 500 / tracking 0.12em / uppercase\nlabel 13px / 500\nstate 13px / 500\nvalue 14px / 400\nhelp 12px / 400 / leading 1.7\naction 14px / 500\n\n## Colour\nGround #FFFDFB / Surface #F6F2ED / Ink #1C1815 / Muted #6F675E / Accent #B4432A / Rule #E4DCD2\n\n## Constraints — dropping these breaks it\n- Never add a colour for state: on, off and invalid ride on one accent, rule weight and words. A red breaks the meaning as soon as the palette changes\n- Show an error by thickening the rule and saying so — 1px hairline becomes a 2px ink rule, and the note below rises from muted to ink\n- Draw fields as panels, not outlines: a hairline is only promised 1.10 against the page, so an outline can vanish under some palettes\n- Put the label above the field — at 480 wide, a left-hand label starves the value of room\n- One primary action. The second gets no fill and no border — just its words\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/settings-panel-single-accent/pattern.html."
},
"code": {
"html": "\n\n設定パネル — 状態に色を足さない\n\n\n\n\n
\n
\n
\n
通知
\n
変更は保存したときに反映されます。
\n
\n\n
\n
配信
\n
\n 請求書の発行\n 送る\n \n
\n
\n 週次のまとめ\n 送らない\n \n
\n
\n\n
\n
宛先
\n
\n 既定の宛先\n keiri@example.co.jp\n
\n
請求に関する通知はここへ届きます。
\n
\n\n
\n
追加の宛先
\n
\n メールアドレス\n keiri@example\n
\n
この形式では送れません。@ のうしろにドメインが要ります。
\n
\n\n
\n 保存する\n 取り消す\n
\n
\n
\n",
"url": "https://design-vault.pages.dev/designs/settings-panel-single-accent/pattern.html",
"fonts": [
"https://design-vault.pages.dev/designs/settings-panel-single-accent/font.css",
"https://design-vault.pages.dev/designs/settings-panel-single-accent/font-0.woff2"
]
}
},
"urls": {
"ja": "https://design-vault.pages.dev/designs/settings-panel-single-accent",
"en": "https://design-vault.pages.dev/en/designs/settings-panel-single-accent"
},
"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- 「色を足さない」は禁欲ではなく制約の帰結。役割は 6 つしかなく、危険を表す語がない。\n 赤を足せばそれは配色の差し替えが届かない色になり、この版はどの配色も当てられなくなる\n- 入切は accent・つまみの位置・文言の 3 つが同じことを言う。1 つでも足りるが、\n 色覚と縮小表示の両方に耐えるのは重ねたときだけ\n- 部品は 480×640 の枠を持つ。画面ではないので版面の余白は 28px と薄く、\n 外側の余白は載せる側が持つ\n\n### Apply to\n\n- 設定画面、プロフィール編集、通知やメールの宛先まわり\n- 検証結果を返す入力欄（保存前に読ませる必要があるもの）"
}