1440 × 900 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
1440 × 900 Seen as a design The artboard itself, drawn live — sharp at any zoom Structure, margins and columns overlaid
Copy and paste, or save a file and hand it over. For a machine with no network, one “Everything” file is enough.
Everything in this panel, including the contents behind each URL, in one Markdown file — Large, so it goes as a file (copy is for 32 KB and under)
Produce one page to the following specification. - Canvas 1440 × 900 - Margin top 120 right 160 bottom 120 left 160 ## Type (px against a 1440px canvas) hero 72px / 700 / tracking -.01em / leading 1.25 sub 18px / 400 / leading 1.9 cta 16px / 500 note 14px / 400 ## Colour Ground #0B0224 / Surface #1A1131 / Ink #F4F0FF / Muted #A99EC8 / Accent #2FB6A8 / Rule #2E2350 / #3B1E8C / #6C3AC7 ## Constraints — dropping these breaks it - In a 4+ stop gradient the transition colors carry the impression, not the endpoints - Keep type within 60% of the frame and let the background carry the rest - Glass panels need at least blur(20px) plus a 4–8% white overlay 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/2026-04-15-gradient-saas-landing/pattern.html.
/ai/designs/2026-04-15-gradient-saas-landing.json
format: web
density: low
layout:
kind: full-bleed
canvas:
w: 1440
h: 900
margin:
top: 120
right: 160
bottom: 120
left: 160
type:
hero:
size: 72
weight: 700
tracking: -.01em
leading: 1.25
sub:
size: 18
weight: 400
leading: 1.9
cta:
size: 16
weight: 500
note:
size: 14
weight: 400
colors:
ground: "#0B0224"
surface: "#1A1131"
ink: "#F4F0FF"
muted: "#A99EC8"
accent: "#2FB6A8"
rule: "#2E2350"
series:
- "#3B1E8C"
- "#6C3AC7"
rules:
- In a 4+ stop gradient the transition colors carry the impression, not the endpoints
- Keep type within 60% of the frame and let the background carry the rest
- Glass panels need at least blur(20px) plus a 4–8% white overlay{
"format": "web",
"density": "low",
"layout": {
"kind": "full-bleed",
"canvas": {
"w": 1440,
"h": 900
},
"margin": {
"top": 120,
"right": 160,
"bottom": 120,
"left": 160
}
},
"type": {
"hero": {
"size": 72,
"weight": 700,
"tracking": "-.01em",
"leading": 1.25
},
"sub": {
"size": 18,
"weight": 400,
"leading": 1.9
},
"cta": {
"size": 16,
"weight": 500
},
"note": {
"size": 14,
"weight": 400
}
},
"colors": {
"ground": "#0B0224",
"surface": "#1A1131",
"ink": "#F4F0FF",
"muted": "#A99EC8",
"accent": "#2FB6A8",
"rule": "#2E2350",
"series": [
"#3B1E8C",
"#6C3AC7"
]
},
"rules": [
"In a 4+ stop gradient the transition colors carry the impression, not the endpoints",
"Keep type within 60% of the frame and let the background carry the rest",
"Glass panels need at least blur(20px) plus a 4–8% white overlay"
]
} /designs/2026-04-15-gradient-saas-landing/pattern.html — The artboard itself, font subset included — open it and this picture draws.
<!doctype html>
<meta charset="utf-8">
<title>オーロラグラデーション SaaS ランディング</title>
<meta name="dv-font" content="Zen Kaku Gothic New:400;500;700">
<link rel="stylesheet" href="./font.css">
<style>
:root {
--ground: #0B0224; --surface: #1A1131; --ink: #F4F0FF;
--muted: #A99EC8; --accent: #2FB6A8; --rule: #2E2350;
--series-1: #3B1E8C; --series-2: #6C3AC7;
/* ガラス面の 3 値。役割は持たないが設計値なので、ここに名前で置く。 */
--glass-fill: rgba(255, 255, 255, .07);
--glass-edge: rgba(255, 255, 255, .14);
--glass-rule: rgba(255, 255, 255, .2);
}
* { box-sizing: border-box; margin: 0; }
html, body { width: 1440px; height: 900px; }
body { font-family: "Zen Kaku Gothic New", "IPAGothic", sans-serif; }
.artboard {
width: 1440px; height: 900px; color: var(--ink);
background: var(--ground);
padding: 120px 160px;
position: relative; overflow: hidden;
}
/* 4 ストップのグラデ。印象を作るのは端の色ではなく中間の 2 色。 */
.aurora {
position: absolute; inset: -20%;
background:
radial-gradient(58% 52% at 18% 22%, var(--series-1) 0%, transparent 62%),
radial-gradient(52% 46% at 82% 30%, var(--accent) 0%, transparent 58%),
radial-gradient(64% 58% at 52% 96%, var(--series-2) 0%, transparent 66%),
var(--ground);
filter: blur(10px);
}
.content { position: relative; height: 100%; display: grid; align-content: center; }
/* 文字の占有は画面の 60% 以下に抑え、残りは背景に語らせる。 */
.copy { max-width: 620px; display: grid; gap: 28px; }
.hero { font-size: 72px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.sub { font-size: 18px; font-weight: 400; line-height: 1.9; color: var(--muted); }
/* ガラス面は blur(20px) + 白 4〜8% が下限。薄いと沈む。 */
.glass {
margin-top: 20px; justify-self: start;
display: flex; align-items: center; gap: 20px;
background: var(--glass-fill);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-edge);
padding: 20px 28px;
}
.cta { font-size: 16px; font-weight: 500; }
.glass span { width: 1px; height: 20px; background: var(--glass-rule); }
.note { font-size: 14px; font-weight: 400; color: var(--muted); }
</style>
<div class="artboard" data-artboard>
<div class="aurora"></div>
<div class="content" data-content>
<div class="copy">
<h1 class="hero" data-type="hero">問い合わせを、<br>止めずに減らす。</h1>
<p class="sub" data-type="sub">窓口の運用はそのままに、一次受けだけを切り出します。既存の手順書を書き換える必要はありません。</p>
<div class="glass">
<p class="cta" data-type="cta">14 日間ためす</p>
<span></span>
<p class="note" data-type="note">クレジットカード不要</p>
</div>
</div>
</div>
</div>
/designs/2026-04-15-gradient-saas-landing/font.css — Not in Everything
/* dv-subset v2 — generated by scripts/subset-font.mjs. Do not edit.
* font Zen Kaku Gothic New 400;500;700
* chars 70 (f0a41cd9b0e1a48f)
*
* 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+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}
@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+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}
@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+31, U+34, U+53, U+61, U+3001-3002, U+3042, U+3044, U+3048, U+304d-304e, U+3051-3052, U+3057-3060, U+306b, U+306e-3070, U+307e, U+3081, U+3089-308b, U+308f, U+3092-3093, U+3099, U+30a3, U+30aa-30ac, U+30af-30b0, U+30b7-30b8, U+30c3, U+30c6-30c9, U+30e7, U+30e9, U+30ec-30ed, U+30f3, U+30fc, U+4e00, U+4e0d, U+51fa, U+5207, U+53d7, U+53e3, U+5408, U+554f, U+5b58, U+5fc5, U+624b, U+63db, U+65e2, U+65e5, U+66f8, U+6b21, U+6b62, U+6e1b, U+7528, U+7a93, U+8981, U+904b, U+9593, U+9806;
}
出典を持たない自作パターン。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.
backdrop-filter: blur(20px) + 白 7% が下限。これ未満だと地に沈む