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

Traction — A Revenue Curve With Only Three Milestones Written On It

Axis
Design
Traction — A Revenue Curve With Only Three Milestones Written On It
160 112

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

traction-curve-milestones-everything.md

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

Prompt

995 B 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 112 right 160 bottom 96 left 160

## Type (px against a 1920px canvas)
kicker  22px / 700 / tracking 0.2em
title  56px / 900 / leading 1.3
nowValue  88px / 900 / leading 1 / tabular numerals
nowLabel  22px / 400
source  16px / 400

## Colour
Ground #101318 / Surface #1A1F27 / Ink #F2F4F7 / Muted #8B93A1 / Accent #F5B83D / Rule #2A303A

## Constraints — dropping these breaks it
- Three milestones, placed only where the slope changed
- The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read
- Notes hang to the left of their stems so they never cover the curve
- Start the axis at zero — a cropped axis exaggerates the growth

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/traction-curve-milestones/pattern.html.

Spec

1.1 KB

/ai/designs/traction-curve-milestones.json 

format: slide-16x9
density: medium
layout:
  kind: axis
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 112
    right: 160
    bottom: 96
    left: 160
type:
  kicker:
    size: 22
    weight: 700
    tracking: 0.2em
  title:
    size: 56
    weight: 900
    leading: 1.3
  nowValue:
    size: 88
    weight: 900
    leading: 1
    numeric: tabular
  nowLabel:
    size: 22
    weight: 400
  source:
    size: 16
    weight: 400
colors:
  ground: "#101318"
  surface: "#1A1F27"
  ink: "#F2F4F7"
  muted: "#8B93A1"
  accent: "#F5B83D"
  rule: "#2A303A"
rules:
  - Three milestones, placed only where the slope changed
  - The headline states the multiple and today's value sits top right — the conclusion lands before the chart is read
  - Notes hang to the left of their stems so they never cover the curve
  - Start the axis at zero — a cropped axis exaggerates the growth

Files

pattern.html

4.9 KB

/designs/traction-curve-milestones/pattern.html — The artboard itself, font subset included — open it and this picture draws.

Show contents 
<!doctype html>
<meta charset="utf-8">
<title>伸び — 売上の曲線に、節目を 3 つだけ書き込む</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;700;900">
<link rel="stylesheet" href="./font.css">
<style>
  /* この版そのもの。index.md の layout / type / colors は、この HTML を
     scripts/render-pattern.mjs で実測した結果であって、別に書いた説明ではない。 */
  :root {
    --ground: #101318;
    --surface: #1A1F27;
    --ink: #F2F4F7;
    --muted: #8B93A1;
    --accent: #F5B83D;
    --rule: #2A303A;
    --area: color-mix(in srgb, var(--accent) 16%, var(--ground));
  }
  * { 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: 112px 160px 96px;            /* → layout.margin */
  }
  .content { height: 100%; display: grid; grid-template-rows: auto 1fr auto; row-gap: 32px; }

  .head { display: flex; justify-content: space-between; align-items: end; }
  .kicker { font-size: 22px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }
  .title { font-size: 56px; font-weight: 900; line-height: 1.3; margin-top: 16px; }
  .now { text-align: right; }
  .nowValue { font-size: 88px; font-weight: 900; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
  .nowValue small { font-size: 34px; margin-left: 6px; }
  .nowLabel { font-size: 22px; font-weight: 400; color: var(--muted); margin-top: 10px; }

  svg text { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
  .axis { font-size: 20px; fill: var(--muted); font-variant-numeric: tabular-nums; }
  .mTitle { font-size: 24px; font-weight: 700; fill: var(--ink); }
  .mNote { font-size: 20px; fill: var(--muted); }

  .source { font-size: 16px; font-weight: 400; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 20px; }
</style>

<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="head">
      <div>
        <p class="kicker" data-type="kicker">実績</p>
        <h1 class="title" data-type="title">月次の売上は 18 か月で 14 倍</h1>
      </div>
      <div class="now">
        <p class="nowValue" data-type="nowValue">2,380<small>万円</small></p>
        <p class="nowLabel" data-type="nowLabel">2026 年 10 月の月次売上</p>
      </div>
    </div>

    <svg width="1600" height="560" viewBox="0 0 1600 560" aria-label="月次売上の推移">
      <g stroke="var(--rule)" stroke-width="1">
        <line x1="80" y1="40" x2="1600" y2="40"/><line x1="80" y1="200" x2="1600" y2="200"/><line x1="80" y1="360" x2="1600" y2="360"/>
      </g>
      <line x1="80" y1="520" x2="1600" y2="520" stroke="var(--muted)" stroke-width="2"/>
      <g class="axis" text-anchor="end">
        <text x="64" y="47">3,000</text><text x="64" y="207">2,000</text><text x="64" y="367">1,000</text><text x="64" y="527">0</text>
      </g>
      <g class="axis" text-anchor="middle">
        <text x="120" y="552">25.4</text><text x="440" y="552">25.8</text><text x="760" y="552">25.12</text><text x="1080" y="552">26.4</text><text x="1400" y="552">26.8</text>
      </g>
      <!-- 1 か月 80px、売上 1,000 万円 = 160px -->
      <path d="M120 493 L200 489 L280 484 L360 477 L440 468 L520 457 L600 441 L680 425 L760 404 L840 390 L920 369 L1000 343 L1080 316 L1160 290 L1240 260 L1320 230 L1400 196 L1480 166 L1560 139 L1560 520 L120 520 Z" fill="var(--area)"/>
      <path d="M120 493 L200 489 L280 484 L360 477 L440 468 L520 457 L600 441 L680 425 L760 404 L840 390 L920 369 L1000 343 L1080 316 L1160 290 L1240 260 L1320 230 L1400 196 L1480 166 L1560 139" fill="none" stroke="var(--accent)" stroke-width="5" stroke-linejoin="round"/>
      <circle cx="1560" cy="139" r="10" fill="var(--accent)"/>
      <!-- 節目：線の上に点と短い縦線、注記は左に寄せて曲線を隠さない -->
      <g stroke="var(--ink)" stroke-width="2">
        <line x1="440" y1="468" x2="440" y2="330"/><line x1="840" y1="390" x2="840" y2="230"/><line x1="1160" y1="290" x2="1160" y2="110"/>
      </g>
      <g fill="var(--ink)"><circle cx="440" cy="468" r="7"/><circle cx="840" cy="390" r="7"/><circle cx="1160" cy="290" r="7"/></g>
      <text class="mTitle" x="452" y="318" text-anchor="end">銀行連携を開始</text>
      <text class="mNote" x="452" y="292" text-anchor="end">25.8</text>
      <text class="mTitle" x="852" y="218" text-anchor="end">会計事務所の紹介制度</text>
      <text class="mNote" x="852" y="192" text-anchor="end">26.1</text>
      <text class="mTitle" x="1172" y="98" text-anchor="end">スマホ承認を公開</text>
      <text class="mNote" x="1172" y="72" text-anchor="end">26.5</text>
    </svg>

    <p class="source" data-type="source">月次売上（税抜）。数値は説明用の架空のもの</p>
  </div>
</div>

font.css

2.6 KB

/designs/traction-curve-milestones/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;700;900
 * chars   76 (fe6ccb6731e39573)
 *
 * 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+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url(./font-1.woff2) format('woff2');
  unicode-range: U+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(./font-2.woff2) format('woff2');
  unicode-range: U+20, U+2c, U+2e, U+30-36, U+38, U+2014, U+3001-3002, U+304b-304e, U+3051-3052, U+305f-3060, U+3064-3067, U+306b, U+306e-3070, U+3072-3073, U+3080, U+3082, U+3092, U+3099, U+30b9-30ba, U+30db-30dc, U+30de, U+4e07, U+4e0a, U+4e8b, U+4ecb, U+4f1a, U+4f38, U+500d, U+5024, U+516c, U+5186, U+5236, U+52d9, U+58f2, U+59cb, U+5b9f, U+5e74, U+5ea6, U+6240, U+627f, U+629c, U+643a, U+6570, U+660e, U+66f2, U+66f8, U+6708, U+67b6, U+6b21, U+7528, U+76ee, U+7a0e, U+7a7a, U+7bc0, U+7d39, U+7dda, U+7e3e, U+884c, U+8a08, U+8a8d, U+8aac, U+8fbc, U+9023, U+9280, U+958b, U+ff08-ff09;
}

Notes

この構成について / About this pattern

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。一式「事業計画・資金調達」の 1 枚で、架空の会社「ミナト経理」のシリーズ A のピッチとして描いてある。会社・人物・数値はすべて架空。

A self-authored pattern. pattern.html is the artboard itself; both cover.png and the measurements in the frontmatter are derived from it. One of the ten pitch slides, drawn as the Series A deck of a fictional company; every company, person and figure on it is invented.

Techniques

Apply to