{
  "schemaVersion": 1,
  "scope": "Author-selected BFS and Merkle Tree illustration references, a supplied rejected example, and one new redraw. This is illustration guidance, not the icon inventory or an accessibility certification of historical images.",
  "font": {
    "family": "Permanent Marker",
    "role": "Short handwritten callouts",
    "authority": "Author confirmed on 2026-10-19",
    "path": "/design/illustrations/permanent-marker.ttf",
    "source": "https://github.com/google/fonts/tree/main/apache/permanentmarker",
    "license": "Apache-2.0",
    "licensePath": "/design/illustrations/permanent-marker-LICENSE.txt",
    "usage": "Use for short attention-directing labels, not paragraphs, coordinates, code, filenames, or hashes. Preserve editable text; embed the permitted font or outline a delivery copy for portable SVG.",
    "otherLabels": "Use a clean sans-serif for ordinary labels and readable monospace for data. Exact families in the original raster labels are unverified."
  },
  "palette": {
    "basis": "Exact opaque-pixel samples from the referenced BFS PNGs. Roles describe these examples, not a universal color meaning.",
    "themeBehavior": "Keep illustration colors fixed. Theme the surrounding page; retain a light artboard or create a separately verified dark illustration. Do not invert or palette-tint original images.",
    "contrast": "Sampled fills and accents are not automatically accessible text colors. Check new normal text at 4.5:1 and essential graphical distinctions at 3:1, with labels, numbers, outlines, or patterns as additional cues.",
    "colors": [
      {
        "hex": "#FFFFFF",
        "role": "Drawing surface",
        "example": "bfs-one"
      },
      {
        "hex": "#D9DEE5",
        "role": "Quiet grid structure",
        "example": "bfs-one"
      },
      {
        "hex": "#D3D9E0",
        "role": "Obstacle tile fill",
        "example": "bfs-distance"
      },
      {
        "hex": "#A9B3BD",
        "role": "Obstacle tile outline",
        "example": "bfs-distance"
      },
      {
        "hex": "#D8EDFF",
        "role": "Previously reached area",
        "example": "bfs-two"
      },
      {
        "hex": "#B3DAF9",
        "role": "Newly reached cells",
        "example": "bfs-two"
      },
      {
        "hex": "#DDD0F4",
        "role": "Adjacent blocked cells",
        "example": "bfs-one"
      },
      {
        "hex": "#FFF1C7",
        "role": "Destination alignment",
        "example": "bfs-distance"
      },
      {
        "hex": "#DDF3CF",
        "role": "Selected route region",
        "example": "bfs-route"
      },
      {
        "hex": "#E0605A",
        "role": "Distance annotation",
        "example": "bfs-distance"
      }
    ]
  },
  "startingGeometry": {
    "status": "Recommendations for a new drawing, not extracted global design tokens",
    "artboardWidth": 900,
    "outerPadding": 32,
    "structuralStroke": "2-4px",
    "objectCornerRadius": "12-24px",
    "ordinaryLabelSize": "24-28px",
    "calloutSize": "28-36px",
    "export": "Keep editable vector source. Use portable SVG or a normally 2x PNG export; verify at the intended display size. Use a focused crop, stacked composition, or accessible scroll region instead of illegibly shrinking a dense diagram."
  },
  "checklist": [
    "State the teaching point and identify the visible actors, objects, and relationship.",
    "Use recognizable, consistent colorful objects; do not substitute words for a physical metaphor.",
    "Keep geometry, scale, crop, labels, and color roles stable across state changes.",
    "Use rounded object containers and clean lines without rounding away mathematical structure.",
    "Point short Permanent Marker callouts at specific features; use separate legible data typography.",
    "Check arrow direction, endpoints, coordinates, counts, names, and values against prose and code.",
    "Use selective emphasis and secondary labels or patterns rather than color alone.",
    "Introduce the figure, supply purposeful alt text, and retain a readable full-size view.",
    "Verify font loading, clipping, contrast, mobile presentation, and Light/Dark surroundings.",
    "Retain editable source, provenance, and font/artwork licenses; do not invent font matches."
  ],
  "resources": [
    {
      "path": "/design/illustrations/permanent-marker.ttf",
      "source": "https://raw.githubusercontent.com/google/fonts/main/apache/permanentmarker/PermanentMarker-Regular.ttf",
      "license": "Apache-2.0",
      "sha256": "28f82c8a7943cb8e9d599f8554da1d4fc75dbcf69b9885ad6c0611d20c6946c5",
      "bytes": 74632
    },
    {
      "path": "/design/illustrations/permanent-marker-LICENSE.txt",
      "source": "https://raw.githubusercontent.com/google/fonts/main/apache/permanentmarker/LICENSE.txt",
      "license": "Apache-2.0",
      "sha256": "cfc7749b96f63bd31c3c42b5c471bf756814053e847c10f3eb003417bc523d30",
      "bytes": 11358
    },
    {
      "path": "/design/illustrations/hammer.svg",
      "source": "https://cdn.jsdelivr.net/gh/jdecked/twemoji@v17.0.3/assets/svg/1f528.svg",
      "license": "CC-BY-4.0",
      "sha256": "1b8052e038108784e4ab7d367a41ac82ed7f73a345b79a318d8bf48c13384d42",
      "bytes": 401
    },
    {
      "path": "/design/illustrations/wrench.svg",
      "source": "https://cdn.jsdelivr.net/gh/jdecked/twemoji@v17.0.3/assets/svg/1f527.svg",
      "license": "CC-BY-4.0",
      "sha256": "9d3b87b8bac215e98d1cb01aedff1a29801e2f174b8b9fc3ca08a455fa270986",
      "bytes": 627
    },
    {
      "path": "/design/illustrations/screwdriver.svg",
      "source": "https://cdn.jsdelivr.net/gh/jdecked/twemoji@v17.0.3/assets/svg/1fa9b.svg",
      "license": "CC-BY-4.0",
      "sha256": "52378e24bd69ea02ce78c4d02eadd2e82a8f851a4552ed79a19dd988d58b2ea6",
      "bytes": 1528
    },
    {
      "path": "/design/illustrations/twemoji-LICENSE.txt",
      "source": "https://raw.githubusercontent.com/jdecked/twemoji/v17.0.3/LICENSE-GRAPHICS",
      "license": "CC-BY-4.0",
      "sha256": "8ae9438818c26e4873b91d8c6ad620526c011e27e125677f13031eda903f007c",
      "bytes": 18524
    }
  ],
  "examples": [
    {
      "id": "rejected-tools",
      "title": "Word-only tool boxes",
      "verdict": "Rejected",
      "path": "/design/illustrations/rejected-tools.png",
      "source": null,
      "provenance": "User-supplied rejected illustration, 2026-10-19. Both panels are rejected style references.",
      "alt": "Rejected reference: an orange box contains the words hammer, wrench, and screwdriver; a blue organizer repeats those words in rows. No actual tools are pictured.",
      "lesson": "Rounded corners and pale fills do not make a physical metaphor visual. Show the tools and the relationship being explained.",
      "width": 360,
      "height": 440,
      "sha256": "3856b830abac2dc76caba649f26f61704bdeeb16771f5ac777e770aad7139bbd",
      "bytes": 28932,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "tool-redraw",
      "title": "The same tools, visibly rearranged",
      "verdict": "New example",
      "path": "/design/illustrations/tool-redraw.svg",
      "width": 900,
      "height": 600,
      "source": "https://github.com/kirupa/kirupaWWW/blob/main/design/illustrations/tool-redraw.source.svg",
      "provenance": "New illustration made for this reference, not a published tutorial figure. Twemoji tools, CC BY 4.0; Permanent Marker, Apache 2.0; Nunito, SIL OFL 1.1.",
      "alt": "The same hammer, wrench, and screwdriver appear scattered in one tray and organized into labeled rows in another. A handwritten instruction points to the wrench, and its organized row is highlighted.",
      "lesson": "Keep object identity consistent, let arrangement show the comparison, and give the callout a specific target.",
      "sha256": "db559a735b839d43c38573492426d79ecde7c1ffbabb673d292985ca0f7987df",
      "bytes": 161572,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "merkle-sync",
      "title": "Recognizable objects and matching structures",
      "verdict": "Good reference",
      "path": "/design/illustrations/merkle-sync.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/understanding_merkle_trees.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/4_sync_local_cloud_200.png",
      "provenance": "Unmodified Merkle Tree tutorial illustration; reference copy.",
      "alt": "Local and cloud file trees have matching Project, Docs, Assets, and Config hierarchies. Colorful file symbols and check marks reinforce that the copies agree.",
      "lesson": "Repeat the same symbols and layout so the reader can compare state without decoding a new picture.",
      "width": 1782,
      "height": 1416,
      "sha256": "e883a2705b225250defa291afe4d698a8c29f197472c6b82be6a11541006044a",
      "bytes": 169776,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-distance",
      "title": "Rounded objects in a precise grid",
      "verdict": "Good reference",
      "path": "/design/illustrations/bfs-distance.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_destination_annotated_200.png?v=20261014-1",
      "provenance": "Unmodified published BFS figure retrieved 2026-10-19; this tutorial is not yet in this checkout.",
      "alt": "Zorb and a rocket occupy a labeled five-by-five grid with rounded rock tiles. Red measurement arrows indicate one column across and three rows down.",
      "lesson": "Use friendly object geometry without distorting the coordinate system. Reserve stronger color for the relationship being measured.",
      "width": 1174,
      "height": 1042,
      "sha256": "06444f19605bf78ba477b10a0f13fa26988fa1410f4d65c051556a076ce82f2a",
      "bytes": 30312,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-one",
      "title": "First search ring",
      "verdict": "Good reference",
      "path": "/design/illustrations/bfs-one.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_destination_one_200.png?v=20261014-1",
      "provenance": "Unmodified published BFS figure retrieved 2026-10-19.",
      "alt": "Zorb's start is marked zero. Two open neighbors are numbered one and outlined with blue dashes; the adjacent blocked neighbors are lavender.",
      "lesson": "Use fill, number, and outline together to distinguish the new search frontier from blocked cells.",
      "width": 995,
      "height": 933,
      "sha256": "bcd171021d47de2a7ce05c21ef43897e34173e3ce375551232bab45e830eda8f",
      "bytes": 30148,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-two",
      "title": "Second search ring",
      "verdict": "Good reference",
      "path": "/design/illustrations/bfs-two.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_destination_two_200.png?v=20261014-1",
      "provenance": "Unmodified published BFS figure retrieved 2026-10-19.",
      "alt": "The same grid adds four cells numbered two. Zorb, the rocket, rocks, axis labels, and earlier step counts remain in their original positions.",
      "lesson": "Hold the scene still while the algorithm's state changes.",
      "width": 995,
      "height": 933,
      "sha256": "fdbe66266a4fadfdd7ce4b52e1256e1412d49ed8a1b6d2ca1837e63f328641ed",
      "bytes": 34488,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-focus",
      "title": "Local visibility",
      "verdict": "Good reference",
      "path": "/design/illustrations/bfs-focus.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_what_sees_200.png?v=20261014-1",
      "provenance": "Unmodified published BFS figure retrieved 2026-10-19.",
      "alt": "Only Zorb's cell and its four immediate neighbors remain strongly visible. The rest of the grid, including the rocket, is faded.",
      "lesson": "Use selective emphasis to distinguish what the actor can inspect from what the reader can see.",
      "width": 995,
      "height": 933,
      "sha256": "7eaa1eeac4b6fd802b36503c0844f4df3b4a7d0273834126f6c0c77c0d505e45",
      "bytes": 25749,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-busy",
      "title": "All breadcrumbs at equal priority",
      "verdict": "Avoid for a single-route explanation",
      "path": "/design/illustrations/bfs-busy.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_destination_arrowed_200.png?v=20261014-1",
      "provenance": "Unmodified intermediate BFS figure. Valid for teaching the full predecessor map; the tutorial then simplifies it for the route explanation.",
      "alt": "Every open cell has a step count and a predecessor arrow, so many arrows compete for attention instead of isolating the route to the rocket.",
      "lesson": "This is not inherently an incorrect diagram. It becomes a poor choice when the explanation needs the reader to follow just one route.",
      "width": 995,
      "height": 933,
      "sha256": "c118bf53562f3836b2582d4f704582dafa2d0b3424b4fa39d149233bed266579",
      "bytes": 48089,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "bfs-route",
      "title": "One route emphasized",
      "verdict": "Good reference",
      "path": "/design/illustrations/bfs-route.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/auto_navigating_grid_using_bfs.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/zorb_destination_arrowed_simple_200.png?v=20261014-1",
      "provenance": "Unmodified published BFS figure retrieved 2026-10-19.",
      "alt": "Green cells, numbers, and arrows isolate the six-step predecessor chain from the rocket back to Zorb. Other arrows remain visible in gray.",
      "lesson": "Make the relevant route easy to follow without changing the underlying scene or reversing the breadcrumbs.",
      "width": 995,
      "height": 933,
      "sha256": "70b3d4f74ff3cd759c407bc1c2f4c88ad1c6833cdcf901954087ff3876069d36",
      "bytes": 49194,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "merkle-callout",
      "title": "A short handwritten callout",
      "verdict": "Good reference",
      "path": "/design/illustrations/merkle-callout.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/understanding_merkle_trees.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/15_root_hashes_no_matcha_200.png",
      "provenance": "Unmodified Merkle Tree tutorial illustration. Permanent Marker callout font confirmed by the author.",
      "alt": "A handwritten Not equal! label sits above a bracket pointing to the local and cloud Project roots, whose displayed values differ.",
      "lesson": "Use Permanent Marker to direct attention to one relationship, keeping filenames and values in a separate data face.",
      "width": 2060,
      "height": 1561,
      "sha256": "d87a4b3ad79384aa286861809e5823a21fb7726fda7ab93dfb45f85fee02c769",
      "bytes": 203704,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "merkle-change",
      "title": "Changed values within a stable hierarchy",
      "verdict": "Good reference",
      "path": "/design/illustrations/merkle-change.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/understanding_merkle_trees.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/14_changed_root_merkle_200.png",
      "provenance": "Unmodified Merkle Tree tutorial illustration; original colors are evidence, not an accessible-text palette for new work.",
      "alt": "The local settings file, Config folder, and Project root have blue replacement values with their previous pink values crossed out. The cloud tree remains unchanged.",
      "lesson": "Use position, replacement labels, and cross-outs alongside color to make the changed dependency chain visible.",
      "width": 2060,
      "height": 1349,
      "sha256": "bf55aa71530cb7f636982eba8e1e1f5fa2269a64057b2183539b7e501ad48360",
      "bytes": 226585,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    },
    {
      "id": "merkle-path",
      "title": "The same objects in a tree view",
      "verdict": "Good reference",
      "path": "/design/illustrations/merkle-path.png",
      "source": "https://www.kirupa.com/data_structures_algorithms/understanding_merkle_trees.htm",
      "original": "https://www.kirupa.com/data_structures_algorithms/images/tree_view_merkle_path_200.png",
      "provenance": "Unmodified Merkle Tree tutorial illustration; reference copy.",
      "alt": "The folder hierarchy is drawn as a tree. Blue arrows connect the settings file through Config to Project, while unrelated branches are faded.",
      "lesson": "Keep visual vocabulary consistent when changing representations, and emphasize only the relevant dependency path.",
      "width": 2200,
      "height": 842,
      "sha256": "def546feb83ae2e52e8210c3693eb87600d23aa380979e4cb985d246ffb43246",
      "bytes": 86187,
      "themeBehavior": "Fixed artwork on a light artboard; only its surrounding context changes."
    }
  ]
}