{
  "id": "moss-atlas-species",
  "name": "Species Index",
  "theme": "moss-atlas",
  "category": "Search & Browse",
  "description": "A species list where the photographs are small and the Latin names are large, because the people using this already know what the plant looks like.",
  "layout": "A ruled list at 72px per row with a 56px specimen square on the left and the distribution shown as a twelve-cell month strip on the right of each row.",
  "modules": [
    {
      "key": "head",
      "name": "Header",
      "html": "\n<header class=\"hd\"><h1>Species index</h1><div class=\"sr\"><input type=\"search\" value=\"sphagnum\" aria-label=\"Search species\"><button type=\"button\">Search</button></div><span class=\"m\">214 recorded this season · 1,180 in the atlas</span></header>"
    },
    {
      "key": "filters",
      "name": "Filter line",
      "html": "\n<div class=\"fl\"><span class=\"k\">Group</span><a class=\"on\" href=\"#\">Bryophytes</a><a href=\"#\">Lichens</a><a href=\"#\">Vascular</a><a href=\"#\">Fungi</a><span class=\"sep\"></span><span class=\"k\">Status</span><a href=\"#\">All</a><a class=\"on\" href=\"#\">Recorded here</a><a href=\"#\">Expected, not found</a></div>"
    },
    {
      "key": "list",
      "name": "Species rows",
      "html": "\n<ol class=\"sl\">\n  <li><figure><img src=\"{{ART moss}}\" alt=\"{{ARTALT moss}}\"></figure><div><h2>Sphagnum capillifolium</h2><span class=\"cn\">Acute-leaved bog-moss</span></div><span class=\"ab\">Abundant</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i></div><span class=\"ct\">41</span></li>\n  <li><figure><img src=\"{{ART specimen}}\" alt=\"{{ARTALT specimen}}\"></figure><div><h2>Sphagnum papillosum</h2><span class=\"cn\">Papillose bog-moss</span></div><span class=\"ab\">Frequent</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i><i class=\"a\"></i></div><span class=\"ct\">28</span></li>\n  <li><figure><img src=\"{{ART trail}}\" alt=\"{{ARTALT trail}}\"></figure><div><h2>Sphagnum palustre</h2><span class=\"cn\">Blunt-leaved bog-moss</span></div><span class=\"ab\">Occasional</span><div class=\"ms\"><i></i><i></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i><i></i><i></i></div><span class=\"ct\">12</span></li>\n  <li><figure><img src=\"{{ART hero}}\" alt=\"{{ARTALT hero}}\"></figure><div><h2>Sphagnum cuspidatum</h2><span class=\"cn\">Feathery bog-moss</span></div><span class=\"ab\">Rare here</span><div class=\"ms\"><i></i><i></i><i></i><i></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"a\"></i><i></i><i></i><i></i><i></i><i></i></div><span class=\"ct\">3</span></li>\n  <li><figure><img src=\"{{ART ridge}}\" alt=\"{{ARTALT ridge}}\"></figure><div><h2>Sphagnum fallax</h2><span class=\"cn\">Flat-topped bog-moss</span></div><span class=\"ab\">Frequent</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i></div><span class=\"ct\">34</span></li>\n</ol>"
    },
    {
      "key": "legend",
      "name": "Month legend",
      "html": "\n<footer class=\"lg\"><span class=\"k\">Recording months</span><div class=\"mn\"><span>J</span><span>F</span><span>M</span><span>A</span><span>M</span><span>J</span><span>J</span><span>A</span><span>S</span><span>O</span><span>N</span><span>D</span></div><span class=\"m\">Darker cells are months in which the species was recorded in more than half of visits.</span></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "moss-atlas-species",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:03:43+09:00",
    "updatedAt": "2026-09-01T20:03:43+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/moss-atlas-species.json",
  "structure": "A ruled list at 72px per row with a 56px specimen square on the left and the distribution shown as a twelve-cell month strip on the right of each row.",
  "html": "<div class=\"dz dz-moss-atlas-species\" data-design=\"moss-atlas-species\" data-theme=\"moss-atlas\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Header\">\n<header class=\"hd\"><h1>Species index</h1><div class=\"sr\"><input type=\"search\" value=\"sphagnum\" aria-label=\"Search species\"><button type=\"button\">Search</button></div><span class=\"m\">214 recorded this season · 1,180 in the atlas</span></header></section>\n<section class=\"dz-mod\" data-mod=\"filters\" aria-label=\"Filter line\">\n<div class=\"fl\"><span class=\"k\">Group</span><a class=\"on\" href=\"#\">Bryophytes</a><a href=\"#\">Lichens</a><a href=\"#\">Vascular</a><a href=\"#\">Fungi</a><span class=\"sep\"></span><span class=\"k\">Status</span><a href=\"#\">All</a><a class=\"on\" href=\"#\">Recorded here</a><a href=\"#\">Expected, not found</a></div></section>\n<section class=\"dz-mod\" data-mod=\"list\" aria-label=\"Species rows\">\n<ol class=\"sl\">\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/moss-atlas-moss.webp\" alt=\"Close-up of moss and lichen on wet bark\"></figure><div><h2>Sphagnum capillifolium</h2><span class=\"cn\">Acute-leaved bog-moss</span></div><span class=\"ab\">Abundant</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i></div><span class=\"ct\">41</span></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/moss-atlas-specimen.webp\" alt=\"Pressed leaves and lichen laid out on green board\"></figure><div><h2>Sphagnum papillosum</h2><span class=\"cn\">Papillose bog-moss</span></div><span class=\"ab\">Frequent</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i><i class=\"a\"></i></div><span class=\"ct\">28</span></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/moss-atlas-trail.webp\" alt=\"A narrow trail marked with an amber blaze on a green trunk\"></figure><div><h2>Sphagnum palustre</h2><span class=\"cn\">Blunt-leaved bog-moss</span></div><span class=\"ab\">Occasional</span><div class=\"ms\"><i></i><i></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i><i></i><i></i></div><span class=\"ct\">12</span></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/moss-atlas-hero.webp\" alt=\"A dense forest floor in deep green with one shaft of amber light\"></figure><div><h2>Sphagnum cuspidatum</h2><span class=\"cn\">Feathery bog-moss</span></div><span class=\"ab\">Rare here</span><div class=\"ms\"><i></i><i></i><i></i><i></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"a\"></i><i></i><i></i><i></i><i></i><i></i></div><span class=\"ct\">3</span></li>\n  <li><figure><img src=\"https://designlookbook.dev/assets/img/moss-atlas-ridge.webp\" alt=\"A green ridge line under low amber evening light\"></figure><div><h2>Sphagnum fallax</h2><span class=\"cn\">Flat-topped bog-moss</span></div><span class=\"ab\">Frequent</span><div class=\"ms\"><i class=\"a\"></i><i class=\"a\"></i><i class=\"a\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"b\"></i><i class=\"a\"></i><i class=\"a\"></i><i></i><i></i></div><span class=\"ct\">34</span></li>\n</ol></section>\n<section class=\"dz-mod\" data-mod=\"legend\" aria-label=\"Month legend\">\n<footer class=\"lg\"><span class=\"k\">Recording months</span><div class=\"mn\"><span>J</span><span>F</span><span>M</span><span>A</span><span>M</span><span>J</span><span>J</span><span>A</span><span>S</span><span>O</span><span>N</span><span>D</span></div><span class=\"m\">Darker cells are months in which the species was recorded in more than half of visits.</span></footer></section>\n</div>",
  "css": "\n.dz-moss-atlas-species { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 30px 28px; }\n.dz-moss-atlas-species .hd { display: flex; align-items: center; gap: 20px; padding: 26px 0 18px; flex-wrap: wrap; }\n.dz-moss-atlas-species .hd h1 { font-family: var(--pv-display); font-size: 38px; font-weight: 600; margin: 0; }\n.dz-moss-atlas-species .sr { display: flex; gap: 10px; margin-left: auto; }\n.dz-moss-atlas-species .sr input { font: inherit; font-size: 14px; background: var(--card); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius); background: var(--secondary); color: var(--foreground); padding: 9px 13px; width: 240px; }\n.dz-moss-atlas-species .sr input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.dz-moss-atlas-species .sr button { font: inherit; font-size: 13.5px; background: var(--primary); color: var(--primary-foreground); border: 0; border-radius: var(--pv-radius-md); padding: 9px 18px; cursor: pointer; }\n.dz-moss-atlas-species .m { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-species .hd .m { width: 100%; }\n.dz-moss-atlas-species .fl { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: var(--pv-bw) solid var(--border); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-moss-atlas-species .k { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-moss-atlas-species .fl a { font-size: 13px; color: var(--muted-foreground); text-decoration: none; }\n.dz-moss-atlas-species .fl a:hover, .dz-moss-atlas-species .fl a.on { color: var(--primary); }\n.dz-moss-atlas-species .sep { width: 1px; height: 14px; background: var(--border); margin: 0 6px; }\n.dz-moss-atlas-species .sl { list-style: none; margin: 0; padding: 0; }\n.dz-moss-atlas-species .sl li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 100px 200px 44px; align-items: center; gap: 18px; padding: 8px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-moss-atlas-species .sl figure { margin: 0; }\n.dz-moss-atlas-species .sl img { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: var(--pv-radius-sm); border: var(--pv-bw) solid var(--border); filter: var(--img-filter); }\n.dz-moss-atlas-species .sl h2 { font-family: var(--pv-display); font-size: 20px; font-weight: 600; font-style: italic; margin: 0 0 2px; }\n.dz-moss-atlas-species .cn { font-size: 13px; color: var(--muted-foreground); }\n.dz-moss-atlas-species .ab { font-size: 13px; color: var(--muted-foreground); }\n.dz-moss-atlas-species .ms { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }\n.dz-moss-atlas-species .ms i { height: 20px; background: var(--secondary); border-radius: 2px; display: block; }\n.dz-moss-atlas-species .ms .a { background: color-mix(in srgb, var(--accent) 45%, transparent); }\n.dz-moss-atlas-species .ms .b { background: var(--accent); }\n.dz-moss-atlas-species .ct { font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 15px; text-align: right; color: var(--primary); }\n.dz-moss-atlas-species .lg { display: flex; align-items: center; gap: 18px; padding-top: 16px; flex-wrap: wrap; }\n.dz-moss-atlas-species .mn { display: grid; grid-template-columns: repeat(12, 16px); gap: 3px; font-family: var(--pv-mono); font-feature-settings: \"tnum\" 1; font-size: 10.5px; color: var(--muted-foreground); text-align: center; }\n@media (prefers-reduced-motion: reduce) { .dz-moss-atlas-species *, .dz-moss-atlas-species *::before, .dz-moss-atlas-species *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/moss-atlas.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Alegreya:wght@400;500;600;700&family=Alegreya+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600;700&display=swap"
}