{
  "id": "2026-04-15-gradient-saas-landing",
  "schemaVersion": 2,
  "title": {
    "ja": "オーロラグラデーション SaaS ランディング",
    "en": "Aurora Gradient SaaS Landing"
  },
  "summary": {
    "ja": "濃紫から青緑へ溶けるグラデを主役にした、SaaS ヒーローセクション",
    "en": "A SaaS hero section built around a deep-purple-to-teal gradient"
  },
  "capturedAt": "2026-09-01",
  "categories": [
    "marketing"
  ],
  "tags": [
    "bold",
    "typography",
    "glassmorphism"
  ],
  "useCases": [
    "web-hero"
  ],
  "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": [
    {
      "ja": "4 ストップ以上のグラデは中間色が主役。繋ぎの色で印象が決まる",
      "en": "In a 4+ stop gradient the transition colors carry the impression, not the endpoints"
    },
    {
      "ja": "文字の占有を画面の 60% 以下に抑え、残りは背景に語らせる",
      "en": "Keep type within 60% of the frame and let the background carry the rest"
    },
    {
      "ja": "ガラス面は blur(20px) + 白 4〜8% の重ねが下限。薄いと沈む",
      "en": "Glass panels need at least blur(20px) plus a 4–8% white overlay"
    }
  ],
  "cover": "https://design-vault.pages.dev/_astro/cover.BS5Fmec-.png",
  "assets": [],
  "shortlist": true,
  "status": "published",
  "relations": {
    "similar": [
      "2026-04-18-fintech-mobile-dashboard"
    ]
  },
  "license": "Original",
  "publishedAt": null,
  "reproduction": {
    "spec": {
      "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"
      ]
    },
    "prompt": {
      "ja": "以下の仕様でページを 1 枚作ってください。\n\n- 版面 1440 × 900\n- 余白 上 120 右 160 下 120 左 160\n\n## 文字（版面 1440px に対する px）\nhero  72px / 700 / 字間 -.01em / 行送り 1.25\nsub  18px / 400 / 行送り 1.9\ncta  16px / 500\nnote  14px / 400\n\n## 配色\n地 #0B0224 / 面 #1A1131 / 文字 #F4F0FF / 補助 #A99EC8 / 強調 #2FB6A8 / 罫 #2E2350 / #3B1E8C / #6C3AC7\n\n## 外すと崩れる点\n- 4 ストップ以上のグラデは中間色が主役。繋ぎの色で印象が決まる\n- 文字の占有を画面の 60% 以下に抑え、残りは背景に語らせる\n- ガラス面は blur(20px) + 白 4〜8% の重ねが下限。薄いと沈む\n\n内容は［ここに自分の内容を書く］に置き換えてください。寸法と配色はそのまま守ってください。\n正確に再現する場合は、この HTML をそのまま使ってください: https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/pattern.html",
      "en": "Produce one page to the following specification.\n\n- Canvas 1440 × 900\n- Margin top 120 right 160 bottom 120 left 160\n\n## Type (px against a 1440px canvas)\nhero  72px / 700 / tracking -.01em / leading 1.25\nsub  18px / 400 / leading 1.9\ncta  16px / 500\nnote  14px / 400\n\n## Colour\nGround #0B0224 / Surface #1A1131 / Ink #F4F0FF / Muted #A99EC8 / Accent #2FB6A8 / Rule #2E2350 / #3B1E8C / #6C3AC7\n\n## Constraints — dropping these breaks it\n- In a 4+ stop gradient the transition colors carry the impression, not the endpoints\n- Keep type within 60% of the frame and let the background carry the rest\n- Glass panels need at least blur(20px) plus a 4–8% white overlay\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/2026-04-15-gradient-saas-landing/pattern.html."
    },
    "code": {
      "html": "<!doctype html>\n<meta charset=\"utf-8\">\n<title>オーロラグラデーション SaaS ランディング</title>\n<meta name=\"dv-font\" content=\"Zen Kaku Gothic New:400;500;700\">\n<link rel=\"stylesheet\" href=\"./font.css\">\n<style>\n  :root {\n    --ground: #0B0224; --surface: #1A1131; --ink: #F4F0FF;\n    --muted: #A99EC8; --accent: #2FB6A8; --rule: #2E2350;\n    --series-1: #3B1E8C; --series-2: #6C3AC7;\n    /* ガラス面の 3 値。役割は持たないが設計値なので、ここに名前で置く。 */\n    --glass-fill: rgba(255, 255, 255, .07);\n    --glass-edge: rgba(255, 255, 255, .14);\n    --glass-rule: rgba(255, 255, 255, .2);\n  }\n  * { box-sizing: border-box; margin: 0; }\n  html, body { width: 1440px; height: 900px; }\n  body { font-family: \"Zen Kaku Gothic New\", \"IPAGothic\", sans-serif; }\n  .artboard {\n    width: 1440px; height: 900px; color: var(--ink);\n    background: var(--ground);\n    padding: 120px 160px;\n    position: relative; overflow: hidden;\n  }\n  /* 4 ストップのグラデ。印象を作るのは端の色ではなく中間の 2 色。 */\n  .aurora {\n    position: absolute; inset: -20%;\n    background:\n      radial-gradient(58% 52% at 18% 22%, var(--series-1) 0%, transparent 62%),\n      radial-gradient(52% 46% at 82% 30%, var(--accent) 0%, transparent 58%),\n      radial-gradient(64% 58% at 52% 96%, var(--series-2) 0%, transparent 66%),\n      var(--ground);\n    filter: blur(10px);\n  }\n  .content { position: relative; height: 100%; display: grid; align-content: center; }\n  /* 文字の占有は画面の 60% 以下に抑え、残りは背景に語らせる。 */\n  .copy { max-width: 620px; display: grid; gap: 28px; }\n  .hero { font-size: 72px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }\n  .sub { font-size: 18px; font-weight: 400; line-height: 1.9; color: var(--muted); }\n  /* ガラス面は blur(20px) + 白 4〜8% が下限。薄いと沈む。 */\n  .glass {\n    margin-top: 20px; justify-self: start;\n    display: flex; align-items: center; gap: 20px;\n    background: var(--glass-fill);\n    backdrop-filter: blur(20px);\n    border: 1px solid var(--glass-edge);\n    padding: 20px 28px;\n  }\n  .cta { font-size: 16px; font-weight: 500; }\n  .glass span { width: 1px; height: 20px; background: var(--glass-rule); }\n  .note { font-size: 14px; font-weight: 400; color: var(--muted); }\n</style>\n<div class=\"artboard\" data-artboard>\n  <div class=\"aurora\"></div>\n  <div class=\"content\" data-content>\n    <div class=\"copy\">\n      <h1 class=\"hero\" data-type=\"hero\">問い合わせを、<br>止めずに減らす。</h1>\n      <p class=\"sub\" data-type=\"sub\">窓口の運用はそのままに、一次受けだけを切り出します。既存の手順書を書き換える必要はありません。</p>\n      <div class=\"glass\">\n        <p class=\"cta\" data-type=\"cta\">14 日間ためす</p>\n        <span></span>\n        <p class=\"note\" data-type=\"note\">クレジットカード不要</p>\n      </div>\n    </div>\n  </div>\n</div>\n",
      "url": "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/pattern.html",
      "fonts": [
        "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/font.css",
        "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/font-0.woff2",
        "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/font-1.woff2",
        "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing/font-2.woff2"
      ]
    }
  },
  "urls": {
    "ja": "https://design-vault.pages.dev/designs/2026-04-15-gradient-saas-landing",
    "en": "https://design-vault.pages.dev/en/designs/2026-04-15-gradient-saas-landing"
  },
  "notesMarkdown": "## この構成について / About this pattern\n\n出典を持たない自作パターン。**`pattern.html` が版そのもの**で、`cover.png` と frontmatter の\n`layout` / `type` / `colors` はどちらもそこから機械的に測った結果。編集するのは `pattern.html`\nだけで、寸法を手で書き直すことはない。\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- グラデは 4 ストップ以上。端の色ではなく、繋ぎに現れる中間色が印象を決める\n- ガラス面は `backdrop-filter: blur(20px)` + 白 7% が下限。これ未満だと地に沈む\n- 文字は版面の左 620px に収め、右側は背景に語らせる（占有を 60% 以下に保つ）\n\n### Apply to\n\n- プロダクトサイトのヒーローや LP のファーストビュー\n- 発表イベントのランディング（1 枚絵で世界観を伝えたい場面）"
}