{
  "id": "rosewater-school-day",
  "name": "The Day",
  "theme": "rosewater-school",
  "category": "App Shell",
  "description": "The screen a parent opens at 7:40am: the child’s name at 58px above everything including the navigation, then the allergy strip, then the day as a timeline.",
  "layout": "Name header first in document order, navigation second, then a vertical timeline with times in a 56px left gutter and filled cards to their right.",
  "modules": [
    {
      "key": "name",
      "name": "Name header",
      "html": "\n<header class=\"nh\"><h1>Ines</h1><p class=\"who\">Bluebell room · key person Sam O.</p><div class=\"sib\"><span class=\"ch\">Ines</span><span class=\"ch off\">Tobias</span></div></header>"
    },
    {
      "key": "allergy",
      "name": "Allergy strip",
      "html": "\n<div class=\"al\"><span class=\"b\">Sesame · severe</span><span>Kitchen and room staff notified. Epipen in the Bluebell cupboard, in date until 08/2027.</span></div>"
    },
    {
      "key": "nav",
      "name": "Navigation",
      "html": "\n<nav class=\"nv\"><a class=\"on\" href=\"#\">Today</a><a href=\"#\">Photos</a><a href=\"#\">Messages</a><a href=\"#\">Bookings</a><a href=\"#\">Account</a></nav>"
    },
    {
      "key": "timeline",
      "name": "Day timeline",
      "html": "\n<section class=\"tl\">\n<article><span class=\"t\">08:12</span><div class=\"cd\"><h2>Arrived</h2><p>Came in happily, went straight to the water tray. Handover from you: slept badly, may need an early nap.</p></div></article>\n<article><span class=\"t\">09:30</span><div class=\"cd\"><h2>Snack</h2><p>Half a pear and most of a rice cake. Drank a full cup of water.</p></div></article>\n<article><span class=\"t\">10:05</span><div class=\"cd\"><h2>Outdoors</h2><p>Mud kitchen for nearly an hour. Made something she described at length as “soup for the birds”.</p><img src=\"{{ART garden}}\" alt=\"{{ARTALT garden}}\"></div></article>\n<article><span class=\"t\">11:40</span><div class=\"cd\"><h2>Lunch</h2><p>Pasta with tomato — sesame-free batch, checked by Sam. Ate all of it.</p></div></article>\n<article><span class=\"t\">12:20</span><div class=\"cd\"><h2>Nap</h2><p>Asleep 12:20, awake 13:55. A long one, as predicted.</p></div></article>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "rosewater-school-day",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:14:26+09:00",
    "updatedAt": "2026-09-02T01:14:26+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/rosewater-school-day.json",
  "structure": "Name header first in document order, navigation second, then a vertical timeline with times in a 56px left gutter and filled cards to their right.",
  "html": "<div class=\"dz dz-rosewater-school-day\" data-design=\"rosewater-school-day\" data-theme=\"rosewater-school\">\n<section class=\"dz-mod\" data-mod=\"name\" aria-label=\"Name header\">\n<header class=\"nh\"><h1>Ines</h1><p class=\"who\">Bluebell room · key person Sam O.</p><div class=\"sib\"><span class=\"ch\">Ines</span><span class=\"ch off\">Tobias</span></div></header></section>\n<section class=\"dz-mod\" data-mod=\"allergy\" aria-label=\"Allergy strip\">\n<div class=\"al\"><span class=\"b\">Sesame · severe</span><span>Kitchen and room staff notified. Epipen in the Bluebell cupboard, in date until 08/2027.</span></div></section>\n<section class=\"dz-mod\" data-mod=\"nav\" aria-label=\"Navigation\">\n<nav class=\"nv\"><a class=\"on\" href=\"#\">Today</a><a href=\"#\">Photos</a><a href=\"#\">Messages</a><a href=\"#\">Bookings</a><a href=\"#\">Account</a></nav></section>\n<section class=\"dz-mod\" data-mod=\"timeline\" aria-label=\"Day timeline\">\n<section class=\"tl\">\n<article><span class=\"t\">08:12</span><div class=\"cd\"><h2>Arrived</h2><p>Came in happily, went straight to the water tray. Handover from you: slept badly, may need an early nap.</p></div></article>\n<article><span class=\"t\">09:30</span><div class=\"cd\"><h2>Snack</h2><p>Half a pear and most of a rice cake. Drank a full cup of water.</p></div></article>\n<article><span class=\"t\">10:05</span><div class=\"cd\"><h2>Outdoors</h2><p>Mud kitchen for nearly an hour. Made something she described at length as “soup for the birds”.</p><img src=\"https://designlookbook.dev/assets/img/rosewater-school-garden.webp\" alt=\"A row of small planted pots on a wooden step outdoors\"></div></article>\n<article><span class=\"t\">11:40</span><div class=\"cd\"><h2>Lunch</h2><p>Pasta with tomato — sesame-free batch, checked by Sam. Ate all of it.</p></div></article>\n<article><span class=\"t\">12:20</span><div class=\"cd\"><h2>Nap</h2><p>Asleep 12:20, awake 13:55. A long one, as predicted.</p></div></article>\n</section></section>\n</div>",
  "css": "\n.dz-rosewater-school-day { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; max-width: 720px; }\n.dz-rosewater-school-day .nh { margin-bottom: 14px; }\n.dz-rosewater-school-day h1 { font-family: var(--pv-display); font-weight: 600; font-size: 58px; line-height: 1.04; letter-spacing: -.02em; margin: 0; }\n.dz-rosewater-school-day .who { font-size: 13.5px; font-weight: 600; color: var(--muted-foreground); margin: 6px 0 12px; }\n.dz-rosewater-school-day .sib { display: flex; gap: 8px; }\n.dz-rosewater-school-day .ch { background: var(--accent); color: var(--accent-foreground); border-radius: 9999px; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }\n.dz-rosewater-school-day .ch.off { background: var(--secondary); color: var(--muted-foreground); }\n.dz-rosewater-school-day .al { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; background: color-mix(in oklab, var(--destructive) 10%, transparent); border-left: 4px solid var(--destructive); border-radius: 0 14px 14px 0; padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; font-weight: 600; }\n.dz-rosewater-school-day .al .b { color: var(--destructive); }\n.dz-rosewater-school-day .nv { display: flex; gap: 18px; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 22px; }\n.dz-rosewater-school-day .nv a { color: var(--muted-foreground); text-decoration: none; font-size: 15px; font-weight: 600; }\n.dz-rosewater-school-day .nv a.on { color: var(--primary); }\n.dz-rosewater-school-day .tl article { display: grid; grid-template-columns: 56px 1fr; gap: 14px; margin-bottom: 14px; }\n.dz-rosewater-school-day .t { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); padding-top: 22px; }\n.dz-rosewater-school-day .cd { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px; box-shadow: 0 8px 22px -16px color-mix(in oklab, var(--foreground) 60%, transparent); }\n.dz-rosewater-school-day h2 { font-size: 21px; font-weight: 600; margin: 0 0 6px; }\n.dz-rosewater-school-day .cd p { margin: 0; font-size: 15.5px; line-height: 1.64; }\n.dz-rosewater-school-day .cd img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 14px; margin-top: 12px; filter: var(--img-filter); }\n@media (prefers-reduced-motion: reduce) { .dz-rosewater-school-day *, .dz-rosewater-school-day *::before, .dz-rosewater-school-day *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/rosewater-school.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Fraunces:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Nanum+Gothic+Coding:wght@400;500;600;700&display=swap"
}