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

Three-tier Pricing — Center Emphasized

Three Column
Three-tier Pricing — Center Emphasized
column 1
column 2
column 3
120 96

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

pricing-3col-center-emphasis-everything.md

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

Prompt

943 B 
Produce one slide to the following specification.

- Canvas 1920 × 1080
- Margin top 96 right 120 bottom 96 left 120
- 3 equal columns, gap 32

## Emphasis
column 2 only, by rule + scale (1.06×) and nothing else

## Type (px against a 1920px canvas)
plan  20px / 500 / tracking .08em / uppercase
price  64px / 700 / tracking -.02em / tabular numerals
unit  16px / 400
feature  16px / 400 / leading 1.7

## Colour
Ground #F4F5F7 / Surface #FFFFFF / Ink #14171A / Muted #8A8F96 / Accent #0F6B5E / Rule #C9CED4

## Constraints — dropping these breaks it
- Emphasize one column only — two makes it uncomparable
- Never stack color, size and shadow — pick one means
- Align the price digits vertically (tabular numerals)

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/pricing-3col-center-emphasis/pattern.html.

Spec

1.2 KB

/ai/designs/pricing-3col-center-emphasis.json 

format: slide-16x9
density: medium
layout:
  kind: 3-column
  canvas:
    w: 1920
    h: 1080
  margin:
    top: 96
    right: 120
    bottom: 96
    left: 120
  columns:
    count: 3
    gap: 32
  emphasis:
    column: 2
    scale: 1.06
    via:
      - rule
      - scale
type:
  plan:
    size: 20
    weight: 500
    tracking: .08em
    transform: upper
  price:
    size: 64
    weight: 700
    tracking: -.02em
    numeric: tabular
  unit:
    size: 16
    weight: 400
  feature:
    size: 16
    weight: 400
    leading: 1.7
colors:
  ground: "#F4F5F7"
  surface: "#FFFFFF"
  ink: "#14171A"
  muted: "#8A8F96"
  accent: "#0F6B5E"
  rule: "#C9CED4"
rules:
  - Emphasize one column only — two makes it uncomparable
  - Never stack color, size and shadow — pick one means
  - Align the price digits vertically (tabular numerals)

Files

pattern.html

3.1 KB

/designs/pricing-3col-center-emphasis/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;500;700">
<link rel="stylesheet" href="./font.css">
<style>
  :root {
    --ground: #F4F5F7; --surface: #FFFFFF; --ink: #14171A;
    --muted: #8A8F96; --accent: #0F6B5E; --rule: #C9CED4;
  }
  * { 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: 96px 120px; }
  /* 版面そのもの。中身は自由に置く（ここでは上下中央）。 */
  .content { height: 100%; display: grid; align-content: center; }
  .cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: center; }
  .card { background: var(--surface); border: 1px solid var(--rule); padding: 64px 48px 72px; }
  /* 強調は罫と拡大の 2 手段。数値は emphasis.scale として測られる。 */
  .card[data-emphasis] { transform: scale(1.06); border-top: 4px solid var(--accent); }
  .plan { font-size: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .amount { margin-top: 28px; display: flex; align-items: baseline; gap: 10px; }
  .price { font-size: 64px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .unit { font-size: 16px; font-weight: 400; color: var(--muted); }
  .feats { margin-top: 44px; padding: 0; list-style: none; display: grid; gap: 20px; }
  .feats li { font-size: 16px; font-weight: 400; line-height: 1.7; }
  .feats li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--rule); vertical-align: middle; margin-right: 12px; }
</style>
<div class="artboard" data-artboard>
  <div class="content" data-content>
    <div class="cols">
      <section class="card" data-col="1">
        <p class="plan" data-type="plan">STARTER</p>
        <p class="amount"><span class="price" data-type="price">0</span><span class="unit" data-type="unit">円 / 月</span></p>
        <ul class="feats"><li data-type="feature">5 件まで登録</li><li>利用者 3 名</li><li>掲示板での相談</li><li>月次の集計</li><li>標準の書式</li><li>—</li></ul>
      </section>
      <section class="card" data-col="2" data-emphasis="rule scale">
        <p class="plan">STANDARD</p>
        <p class="amount"><span class="price">4,800</span><span class="unit">円 / 月</span></p>
        <ul class="feats"><li>登録は無制限</li><li>利用者 25 名</li><li>優先して回答</li><li>週次の集計</li><li>書式の追加</li><li>外部との連携</li></ul>
      </section>
      <section class="card" data-col="3">
        <p class="plan">BUSINESS</p>
        <p class="amount"><span class="price">12,000</span><span class="unit">円 / 月</span></p>
        <ul class="feats"><li>専用の環境</li><li>利用者は無制限</li><li>導入の支援つき</li><li>任意の集計</li><li>書式の作成代行</li><li>監査ログ</li></ul>
      </section>
    </div>
  </div>
</div>

font.css

2.9 KB

/designs/pricing-3col-center-emphasis/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   92 (c95c3eb591c00386)
 *
 * 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+2c, U+2f-35, U+38, U+41-42, U+44-45, U+49, U+4e, U+52-55, U+2014, U+304d-304e, U+3057-3058, U+3064-3069, U+306e-3071, U+307e, U+3092, U+3099-309a, U+30af-30b0, U+30d5-30d7, U+30e9, U+30ed, U+30f3, U+4e2d, U+4ee3, U+4ef6, U+4efb, U+4f5c, U+512a, U+5148, U+5165, U+5186, U+5229, U+5236, U+52a0, U+540d, U+56de, U+5883, U+5916, U+592e, U+5c02, U+5c0e, U+5f0f, U+5f37, U+610f, U+6210, U+63b2, U+63f4, U+643a, U+652f, U+6599, U+66f8, U+6708, U+677f, U+67fb, U+6a19, U+6b21, U+6bb5, U+6e96, U+7121, U+74b0, U+7528, U+767b, U+76e3, U+76f8, U+793a, U+7b54, U+8005, U+884c, U+8a08, U+8abf, U+8ac7, U+8ffd, U+9023, U+9031, U+90e8, U+91d1, U+9332, U+9650, U+96c6;
}
@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+2c, U+2f-35, U+38, U+41-42, U+44-45, U+49, U+4e, U+52-55, U+2014, U+304d-304e, U+3057-3058, U+3064-3069, U+306e-3071, U+307e, U+3092, U+3099-309a, U+30af-30b0, U+30d5-30d7, U+30e9, U+30ed, U+30f3, U+4e2d, U+4ee3, U+4ef6, U+4efb, U+4f5c, U+512a, U+5148, U+5165, U+5186, U+5229, U+5236, U+52a0, U+540d, U+56de, U+5883, U+5916, U+592e, U+5c02, U+5c0e, U+5f0f, U+5f37, U+610f, U+6210, U+63b2, U+63f4, U+643a, U+652f, U+6599, U+66f8, U+6708, U+677f, U+67fb, U+6a19, U+6b21, U+6bb5, U+6e96, U+7121, U+74b0, U+7528, U+767b, U+76e3, U+76f8, U+793a, U+7b54, U+8005, U+884c, U+8a08, U+8abf, U+8ac7, U+8ffd, U+9023, U+9031, U+90e8, U+91d1, U+9332, U+9650, U+96c6;
}
@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+2c, U+2f-35, U+38, U+41-42, U+44-45, U+49, U+4e, U+52-55, U+2014, U+304d-304e, U+3057-3058, U+3064-3069, U+306e-3071, U+307e, U+3092, U+3099-309a, U+30af-30b0, U+30d5-30d7, U+30e9, U+30ed, U+30f3, U+4e2d, U+4ee3, U+4ef6, U+4efb, U+4f5c, U+512a, U+5148, U+5165, U+5186, U+5229, U+5236, U+52a0, U+540d, U+56de, U+5883, U+5916, U+592e, U+5c02, U+5c0e, U+5f0f, U+5f37, U+610f, U+6210, U+63b2, U+63f4, U+643a, U+652f, U+6599, U+66f8, U+6708, U+677f, U+67fb, U+6a19, U+6b21, U+6bb5, U+6e96, U+7121, U+74b0, U+7528, U+767b, U+76e3, U+76f8, U+793a, U+7b54, U+8005, U+884c, U+8a08, U+8abf, U+8ac7, U+8ffd, U+9023, U+9031, U+90e8, U+91d1, U+9332, U+9650, U+96c6;
}

Notes

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

出典を持たない自作パターン。pattern.html が版そのもので、cover.png と frontmatter の layout / type / colors はどちらもそこから機械的に測った結果。編集するのは 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.

Techniques

Apply to