{
  "id": "bloom-lab-front",
  "name": "Lab Front",
  "theme": "bloom-lab",
  "category": "Landing",
  "description": "A consumer lab homepage that leads with a photograph of the actual thing rather than a smiling stock model, and prices the panel on the first screen.",
  "layout": "An asymmetric hero with the headline in a 5-column card overlapping a 7-column photograph by 60px, then a pill-shaped three-step band and a full-width specimen strip.",
  "modules": [
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<header class=\"nv\"><span class=\"br\">bloom</span><nav><a href=\"#\">Panels</a><a href=\"#\">How it works</a><a href=\"#\">Science</a><a href=\"#\">Clinics</a></nav><a class=\"cta\" href=\"#\">Order a panel</a></header>"
    },
    {
      "key": "photo",
      "name": "Hero photo",
      "html": "\n<figure class=\"ph\"><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure>"
    },
    {
      "key": "hero",
      "name": "Hero card",
      "html": "\n<div class=\"hr\"><span class=\"k\">Blood panels</span>\n<h1>Ten markers. Four days. One page you can actually read.</h1>\n<p>Drawn at a clinic near you, run in an accredited lab, and reported against your own history rather than a population average.</p>\n<div class=\"act\"><a class=\"go\" href=\"#\">Order · £89</a><a class=\"lnk\" href=\"#\">See a sample report</a></div></div>"
    },
    {
      "key": "steps",
      "name": "Three steps",
      "html": "\n<section class=\"st\">\n  <div><span class=\"n\">1</span><b>Book a draw</b><p>Six hundred clinics. Most have same-week slots.</p></div>\n  <div><span class=\"n\">2</span><b>We run the panel</b><p>Accredited lab, results in four working days.</p></div>\n  <div><span class=\"n\">3</span><b>Read the report</b><p>Every marker against its range and your last four.</p></div>\n</section>"
    },
    {
      "key": "strip",
      "name": "Specimen strip",
      "html": "\n<section class=\"sp\">\n  <figure><img src=\"{{ART petri}}\" alt=\"{{ARTALT petri}}\"><figcaption>Cultures</figcaption></figure>\n  <figure><img src=\"{{ART sprout}}\" alt=\"{{ARTALT sprout}}\"><figcaption>Growth</figcaption></figure>\n  <figure><img src=\"{{ART leaf}}\" alt=\"{{ARTALT leaf}}\"><figcaption>Structure</figcaption></figure>\n  <figure><img src=\"{{ART gradient}}\" alt=\"{{ARTALT gradient}}\"><figcaption>Titration</figcaption></figure>\n</section>"
    }
  ],
  "moduleCount": 5,
  "reorderable": false,
  "meta": {
    "id": "bloom-lab-front",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T19:48:21+09:00",
    "updatedAt": "2026-09-01T19:48:21+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/bloom-lab-front.json",
  "structure": "An asymmetric hero with the headline in a 5-column card overlapping a 7-column photograph by 60px, then a pill-shaped three-step band and a full-width specimen strip.",
  "html": "<div class=\"dz dz-bloom-lab-front\" data-design=\"bloom-lab-front\" data-theme=\"bloom-lab\">\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<header class=\"nv\"><span class=\"br\">bloom</span><nav><a href=\"#\">Panels</a><a href=\"#\">How it works</a><a href=\"#\">Science</a><a href=\"#\">Clinics</a></nav><a class=\"cta\" href=\"#\">Order a panel</a></header></section><section class=\"dz-mod\" data-mod=\"photo\" aria-label=\"Hero photo\">\n<figure class=\"ph\"><img src=\"https://designlookbook.dev/assets/img/bloom-lab-hero.webp\" alt=\"Glass laboratory vessels holding acid green liquid on a mint bench\"></figure></section><section class=\"dz-mod\" data-mod=\"hero\" aria-label=\"Hero card\">\n<div class=\"hr\"><span class=\"k\">Blood panels</span>\n<h1>Ten markers. Four days. One page you can actually read.</h1>\n<p>Drawn at a clinic near you, run in an accredited lab, and reported against your own history rather than a population average.</p>\n<div class=\"act\"><a class=\"go\" href=\"#\">Order · £89</a><a class=\"lnk\" href=\"#\">See a sample report</a></div></div></section><section class=\"dz-mod\" data-mod=\"steps\" aria-label=\"Three steps\">\n<section class=\"st\">\n  <div><span class=\"n\">1</span><b>Book a draw</b><p>Six hundred clinics. Most have same-week slots.</p></div>\n  <div><span class=\"n\">2</span><b>We run the panel</b><p>Accredited lab, results in four working days.</p></div>\n  <div><span class=\"n\">3</span><b>Read the report</b><p>Every marker against its range and your last four.</p></div>\n</section></section><section class=\"dz-mod\" data-mod=\"strip\" aria-label=\"Specimen strip\">\n<section class=\"sp\">\n  <figure><img src=\"https://designlookbook.dev/assets/img/bloom-lab-petri.webp\" alt=\"Petri dishes with soft green and plum cultures arranged in a grid\"><figcaption>Cultures</figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/bloom-lab-sprout.webp\" alt=\"A seedling in a clear vial against a pale mint ground\"><figcaption>Growth</figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/bloom-lab-leaf.webp\" alt=\"A backlit leaf showing its vein structure in acid green\"><figcaption>Structure</figcaption></figure>\n  <figure><img src=\"https://designlookbook.dev/assets/img/bloom-lab-gradient.webp\" alt=\"A row of test tubes stepping from mint to deep plum\"><figcaption>Titration</figcaption></figure>\n</section></section>\n</div>",
  "css": "\n.dz-bloom-lab-front { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 22px; padding: 0 30px 30px; }\n.dz-bloom-lab-front .nv { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; padding: 20px 0 26px; }\n.dz-bloom-lab-front .br { font-family: var(--pv-display); font-size: 22px; font-weight: 600; color: var(--primary); }\n.dz-bloom-lab-front .nv nav { display: flex; gap: 22px; margin-left: 12px; }\n.dz-bloom-lab-front .nv a { font-size: 14px; color: var(--muted-foreground); text-decoration: none; }\n.dz-bloom-lab-front .nv a:hover { color: var(--foreground); }\n.dz-bloom-lab-front .cta { margin-left: auto; font-size: 14px; background: var(--primary); color: var(--primary-foreground) !important; border-radius: 999px; padding: 11px 22px; }\n.dz-bloom-lab-front .ph { grid-column: 6 / -1; grid-row: 2; margin: 0; border-radius: var(--pv-radius-xl); overflow: hidden; }\n.dz-bloom-lab-front .ph img { width: 100%; height: 330px; object-fit: cover; display: block; filter: var(--img-filter); }\n.dz-bloom-lab-front .hr { grid-column: 1 / 7; grid-row: 2; background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); align-self: center; padding: 30px 28px; z-index: 1; }\n.dz-bloom-lab-front .k { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); }\n.dz-bloom-lab-front .hr h1 { font-family: var(--pv-display); font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; margin: 10px 0 14px; }\n.dz-bloom-lab-front .hr p { font-size: 16px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 22px; }\n.dz-bloom-lab-front .act { display: flex; align-items: center; gap: 20px; }\n.dz-bloom-lab-front .go { font-size: 15px; background: var(--primary); color: var(--primary-foreground); border-radius: 999px; padding: 14px 28px; text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: inline-block; }\n.dz-bloom-lab-front .go:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); }\n.dz-bloom-lab-front .lnk { font-size: 14px; color: var(--accent); }\n.dz-bloom-lab-front .st { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 40px 0 34px; }\n.dz-bloom-lab-front .st div { background: var(--card); border-radius: var(--pv-radius); box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent), 0 2px 6px -3px color-mix(in srgb, var(--foreground) 12%, transparent); padding: 22px 24px; }\n.dz-bloom-lab-front .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 16%, transparent); font-family: var(--pv-mono); font-size: 14px; font-weight: 600; color: var(--primary); }\n.dz-bloom-lab-front .st b { display: block; font-size: 19px; font-weight: 600; margin: 12px 0 6px; }\n.dz-bloom-lab-front .st p { font-size: 14.5px; line-height: 1.55; color: var(--muted-foreground); margin: 0; }\n.dz-bloom-lab-front .sp { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }\n.dz-bloom-lab-front .sp figure { margin: 0; }\n.dz-bloom-lab-front .sp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--pv-radius); filter: var(--img-filter); }\n.dz-bloom-lab-front .sp figcaption { font-size: 12.5px; font-weight: 600; color: var(--muted-foreground); padding-top: 9px; }\n@media (prefers-reduced-motion: reduce) { .dz-bloom-lab-front *, .dz-bloom-lab-front *::before, .dz-bloom-lab-front *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/bloom-lab.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=DM+Mono:wght@400;500;600;700&display=swap"
}