Design Vault Search use case, structure, colour, notes /
Index Categories Tags 日本語
Back to index

One Step Finer — Pull 36g in 28 Seconds

Two Column
One Step Finer — Pull 36g in 28 Seconds
column 1
column 2
120 72

1920 × 1080 Seen as a design

Take it with you

Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.

Everything

espresso-dial-in-extraction-curves-everything.md

Everything in this panel, including the contents behind each URL, in one Markdown file

Prompt

1.2 KB 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 72 right 120 bottom 76 left 120
- 2 equal columns, gap 40

## Type (px against a 1920px canvas)
kicker  20px / 700 / tracking 0.14em
title  48px / 700 / tracking -0.02em
deck  21px / 400
recipeLabel  20px / 400
recipeValue  25px / 700
shot  20px / 700 / tracking 0.1em
shotTitle  29px / 700
result  20px / 700
targetLabel  20px / 500
metricLabel  20px / 400
metricValue  24px / 700
takeaway  25px / 700
note  17px / 400

## Colour
Ground #F6F4EF / Surface #FFFFFF / Ink #252A2C / Muted #697476 / Accent #A34F34 / Rule #D8D5CD / #B8B1A3 / #A34F34 / #406C67

## Constraints — dropping these breaks it
- Keep both panels on identical scales and show the target time window with the same shaded band
- Change grind size only; hold dose and yield constant so the adjustment is easy to interpret
- Label the curves as illustrative and note that suitable values depend on taste and equipment

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/espresso-dial-in-extraction-curves/pattern.html.

Spec

1.7 KB

/ai/designs/espresso-dial-in-extraction-curves.json 

format: slide-16x9
density: medium
layout:
  kind: 2-column
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 72
    right: 120
    bottom: 76
    left: 120
  columns:
    count: 2
    gap: 40
type:
  kicker:
    size: 20
    weight: 700
    tracking: 0.14em
  title:
    size: 48
    weight: 700
    tracking: -0.02em
  deck:
    size: 21
    weight: 400
  recipeLabel:
    size: 20
    weight: 400
  recipeValue:
    size: 25
    weight: 700
  shot:
    size: 20
    weight: 700
    tracking: 0.1em
  shotTitle:
    size: 29
    weight: 700
  result:
    size: 20
    weight: 700
  targetLabel:
    size: 20
    weight: 500
  metricLabel:
    size: 20
    weight: 400
  metricValue:
    size: 24
    weight: 700
  takeaway:
    size: 25
    weight: 700
  note:
    size: 17
    weight: 400
colors:
  ground: "#F6F4EF"
  surface: "#FFFFFF"
  ink: "#252A2C"
  muted: "#697476"
  accent: "#A34F34"
  rule: "#D8D5CD"
  series:
    - "#B8B1A3"
    - "#A34F34"
    - "#406C67"
rules:
  - Keep both panels on identical scales and show the target time window with the same shaded band
  - Change grind size only; hold dose and yield constant so the adjustment is easy to interpret
  - Label the curves as illustrative and note that suitable values depend on taste and equipment

Files

pattern.html

8.9 KB

/designs/espresso-dial-in-extraction-curves/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>挽き目を一段細かく — 36gを28秒で抽出</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root{--ground:#F6F4EF;--surface:#FFFFFF;--ink:#252A2C;--muted:#697476;--accent:#A34F34;--rule:#D8D5CD;--series-1:#B8B1A3;--series-2:#A34F34;--series-3:#406C67;--target-fill:#EAF1EF;--before-fill:#F2F0EB}
*{box-sizing:border-box;margin:0}html,body{width:1920px;height:1080px;background:var(--ground);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif;color:var(--ink)}
svg{display:block;width:1920px;height:1080px;background:var(--ground);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif}
text{fill:var(--ink);font-family:"Zen Kaku Gothic New","IPAGothic",sans-serif}.muted{fill:var(--muted)}.accent{fill:var(--accent)}.green{fill:var(--series-3)}
.kicker{font-size:20px;font-weight:700;letter-spacing:2.8px}.title{font-size:48px;font-weight:700;letter-spacing:-1px}.deck{font-size:21px}.recipe-label{font-size:20px}.recipe-value{font-size:25px;font-weight:700}.shot{font-size:20px;font-weight:700;letter-spacing:2px}.shot-title{font-size:29px;font-weight:700}.target-label{font-size:20px;font-weight:500}.badge{font-size:20px;font-weight:700}.tick{font-size:20px}.axis-label{font-size:20px;font-weight:500}.end{font-size:20px;font-weight:700}.metric-label{font-size:20px}.metric-value{font-size:24px;font-weight:700}.takeaway{font-size:25px;font-weight:700}.note{font-size:17px}
.panel{fill:var(--surface);stroke:var(--rule);stroke-width:1.5}.axis{stroke:var(--rule);stroke-width:2}.grid{stroke:var(--rule);stroke-width:1.5}.target{fill:var(--target-fill)}.targetline{stroke:var(--series-3);stroke-width:2;stroke-dasharray:8 8}.curveA{fill:none;stroke:var(--series-1);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.curveB{fill:none;stroke:var(--series-3);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}.guide{stroke:var(--rule);stroke-width:2;stroke-dasharray:5 7}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" data-artboard="true">
<rect width="1920" height="1080" fill="var(--ground)"/>
<g data-content="true">
<text class="kicker accent" x="120" y="108" data-type="kicker">ESPRESSO / DIAL-IN NOTE 04</text>
<text class="title" x="120" y="166" data-type="title">挽き目を一段細かく。36gを28秒で止める</text>
<text class="deck muted" x="120" y="207" data-type="deck">同じ豆量・同じ目標量で、抽出の流れだけを比べる</text>
<rect x="1450" y="72" width="350" height="112" rx="12" fill="var(--surface)" stroke="var(--rule)" stroke-width="1.5"/>
<text class="recipe-label muted" x="1476" y="112" data-type="recipeLabel">固定レシピ</text><text class="recipe-value" x="1476" y="153" data-type="recipeValue">18g in → 36g out</text>
<line x1="120" y1="230" x2="1800" y2="230" stroke="var(--rule)" stroke-width="2"/>
<!-- shot A panel -->
<g data-col="1">
<rect class="panel" x="120" y="258" width="820" height="608" rx="16"/><path d="M136 260 H924" stroke="var(--series-1)" stroke-width="5"/>
<text class="shot muted" x="156" y="302" data-type="shot">SHOT A · 現状</text><text class="shot-title" x="156" y="342" data-type="shotTitle">流れが速すぎる</text><rect x="690" y="282" width="218" height="48" rx="8" fill="var(--before-fill)"/><text class="badge muted" x="710" y="314" data-type="result">22秒 · 粗い</text>
<!-- graph plot x=220..860, y=430..700 -->
<text class="target-label green" x="714" y="405">目標帯 · 25–30秒</text><rect class="target" x="753" y="430" width="107" height="270" rx="4" opacity=".8"/><line class="targetline" x1="753" y1="430" x2="753" y2="700"/><line class="targetline" x1="860" y1="430" x2="860" y2="700"/>
<line class="grid" x1="220" y1="700" x2="860" y2="700"/><line class="grid" x1="220" y1="632.5" x2="860" y2="632.5"/><line class="grid" x1="220" y1="565" x2="860" y2="565"/><line class="grid" x1="220" y1="497.5" x2="860" y2="497.5"/><line class="grid" x1="220" y1="430" x2="860" y2="430"/>
<line class="axis" x1="220" y1="700" x2="860" y2="700"/><line class="axis" x1="220" y1="700" x2="220" y2="430"/>
<text class="tick muted" x="184" y="707">0</text><text class="tick muted" x="175" y="640">10</text><text class="tick muted" x="175" y="572">20</text><text class="tick muted" x="175" y="505">30</text><text class="tick muted" x="175" y="437">40</text>
<text class="tick muted" x="216" y="732">0</text><text class="tick muted" x="319" y="732">5</text><text class="tick muted" x="426" y="732">10</text><text class="tick muted" x="533" y="732">15</text><text class="tick muted" x="640" y="732">20</text><text class="tick muted" x="746" y="732">25</text><text class="tick muted" x="852" y="732">30</text>
<text class="axis-label muted" x="675" y="762">経過時間（秒）</text><text class="axis-label muted" transform="translate(154 622) rotate(-90)">抽出量（g）</text>
<polyline class="curveA" points="220,700 262,686 305,659 348,632 391,592 433,565 476,531 519,504 562,484 604,470 647,464 689,457"/>
<line class="guide" x1="689" y1="457" x2="689" y2="700"/><circle cx="689" cy="457" r="8" fill="var(--series-1)"/><text class="end" x="702" y="484">36g</text><text class="end" x="661" y="681">22秒</text>
<line x1="156" y1="786" x2="904" y2="786" stroke="var(--rule)" stroke-width="1.5"/>
<text class="metric-label muted" x="156" y="821" data-type="metricLabel">抽出時間</text><text class="metric-value" x="156" y="851" data-type="metricValue">22秒</text>
<text class="metric-label muted" x="410" y="821">流速</text><text class="metric-value" x="410" y="851">速い</text>
<text class="metric-label muted" x="658" y="821">調整</text><text class="metric-value" x="658" y="851">一段細かく</text>
</g>
<!-- shot B panel -->
<g data-col="2">
<rect class="panel" x="980" y="258" width="820" height="608" rx="16"/><path d="M996 260 H1784" stroke="var(--series-3)" stroke-width="5"/>
<text class="shot muted" x="1016" y="302" data-type="shot">SHOT B · 調整後</text><text class="shot-title" x="1016" y="342" data-type="shotTitle">目標帯に収まる</text><rect x="1550" y="282" width="218" height="48" rx="8" fill="var(--target-fill)"/><text class="badge green" x="1570" y="314" data-type="result">28秒 · 一段細かく</text>
<text class="target-label green" x="1574" y="405">目標帯 · 25–30秒</text><rect class="target" x="1613" y="430" width="107" height="270" rx="4" opacity=".8"/><line class="targetline" x1="1613" y1="430" x2="1613" y2="700"/><line class="targetline" x1="1720" y1="430" x2="1720" y2="700"/>
<line class="grid" x1="1080" y1="700" x2="1720" y2="700"/><line class="grid" x1="1080" y1="632.5" x2="1720" y2="632.5"/><line class="grid" x1="1080" y1="565" x2="1720" y2="565"/><line class="grid" x1="1080" y1="497.5" x2="1720" y2="497.5"/><line class="grid" x1="1080" y1="430" x2="1720" y2="430"/>
<line class="axis" x1="1080" y1="700" x2="1720" y2="700"/><line class="axis" x1="1080" y1="700" x2="1080" y2="430"/>
<text class="tick muted" x="1044" y="707">0</text><text class="tick muted" x="1035" y="640">10</text><text class="tick muted" x="1035" y="572">20</text><text class="tick muted" x="1035" y="505">30</text><text class="tick muted" x="1035" y="437">40</text>
<text class="tick muted" x="1076" y="732">0</text><text class="tick muted" x="1179" y="732">5</text><text class="tick muted" x="1286" y="732">10</text><text class="tick muted" x="1393" y="732">15</text><text class="tick muted" x="1500" y="732">20</text><text class="tick muted" x="1606" y="732">25</text><text class="tick muted" x="1712" y="732">30</text>
<text class="axis-label muted" x="1535" y="762">経過時間（秒）</text><text class="axis-label muted" transform="translate(1014 622) rotate(-90)">抽出量（g）</text>
<polyline class="curveB" points="1080,700 1123,693 1165,679 1208,659 1251,632 1293,606 1336,565 1379,531 1421,504 1464,484 1507,470 1549,464 1592,461 1635,459 1678,457"/>
<line class="guide" x1="1678" y1="457" x2="1678" y2="700"/><circle cx="1678" cy="457" r="8" fill="var(--series-3)"/><text class="end" x="1620" y="484">36g</text><text class="end" x="1641" y="681">28秒</text>
<line x1="1016" y1="786" x2="1764" y2="786" stroke="var(--rule)" stroke-width="1.5"/>
<text class="metric-label muted" x="1016" y="821">抽出時間</text><text class="metric-value" x="1016" y="851">28秒</text>
<text class="metric-label muted" x="1270" y="821">流速</text><text class="metric-value" x="1270" y="851">安定</text>
<text class="metric-label muted" x="1518" y="821">次の確認</text><text class="metric-value" x="1518" y="851">味で微調整</text>
</g>
<line x1="120" y1="906" x2="1800" y2="906" stroke="var(--rule)" stroke-width="2"/>
<text class="takeaway" x="120" y="960" data-type="takeaway">変えたのは挽き目だけ。次は味を確かめる。</text>
<text class="note muted" x="120" y="1002" data-type="note">抽出カーブは説明用の架空サンプル。豆・機材・環境で最適値は変わります。</text>
</g></svg>

font.css

3.3 KB

/designs/espresso-dial-in-extraction-curves/font.css — Not in Everything

Show contents 
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
 * font    Zen Kaku Gothic New 400;500;700
 * chars   121 (aff5379509ead515)
 *
 * 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, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, U+ff08-ff09;
}
@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, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, U+ff08-ff09;
}
@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, U+2f-36, U+38, U+41-42, U+44-45, U+48-49, U+4c, U+4e-50, U+52-54, U+67, U+69, U+6e-6f, U+74-75, U+b7, U+2013-2014, U+2192, U+3001-3002, U+3044, U+3048, U+304b-3052, U+3057-305a, U+305f-3060, U+3066-3067, U+306b, U+306e-3071, U+3078-307a, U+307e, U+3081, U+308a-308c, U+308f, U+3092, U+3099-309a, U+30ab-30ac, U+30b5-30b8, U+30d2-30d7, U+30eb-30ec, U+30f3, U+30fb-30fc, U+4e00, U+5024, U+51fa, U+53ce, U+540c, U+5473, U+56fa, U+5883, U+5909, U+5b89, U+5b9a, U+5e2f, U+5f8c, U+5fae, U+62bd, U+633d, U+6574, U+660e, U+6642, U+6700, U+6750, U+67b6, U+6a19, U+6a5f, U+6b21, U+6b62, U+6bb5, U+6bd4, U+6d41, U+72b6, U+73fe, U+74b0, U+7528, U+76ee, U+78ba, U+79d2, U+7a7a, U+7c97, U+7d30, U+7d4c, U+8a8d, U+8aac, U+8abf, U+8c46, U+901f, U+904e, U+9069, U+91cf, U+9593, U+ff08-ff09;
}

Notes

豆量と抽出量を固定して挽き目だけを一段調整すると、流量の変化を読みやすく示せる。 この図の曲線は架空の説明用サンプルであり、28 秒は普遍的な正解値ではない。