{
  "id": "tide-table-shell",
  "name": "Almanac Shell",
  "theme": "tide-table",
  "category": "App Shell",
  "description": "An application frame with no chrome at all — the navigation is a ruled list in the margin and the only fill anywhere on screen is the input field.",
  "layout": "A 220px ruled sidebar and a content region separated by a single 1px rule that runs the full height, with a hairline breadcrumb strip above.",
  "modules": [
    {
      "key": "side",
      "name": "Ruled sidebar",
      "html": "\n<nav class=\"sb\"><span class=\"brand\">Almanac</span>\n  <ul><li class=\"hd\">Network</li><li class=\"on\"><a href=\"#\">Live readings</a></li><li><a href=\"#\">Forecast</a></li><li><a href=\"#\">Surge watch</a></li></ul>\n  <ul><li class=\"hd\">Reference</li><li><a href=\"#\">Stations</a></li><li><a href=\"#\">Sea areas</a></li><li><a href=\"#\">Datums</a></li><li><a href=\"#\">Method notes</a></li></ul>\n  <ul><li class=\"hd\">Output</li><li><a href=\"#\">Reports</a></li><li><a href=\"#\">Exports</a></li></ul>\n</nav>"
    },
    {
      "key": "crumbs",
      "name": "Breadcrumb strip",
      "html": "\n<div class=\"bc\"><a href=\"#\">Network</a><span>/</span><a href=\"#\">Orkney</a><span>/</span><b>Kirkwall Pier</b><label class=\"q\"><input type=\"search\" placeholder=\"Jump to station or code\"></label></div>"
    },
    {
      "key": "content",
      "name": "Content region",
      "html": "\n<main class=\"ct\"><h1>Kirkwall Pier</h1><p class=\"sub\">Station 4417 · Orkney · datum 2.41 m · reporting every six minutes</p>\n<table><thead><tr><th>Time</th><th>Observed</th><th>Predicted</th><th>Surge</th></tr></thead><tbody>\n<tr><td class=\"n\">09:12</td><td class=\"n\">4.61</td><td class=\"n\">4.57</td><td class=\"n\">+0.04</td></tr>\n<tr><td class=\"n\">09:06</td><td class=\"n\">4.58</td><td class=\"n\">4.55</td><td class=\"n\">+0.03</td></tr>\n<tr><td class=\"n\">09:00</td><td class=\"n\">4.55</td><td class=\"n\">4.52</td><td class=\"n\">+0.03</td></tr>\n<tr><td class=\"n\">08:54</td><td class=\"n\">4.51</td><td class=\"n\">4.49</td><td class=\"n\">+0.02</td></tr>\n<tr><td class=\"n\">08:48</td><td class=\"n\">4.47</td><td class=\"n\">4.46</td><td class=\"n\">+0.01</td></tr>\n</tbody></table>\n<p class=\"fn\">Next high water at <b class=\"hi\">14:08</b>, predicted 4.87 m.</p></main>"
    }
  ],
  "moduleCount": 3,
  "reorderable": false,
  "meta": {
    "id": "tide-table-shell",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T23:34:56+09:00",
    "updatedAt": "2026-09-01T23:34:56+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/tide-table-shell.json",
  "structure": "A 220px ruled sidebar and a content region separated by a single 1px rule that runs the full height, with a hairline breadcrumb strip above.",
  "html": "<div class=\"dz dz-tide-table-shell\" data-design=\"tide-table-shell\" data-theme=\"tide-table\">\n<section class=\"dz-mod\" data-mod=\"side\" aria-label=\"Ruled sidebar\">\n<nav class=\"sb\"><span class=\"brand\">Almanac</span>\n  <ul><li class=\"hd\">Network</li><li class=\"on\"><a href=\"#\">Live readings</a></li><li><a href=\"#\">Forecast</a></li><li><a href=\"#\">Surge watch</a></li></ul>\n  <ul><li class=\"hd\">Reference</li><li><a href=\"#\">Stations</a></li><li><a href=\"#\">Sea areas</a></li><li><a href=\"#\">Datums</a></li><li><a href=\"#\">Method notes</a></li></ul>\n  <ul><li class=\"hd\">Output</li><li><a href=\"#\">Reports</a></li><li><a href=\"#\">Exports</a></li></ul>\n</nav></section><div class=\"right\"><section class=\"dz-mod\" data-mod=\"crumbs\" aria-label=\"Breadcrumb strip\">\n<div class=\"bc\"><a href=\"#\">Network</a><span>/</span><a href=\"#\">Orkney</a><span>/</span><b>Kirkwall Pier</b><label class=\"q\"><input type=\"search\" placeholder=\"Jump to station or code\"></label></div></section><section class=\"dz-mod\" data-mod=\"content\" aria-label=\"Content region\">\n<main class=\"ct\"><h1>Kirkwall Pier</h1><p class=\"sub\">Station 4417 · Orkney · datum 2.41 m · reporting every six minutes</p>\n<table><thead><tr><th>Time</th><th>Observed</th><th>Predicted</th><th>Surge</th></tr></thead><tbody>\n<tr><td class=\"n\">09:12</td><td class=\"n\">4.61</td><td class=\"n\">4.57</td><td class=\"n\">+0.04</td></tr>\n<tr><td class=\"n\">09:06</td><td class=\"n\">4.58</td><td class=\"n\">4.55</td><td class=\"n\">+0.03</td></tr>\n<tr><td class=\"n\">09:00</td><td class=\"n\">4.55</td><td class=\"n\">4.52</td><td class=\"n\">+0.03</td></tr>\n<tr><td class=\"n\">08:54</td><td class=\"n\">4.51</td><td class=\"n\">4.49</td><td class=\"n\">+0.02</td></tr>\n<tr><td class=\"n\">08:48</td><td class=\"n\">4.47</td><td class=\"n\">4.46</td><td class=\"n\">+0.01</td></tr>\n</tbody></table>\n<p class=\"fn\">Next high water at <b class=\"hi\">14:08</b>, predicted 4.87 m.</p></main></section></div>\n</div>",
  "css": "\n.dz-tide-table-shell { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 220px 1fr; min-height: 620px; }\n.dz-tide-table-shell .sb { border-right: 1px solid var(--border); padding: 22px 20px; }\n.dz-tide-table-shell .brand { font-family: var(--pv-display); font-size: 18px; font-weight: 600; display: block; margin-bottom: 24px; }\n.dz-tide-table-shell .sb ul { list-style: none; margin: 0 0 22px; padding: 0; }\n.dz-tide-table-shell .hd { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); padding: 0 0 6px; }\n.dz-tide-table-shell .sb a { display: block; padding: 6px 0; text-decoration: none; color: var(--foreground); font-size: 14px; border-bottom: 1px solid color-mix(in oklab, var(--border) 45%, transparent); }\n.dz-tide-table-shell .sb li.on a { color: var(--primary); font-weight: 600; }\n.dz-tide-table-shell .right { display: grid; grid-template-rows: auto 1fr; }\n.dz-tide-table-shell .bc { display: flex; align-items: center; gap: 9px; padding: 12px 26px; border-bottom: 1px solid var(--border); font-size: 13px; }\n.dz-tide-table-shell .bc a { color: var(--muted-foreground); text-decoration: none; }\n.dz-tide-table-shell .bc span { color: var(--muted-foreground); }\n.dz-tide-table-shell .q { margin-left: auto; }\n.dz-tide-table-shell .q input { padding: 7px 11px; font: inherit; font-size: 13px; background: var(--card); border: 1px solid var(--input); border-radius: var(--pv-radius-sm); color: var(--foreground); width: 240px; }\n.dz-tide-table-shell .ct { padding: 26px; }\n.dz-tide-table-shell h1 { font-family: var(--pv-display); font-size: 46px; font-weight: 500; margin: 0 0 6px; letter-spacing: -.02em; }\n.dz-tide-table-shell .sub { font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); margin: 0 0 24px; }\n.dz-tide-table-shell table { width: 100%; border-collapse: collapse; max-width: 620px; }\n.dz-tide-table-shell th { text-align: right; font-family: var(--pv-body); text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); padding: 0 0 9px; border-bottom: 2px solid var(--border); }\n.dz-tide-table-shell th:first-child { text-align: left; }\n.dz-tide-table-shell td { padding: 9px 0; text-align: right; border-bottom: 1px solid color-mix(in oklab, var(--border) 55%, transparent); }\n.dz-tide-table-shell td:first-child { text-align: left; color: var(--muted-foreground); }\n.dz-tide-table-shell .n { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; font-size: 13px; }\n.dz-tide-table-shell .fn { margin: 18px 0 0; font-size: 13.5px; }\n.dz-tide-table-shell .hi { color: var(--accent); font-family: var(--pv-mono); }\n",
  "requiredTheme": "/api/v1/themes/tide-table.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Spectral:wght@400;500;600;700&family=Inconsolata:wght@400;500;600;700&display=swap"
}