From 101e56d6d5e327e3a8156059c2c24461a8f3d040 Mon Sep 17 00:00:00 2001
From: Derek Scruggs <djscruggs@digitalbazaar.com>
Date: Mon, 8 Jun 2026 13:10:08 -0500
Subject: [PATCH 1/4] Make the use-case chooser a horizontal icon-tile grid.

The home-page chooser was a numbered vertical list of title + summary.
Replace it with icon + title tiles spread horizontally, matching the
icon treatment on the interior pages.

The grid uses auto-fit with a min tile width, so added use cases wrap to
new rows with no markup or CSS change. Each vertical names its
representative icon via a chooserIcon front-matter field, resolved
against flowIcons; tiles fall back gracefully when no icon is set. The
chooser is sorted by the vertical's order field for a stable sequence.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/assets/styles.css                | 66 ++++++++++++++--------------
 src/index.njk                        | 10 ++---
 src/verticals/education/index.njk    |  1 +
 src/verticals/student-id/index.njk   |  1 +
 src/verticals/supply-chain/index.njk |  1 +
 5 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index aa2e767..8a69005 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -390,11 +390,13 @@ p {
 }
 
 /* ============================ VERTICAL GRID (home) ============================ */
+/* Horizontal icon + title tiles. auto-fit so added use cases wrap to new rows
+   with no markup or CSS change. Each tile = representative icon above a short
+   title; the "would this work for us" summary lives on the vertical's page. */
 .verticals h2 {
     border-top: 1px solid var(--hairline);
     padding-top: 0.8rem;
 }
-.vertical-grid,
 .role-grid {
     list-style: none;
     padding: 0;
@@ -402,51 +404,47 @@ p {
     gap: 0;
 }
 .vertical-grid {
-    grid-template-columns: 1fr;
-    border-top: 1px solid var(--ink);
+    list-style: none;
+    padding: 0;
+    margin: 1.5rem 0 2rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+    gap: 1px;
+    background: var(--hairline);
+    border: 1px solid var(--hairline);
+    box-shadow: 3px 3px 0 var(--paper-2);
 }
 .vertical-grid li a {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 1.2rem;
-    align-items: baseline;
-    padding: 1.4rem 0.3rem;
-    border-bottom: 1px solid var(--hairline);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 0.7rem;
+    height: 100%;
+    padding: 1.5rem 1rem;
+    background: var(--paper-2);
     text-decoration: none;
     color: var(--ink);
-    transition:
-        padding-left 0.2s ease,
-        background 0.2s ease;
-    counter-increment: vert;
+    transition: background 0.15s ease;
 }
-.vertical-grid li a::before {
-    content: counter(vert, decimal-leading-zero);
-    font-family: var(--mono);
-    font-size: 0.85rem;
-    color: var(--seal);
-    padding-top: 0.5rem;
-    line-height: 1;
+.vertical-grid li a:hover {
+    background: var(--paper);
 }
-.vertical-grid {
-    counter-reset: vert;
+.vertical-grid .vert-icon {
+    display: block;
+    width: 4rem;
+    height: 4rem;
 }
-.vertical-grid li a:hover {
-    background: var(--paper-2);
-    padding-left: 0.9rem;
+.vertical-grid .vert-icon svg {
+    width: 100%;
+    height: 100%;
 }
-.vertical-grid .vert-body {
-    min-width: 0;
-} /* the single column-2 cell */
 .vertical-grid h3 {
-    font-size: 1.5rem;
+    font-size: 1.05rem;
     font-weight: 900;
+    line-height: 1.25;
     margin: 0;
 }
-.vertical-grid p {
-    color: var(--ink-soft);
-    margin: 0.35rem 0 0;
-    max-width: 42rem;
-}
 
 /* ============================ ROLE PICKER ============================ */
 .role-grid {
diff --git a/src/index.njk b/src/index.njk
index 24938be..a4d5740 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -16,13 +16,13 @@ title: false
   <h2>Pick your use case</h2>
   <p>Each guide answers "would this work for us?" — then shows you how to build it.</p>
   <ul class="vertical-grid">
-    {% for v in collections.verticals %}
+    {% for v in collections.verticals | sort(attribute="data.order") %}
     <li>
       <a href="{{ v.url }}">
-        <div class="vert-body">
-          <h3>{{ v.data.cardTitle or v.data.title }}</h3>
-          <p>{{ v.data.summary or v.data.description }}</p>
-        </div>
+        {% if v.data.chooserIcon and flowIcons[v.data.chooserIcon] %}
+        <span class="vert-icon" aria-hidden="true">{{ flowIcons[v.data.chooserIcon] | safe }}</span>
+        {% endif %}
+        <h3>{{ v.data.shortName or v.data.cardTitle or v.data.title }}</h3>
       </a>
     </li>
     {% endfor %}
diff --git a/src/verticals/education/index.njk b/src/verticals/education/index.njk
index 435ab77..74ed00e 100644
--- a/src/verticals/education/index.njk
+++ b/src/verticals/education/index.njk
@@ -5,6 +5,7 @@ cardTitle: "Academic Credentials"
 summary: "Issue diplomas, transcripts, and enrollment proofs any wallet can hold and any institution can verify."
 description: "Issue and verify diplomas, transcripts, and enrollment proofs with W3C Verifiable Credentials over VCALM — no central identity provider."
 order: 1
+chooserIcon: educationIssue
 permalink: /education/
 ---
 {# Single-page vertical: SERP magnet, human journey, and technical model on one
diff --git a/src/verticals/student-id/index.njk b/src/verticals/student-id/index.njk
index 421b067..148df4f 100644
--- a/src/verticals/student-id/index.njk
+++ b/src/verticals/student-id/index.njk
@@ -5,6 +5,7 @@ cardTitle: "Student IDs & campus credentials"
 summary: "Issue student IDs students control — verifiable across campus and beyond, with any wallet."
 description: "Issue digital student IDs with W3C Verifiable Credentials over VCALM — student-controlled, any wallet, no allow-lists, privacy by design. Prove enrollment without revealing identity."
 order: 3
+chooserIcon: studentIdIssue
 permalink: /student-id/
 ---
 {# Single-page student-ID vertical. Anchor: digital campus/student ID.
diff --git a/src/verticals/supply-chain/index.njk b/src/verticals/supply-chain/index.njk
index 4c3d8ca..0c0cf18 100644
--- a/src/verticals/supply-chain/index.njk
+++ b/src/verticals/supply-chain/index.njk
@@ -5,6 +5,7 @@ cardTitle: "Supply chain traceability"
 summary: "Issue tamper-evident traceability and provenance credentials buyers, retailers, and auditors can verify."
 description: "Build supply chain traceability and provenance with W3C Verifiable Credentials over VCALM — prove origin, fight counterfeits, meet DSCSA / FSMA / UFLPA, no central database. EU DPP-ready."
 order: 2
+chooserIcon: supplyIssue
 permalink: /supply-chain/
 ---
 {# Single-page supply-chain vertical. US-first: lead with "supply chain

From 1075cfb64f751e29a7dbccd45fc0db8f54aac103 Mon Sep 17 00:00:00 2001
From: Derek Scruggs <djscruggs@digitalbazaar.com>
Date: Mon, 8 Jun 2026 13:18:55 -0500
Subject: [PATCH 2/4] Enlarge chooser icons and space the tiles as rounded
 cards.

Make the use-case tiles separate rounded cards with gaps and a postcard
shadow instead of a seamless hairline-divided block, and grow the icons
to fill them. Shorten the supply-chain tile label to "Supply Chain".

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/assets/styles.css                | 25 +++++++++++++++----------
 src/verticals/supply-chain/index.njk |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 8a69005..6bfe807 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -408,32 +408,37 @@ p {
     padding: 0;
     margin: 1.5rem 0 2rem;
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-    gap: 1px;
-    background: var(--hairline);
-    border: 1px solid var(--hairline);
-    box-shadow: 3px 3px 0 var(--paper-2);
+    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
+    gap: 1.25rem;
 }
 .vertical-grid li a {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
-    gap: 0.7rem;
+    gap: 0.9rem;
     height: 100%;
-    padding: 1.5rem 1rem;
+    padding: 2rem 1.25rem;
     background: var(--paper-2);
+    border: 1px solid var(--hairline);
+    border-radius: 12px;
+    box-shadow: 3px 3px 0 var(--paper-2);
     text-decoration: none;
     color: var(--ink);
-    transition: background 0.15s ease;
+    transition:
+        background 0.15s ease,
+        box-shadow 0.15s ease,
+        transform 0.15s ease;
 }
 .vertical-grid li a:hover {
     background: var(--paper);
+    box-shadow: 4px 4px 0 var(--seal);
+    transform: translate(-1px, -1px);
 }
 .vertical-grid .vert-icon {
     display: block;
-    width: 4rem;
-    height: 4rem;
+    width: 9rem;
+    height: 9rem;
 }
 .vertical-grid .vert-icon svg {
     width: 100%;
diff --git a/src/verticals/supply-chain/index.njk b/src/verticals/supply-chain/index.njk
index 0c0cf18..1efd02d 100644
--- a/src/verticals/supply-chain/index.njk
+++ b/src/verticals/supply-chain/index.njk
@@ -1,6 +1,6 @@
 ---
 title: "Supply chain traceability & provenance with VCALM"
-shortName: "Supply chain & traceability"
+shortName: "Supply Chain"
 cardTitle: "Supply chain traceability"
 summary: "Issue tamper-evident traceability and provenance credentials buyers, retailers, and auditors can verify."
 description: "Build supply chain traceability and provenance with W3C Verifiable Credentials over VCALM — prove origin, fight counterfeits, meet DSCSA / FSMA / UFLPA, no central database. EU DPP-ready."

From 65cde32242ef3a402ece26dff87f431ba7e0da7d Mon Sep 17 00:00:00 2001
From: Derek Scruggs <djscruggs@digitalbazaar.com>
Date: Mon, 8 Jun 2026 14:04:23 -0500
Subject: [PATCH 3/4] Refine chooser icons, tile sizing, and baseline
 alignment.

Enlarge the chooser icons and titles, tighten the spacing above the
chooser and between each icon and its title, and fix the icon viewBox
whitespace. Give the icon area a fixed height so the titles share a
baseline across tiles regardless of icon height. Redraw the education
icon as a landscape diploma and the student-ID icon as an ID card.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/_data/flowIcons.js | 52 +++++++++++++++++++++++-------------------
 src/assets/styles.css  | 24 +++++++++++--------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/_data/flowIcons.js b/src/_data/flowIcons.js
index 2a669ab..e23b842 100644
--- a/src/_data/flowIcons.js
+++ b/src/_data/flowIcons.js
@@ -8,19 +8,21 @@
 // inside Nunjucks {% set %} blocks.
 
 export default {
-  educationIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <rect x="14" y="28" width="52" height="6" rx="1.5" fill="#1b1a17"/>
-    <polygon points="40,16 14,34 66,34" fill="#1b1a17"/>
-    <line x1="66" y1="34" x2="70" y2="46" stroke="#1b1a17" stroke-width="2"/>
-    <circle cx="70" cy="49" r="4" fill="#c0341d"/>
-    <rect x="18" y="44" width="44" height="26" rx="2" fill="#f4f0e6" stroke="#9a7b2e" stroke-width="1.5"/>
-    <rect x="22" y="48" width="10" height="10" rx="1" fill="#c0341d" opacity=".15"/>
-    <text x="27" y="57" text-anchor="middle" font-size="5" fill="#c0341d" font-family="Georgia,serif" font-style="italic">SEAL</text>
-    <line x1="36" y1="50" x2="58" y2="50" stroke="#c9c0ab" stroke-width="1.5"/>
-    <line x1="36" y1="55" x2="56" y2="55" stroke="#c9c0ab" stroke-width="1"/>
-    <line x1="36" y1="60" x2="58" y2="60" stroke="#c9c0ab" stroke-width="1"/>
-    <circle cx="55" cy="65" r="4" fill="none" stroke="#9a7b2e" stroke-width="1.5"/>
-    <text x="55" y="68" text-anchor="middle" font-size="6" fill="#9a7b2e" font-family="Georgia,serif">&#x2713;</text>
+  educationIssue: `<svg viewBox="10 23 60 39" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <!-- diploma certificate (landscape) -->
+    <rect x="14" y="24" width="52" height="32" rx="2" fill="#f4f0e6" stroke="#9a7b2e" stroke-width="1.5"/>
+    <rect x="17" y="27" width="46" height="26" rx="1" fill="none" stroke="#c9c0ab" stroke-width="1"/>
+    <!-- title -->
+    <line x1="22" y1="33" x2="46" y2="33" stroke="#1b1a17" stroke-width="2.5"/>
+    <!-- body text lines -->
+    <line x1="22" y1="40" x2="48" y2="40" stroke="#c9c0ab" stroke-width="1.25"/>
+    <line x1="22" y1="45" x2="48" y2="45" stroke="#c9c0ab" stroke-width="1.25"/>
+    <line x1="22" y1="50" x2="40" y2="50" stroke="#c9c0ab" stroke-width="1.25"/>
+    <!-- wax seal with ribbon -->
+    <path d="M56,49 l-3,8 l3,-2 l3,2 l-3,-8" fill="#c0341d"/>
+    <circle cx="56" cy="47" r="6" fill="#c0341d"/>
+    <circle cx="56" cy="47" r="6" fill="none" stroke="#9a2814" stroke-width="1"/>
+    <text x="56" y="50" text-anchor="middle" font-size="7" fill="#f4f0e6" font-family="Georgia,serif">&#x2605;</text>
   </svg>`,
 
   educationHold: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
@@ -42,7 +44,7 @@ export default {
     <text x="40" y="68" text-anchor="middle" font-size="7" fill="#2f6b4f" font-family="Georgia,serif" letter-spacing=".06em">VERIFIED</text>
   </svg>`,
 
-  supplyIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  supplyIssue: `<svg viewBox="11 31 62 39" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
     <rect x="14" y="44" width="52" height="24" rx="0" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
     <rect x="20" y="36" width="10" height="8" fill="#1b1a17"/>
     <rect x="34" y="32" width="10" height="12" fill="#1b1a17"/>
@@ -88,16 +90,18 @@ export default {
     <line x1="36" y1="39" x2="44" y2="39" stroke="#2f6b4f" stroke-width="1" stroke-dasharray="3,2"/>
   </svg>`,
 
-  studentIdIssue: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-    <rect x="18" y="48" width="44" height="20" rx="0" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="26" y1="48" x2="26" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="36" y1="48" x2="36" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="44" y1="48" x2="44" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <line x1="54" y1="48" x2="54" y2="68" stroke="#1b1a17" stroke-width="1.5"/>
-    <polygon points="12,48 40,22 68,48" fill="none" stroke="#1b1a17" stroke-width="1.5"/>
-    <text x="40" y="42" text-anchor="middle" font-size="9" fill="#1b1a17" font-family="Georgia,serif">&#x2605;</text>
-    <text x="40" y="62" text-anchor="middle" font-size="7" fill="#514c43" font-family="Georgia,serif" letter-spacing=".06em">UNI</text>
-    <rect x="10" y="68" width="60" height="3" rx="0" fill="#1b1a17" opacity=".15"/>
+  studentIdIssue: `<svg viewBox="10 20 60 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+    <!-- ID card -->
+    <rect x="14" y="22" width="52" height="36" rx="3" fill="#f4f0e6" stroke="#1b1a17" stroke-width="1.5"/>
+    <!-- portrait -->
+    <rect x="20" y="28" width="18" height="24" rx="1" fill="#ece6d6" stroke="#c9c0ab" stroke-width="1"/>
+    <circle cx="29" cy="37" r="5" fill="#c9c0ab"/>
+    <path d="M21,52 a8,8 0 0,1 16,0 z" fill="#c9c0ab"/>
+    <!-- text lines -->
+    <line x1="44" y1="30" x2="60" y2="30" stroke="#c0341d" stroke-width="2"/>
+    <line x1="44" y1="37" x2="58" y2="37" stroke="#c9c0ab" stroke-width="1.5"/>
+    <line x1="44" y1="43" x2="60" y2="43" stroke="#c9c0ab" stroke-width="1.5"/>
+    <line x1="44" y1="49" x2="56" y2="49" stroke="#c9c0ab" stroke-width="1.5"/>
   </svg>`,
 
   studentIdHold: `<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
diff --git a/src/assets/styles.css b/src/assets/styles.css
index 6bfe807..a8b2c23 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -250,7 +250,7 @@ p {
 /* ============================ HERO ============================ */
 .hero {
     position: relative;
-    padding: 1rem 0 1.5rem;
+    padding: 1rem 0 0.25rem;
 }
 .hero::before {
     /* "SPEC" seal stamp in the corner */
@@ -395,6 +395,7 @@ p {
    title; the "would this work for us" summary lives on the vertical's page. */
 .verticals h2 {
     border-top: 1px solid var(--hairline);
+    margin-top: 1.4rem;
     padding-top: 0.8rem;
 }
 .role-grid {
@@ -416,9 +417,9 @@ p {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    gap: 0.9rem;
+    gap: 0.1rem;
     height: 100%;
-    padding: 2rem 1.25rem;
+    padding: 0.5rem 1rem 1.1rem;
     background: var(--paper-2);
     border: 1px solid var(--hairline);
     border-radius: 12px;
@@ -436,18 +437,23 @@ p {
     transform: translate(-1px, -1px);
 }
 .vertical-grid .vert-icon {
-    display: block;
-    width: 9rem;
-    height: 9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    max-width: 14.4rem;
+    height: 8rem;
 }
 .vertical-grid .vert-icon svg {
+    display: block;
     width: 100%;
-    height: 100%;
+    height: auto;
+    max-height: 100%;
 }
 .vertical-grid h3 {
-    font-size: 1.05rem;
+    font-size: clamp(1.5rem, 3vw, 2rem);
     font-weight: 900;
-    line-height: 1.25;
+    line-height: 1.2;
     margin: 0;
 }
 

From 5da799643a2c75a91fb14b28a828033bbfd158f6 Mon Sep 17 00:00:00 2001
From: Derek Scruggs <djscruggs@digitalbazaar.com>
Date: Mon, 8 Jun 2026 14:19:38 -0500
Subject: [PATCH 4/4] Document the chooserIcon and shortName vertical fields.

Update the "Adding a vertical" steps to include the shortName tile label
and the chooserIcon field that the home-page icon-tile chooser requires,
so a new vertical gets a tile icon.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 README.md | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7205aa2..6b0890e 100644
--- a/README.md
+++ b/README.md
@@ -40,8 +40,11 @@ To add a page to discovery: just create it. To exclude one, set
 
 ## Adding a vertical
 
-1. Create `src/verticals/<name>/index.njk` with `title`, `summary`,
-   `description`, `order`, and `permalink: /<name>/` front matter.
+1. Create `src/verticals/<name>/index.njk` with `title`, `shortName`,
+   `summary`, `description`, `order`, `chooserIcon`, and
+   `permalink: /<name>/` front matter. `shortName` is the home-page tile
+   label; `chooserIcon` names an icon in `src/_data/flowIcons.js` for the
+   tile (add a new icon there if needed).
 2. Add `<name>.json` in that folder setting `layout` and `tags` (copy
    `education/education.json`).
 3. Clone the Layer 2–4 pages, swapping the anchor scenario.