diff --git a/examples/explore/dag.html b/examples/explore/dag.html
index da5ffa67..279b1524 100644
--- a/examples/explore/dag.html
+++ b/examples/explore/dag.html
@@ -709,6 +709,16 @@
.lineage-legend { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.5rem; }
.lineage-legend .legend-chip { display: inline-block; padding: 0 0.4rem; border: 1.5px solid var(--dag-import-stroke); border-radius: 4px; background: var(--dag-import-fill); color: var(--dag-node-text); }
.lineage-legend .legend-chip.notcompiled { border-color: #b07400; border-style: dashed; background: var(--dag-transform-fill); }
+/* cute-dbt#253 — the typed-node vocabulary. Canvas-paired chips: these
+ exact fills/strokes are what explore-lineage.js draws per node type
+ (redundant shape+color coding on canvas; the chips mirror the colors
+ and approximate the shapes via border-radius). Shared by the legend
+ and the detail card's type chip. */
+.legend-chip.type-model, .detail-type.type-model { border-color: #0072B2; background: #e8f1f8; }
+.legend-chip.type-snapshot, .detail-type.type-snapshot { border-color: #7b5ea7; background: #f1ecf9; border-radius: 2px; }
+.legend-chip.type-seed, .detail-type.type-seed { border-color: #00756d; background: #e6f4f2; border-radius: 10px; }
+.legend-chip.type-source, .detail-type.type-source { border-color: #1f8a5b; background: #eef7ee; border-radius: 999px; }
+.legend-chip.type-exposure, .detail-type.type-exposure { border-color: #6b6b76; background: #f4f4f5; border-radius: 4px 12px 12px 4px; }
/* cute-dbt#106 — the PR-diff change-context treatment: an amber halo
mirroring the canvas underlay glow. A separate visual channel from
the highlight vocabulary (border = selected, opacity = dim/trace)
@@ -764,6 +774,9 @@
/* canvas-paired status chips (fixed across themes; dark fixed text on the
fixed light fills stays readable on every theme by construction) */
.model-detail-card .detail-notcompiled { display: inline-block; padding: 0 0.4rem; border: 1.5px dashed #b07400; border-radius: 4px; background: var(--dag-transform-fill); color: var(--dag-node-text); font-size: 0.8rem; }
+/* cute-dbt#253 — the detail card's node-type chip (non-model nodes only;
+ per-type colors above). */
+.model-detail-card .detail-type { display: inline-block; margin-right: 0.35rem; padding: 0 0.4rem; border: 1.5px solid var(--dag-import-stroke); border-radius: 4px; color: var(--dag-node-text); font-size: 0.8rem; }
/* cute-dbt#106 — the detail card's "changed in this diff" chip (the
change-context twin of .detail-notcompiled; both can show at once). */
.model-detail-card .detail-changed { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border: 1.5px solid var(--dag-import-stroke); border-radius: 4px; background: var(--dag-import-fill); color: var(--dag-node-text); box-shadow: 0 0 0 2px rgba(230, 159, 0, 0.55); font-size: 0.8rem; }
@@ -776,7 +789,8 @@