{
  "id": "rosewater-school-portrait",
  "name": "Portrait",
  "theme": "rosewater-school",
  "category": "Profile & Social",
  "description": "A child’s record where the name is the whole header and the observations are a warm feed of moments rather than a table of assessment codes.",
  "layout": "The name header, then a two-column split of a narrow key-facts rail and a wide observation feed with rounded photographs.",
  "modules": [
    {
      "key": "name",
      "name": "Name header",
      "html": "\n<header class=\"nh\"><h1>Ines Whitlock</h1><p class=\"who\">Bluebell room · 3 years 4 months · with us since September 2024</p></header>"
    },
    {
      "key": "facts",
      "name": "Key facts rail",
      "html": "\n<aside class=\"fc\"><div class=\"fr\"><span class=\"l\">Key person</span><p>Sam Okonjo</p></div><div class=\"fr\"><span class=\"l\">Usual days</span><p>Mon, Tue, Thu, Fri</p></div><div class=\"fr\"><span class=\"l\">Collected by</span><p>Ada Whitlock, Jon Whitlock, Marta Reyes (grandmother)</p></div><div class=\"fr\"><span class=\"l\">Allergies</span><p class=\"bad\">Sesame · severe</p></div><div class=\"fr\"><span class=\"l\">Naps</span><p>Usually 12:15–13:30</p></div><div class=\"fr\"><span class=\"l\">Comfort</span><p>A grey rabbit called Bear. Lives in her bag.</p></div></aside>"
    },
    {
      "key": "feed",
      "name": "Observation feed",
      "html": "\n<section class=\"fd\">\n<article><div class=\"mh\"><span class=\"ch\">Curiosity</span><span class=\"dt\">12 March</span></div><p>Spent forty minutes at the mud kitchen mixing what she called soup for the birds, then insisted on taking a bowl of it to the fence line to leave for them. Came back to check on it three times.</p><img src=\"{{ART garden}}\" alt=\"{{ARTALT garden}}\"><p class=\"by\">Observed by Sam O.</p></article>\n<article><div class=\"mh\"><span class=\"ch\">Making</span><span class=\"dt\">08 March</span></div><p>Rolled dough with Tobias for a long time without either of them asking an adult for anything. Ines did most of the flour.</p><img src=\"{{ART table}}\" alt=\"{{ARTALT table}}\"><p class=\"by\">Observed by Priya N.</p></article>\n<article><div class=\"mh\"><span class=\"ch\">Colour</span><span class=\"dt\">04 March</span></div><p>Mixed green and pink deliberately and repeatedly to see what happened, and was not satisfied with the answer.</p><img src=\"{{ART paint}}\" alt=\"{{ARTALT paint}}\"><p class=\"by\">Observed by Sam O.</p></article>\n</section>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "rosewater-school-portrait",
    "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-portrait.json",
  "structure": "The name header, then a two-column split of a narrow key-facts rail and a wide observation feed with rounded photographs.",
  "html": "<div class=\"dz dz-rosewater-school-portrait\" data-design=\"rosewater-school-portrait\" data-theme=\"rosewater-school\">\n<section class=\"dz-mod\" data-mod=\"name\" aria-label=\"Name header\">\n<header class=\"nh\"><h1>Ines Whitlock</h1><p class=\"who\">Bluebell room · 3 years 4 months · with us since September 2024</p></header></section>\n<section class=\"dz-mod\" data-mod=\"facts\" aria-label=\"Key facts rail\">\n<aside class=\"fc\"><div class=\"fr\"><span class=\"l\">Key person</span><p>Sam Okonjo</p></div><div class=\"fr\"><span class=\"l\">Usual days</span><p>Mon, Tue, Thu, Fri</p></div><div class=\"fr\"><span class=\"l\">Collected by</span><p>Ada Whitlock, Jon Whitlock, Marta Reyes (grandmother)</p></div><div class=\"fr\"><span class=\"l\">Allergies</span><p class=\"bad\">Sesame · severe</p></div><div class=\"fr\"><span class=\"l\">Naps</span><p>Usually 12:15–13:30</p></div><div class=\"fr\"><span class=\"l\">Comfort</span><p>A grey rabbit called Bear. Lives in her bag.</p></div></aside></section>\n<section class=\"dz-mod\" data-mod=\"feed\" aria-label=\"Observation feed\">\n<section class=\"fd\">\n<article><div class=\"mh\"><span class=\"ch\">Curiosity</span><span class=\"dt\">12 March</span></div><p>Spent forty minutes at the mud kitchen mixing what she called soup for the birds, then insisted on taking a bowl of it to the fence line to leave for them. Came back to check on it three times.</p><img src=\"https://designlookbook.dev/assets/img/rosewater-school-garden.webp\" alt=\"A row of small planted pots on a wooden step outdoors\"><p class=\"by\">Observed by Sam O.</p></article>\n<article><div class=\"mh\"><span class=\"ch\">Making</span><span class=\"dt\">08 March</span></div><p>Rolled dough with Tobias for a long time without either of them asking an adult for anything. Ines did most of the flour.</p><img src=\"https://designlookbook.dev/assets/img/rosewater-school-table.webp\" alt=\"Small hands pressing dough on a floured table\"><p class=\"by\">Observed by Priya N.</p></article>\n<article><div class=\"mh\"><span class=\"ch\">Colour</span><span class=\"dt\">04 March</span></div><p>Mixed green and pink deliberately and repeatedly to see what happened, and was not satisfied with the answer.</p><img src=\"https://designlookbook.dev/assets/img/rosewater-school-paint.webp\" alt=\"Thick poster paint mixed on a tray in green and pink\"><p class=\"by\">Observed by Sam O.</p></article>\n</section></section>\n</div>",
  "css": "\n.dz-rosewater-school-portrait { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px; }\n.dz-rosewater-school-portrait .nh { margin-bottom: 22px; }\n.dz-rosewater-school-portrait 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-portrait .who { font-size: 13.5px; font-weight: 600; color: var(--muted-foreground); margin: 8px 0 0; }\n.dz-rosewater-school-portrait { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }\n.dz-rosewater-school-portrait .nh { grid-column: 1 / -1; }\n.dz-rosewater-school-portrait .fc { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 20px; }\n.dz-rosewater-school-portrait .fr { padding: 10px 0; border-bottom: 1px solid var(--border); }\n.dz-rosewater-school-portrait .fr:last-child { border-bottom: 0; }\n.dz-rosewater-school-portrait .l { letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); display: block; margin-bottom: 4px; }\n.dz-rosewater-school-portrait .fr p { margin: 0; font-size: 15px; line-height: 1.5; }\n.dz-rosewater-school-portrait .bad { color: var(--destructive); font-weight: 600; }\n.dz-rosewater-school-portrait .fd article { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 8px 22px -16px color-mix(in oklab, var(--foreground) 60%, transparent); }\n.dz-rosewater-school-portrait .mh { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }\n.dz-rosewater-school-portrait .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-portrait .dt { font-family: var(--pv-mono); font-size: 13px; color: var(--muted-foreground); margin-left: auto; }\n.dz-rosewater-school-portrait .fd p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.64; }\n.dz-rosewater-school-portrait .fd img { width: 100%; height: 260px; object-fit: cover; display: block; border-radius: 14px; filter: var(--img-filter); }\n.dz-rosewater-school-portrait .by { letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--muted-foreground); margin: 10px 0 0; }\n@media (prefers-reduced-motion: reduce) { .dz-rosewater-school-portrait *, .dz-rosewater-school-portrait *::before, .dz-rosewater-school-portrait *::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"
}