jig-ui 0.16.0 → 0.17.0

package/examples/F-98.html

@@ -0,0 +1,7 @@
+<!-- F-98 · Labels beside inputs -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:6px;"><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><span style="width:80px;text-align:right;font-size:12px;font-weight:600">Name</span><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;flex:1">&nbsp;</div></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><span style="width:80px;text-align:right;font-size:12px;font-weight:600">Work email</span><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;flex:1">&nbsp;</div></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><span style="width:80px;text-align:right;font-size:12px;font-weight:600">Team size</span><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;flex:1">&nbsp;</div></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Name</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:3px 8px">&nbsp;</div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Work email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:3px 8px">&nbsp;</div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Team size</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:3px 8px">&nbsp;</div></div></div></div>
+</figure>

package/examples/F-99.html

@@ -0,0 +1,7 @@
+<!-- F-99 · Uniform field widths -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:3px;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Postcode</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:230px;padding:4px 8px"><span style="color:#8a8a8a">SW1A 1AA</span></div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Street address</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:230px;padding:4px 8px"><span style="color:#8a8a8a">10 Downing Street</span></div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">CVC</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:230px;padding:4px 8px"><span style="color:#8a8a8a">123</span></div></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:3px;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Postcode</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:90px;padding:4px 8px"><span style="color:#8a8a8a">SW1A 1AA</span></div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">Street address</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:230px;padding:4px 8px"><span style="color:#8a8a8a">10 Downing Street</span></div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:2px">CVC</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;width:50px;padding:4px 8px"><span style="color:#8a8a8a">123</span></div></div></div></div>
+</figure>

package/examples/G-145.html

@@ -0,0 +1,7 @@
+<!-- G-145 · A pulsing status dot -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;"><span style="position:relative;display:inline-flex;width:10px;height:10px"><span style="position:absolute;inset:-6px;border-radius:50%;background:#22c55e;opacity:.25"></span><span style="position:absolute;inset:-3px;border-radius:50%;background:#22c55e;opacity:.4"></span><span style="position:relative;width:10px;height:10px;border-radius:50%;background:#22c55e"></span></span><b>All systems operational</b></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Pulses forever, on a status unchanged for a week.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="width:10px;height:10px;border-radius:50%;background:#15803d;display:inline-block"></span><b>All systems operational</b><span style="color:#5c5c5c">since 12 March</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Still. Motion is kept for a change happening now.</div></div>
+</figure>

package/examples/G-42.html

@@ -0,0 +1,7 @@
+<!-- G-42 · Entrance animation on everything -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="opacity:0.25"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Search</div></div><div style="opacity:0.5"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Alerts</div></div><div style="opacity:0.8"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Sharing</div></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Every block fades and rises as you scroll.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Search</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Alerts</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Sharing</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Present when you arrive. Motion is kept for changes.</div></div>
+</figure>

package/examples/G-43.html

@@ -0,0 +1,10 @@
+<!-- G-43 · `prefers-reduced-motion` ignored -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.hero { animation: float 3s infinite; }</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Moves for everyone, including people it makes ill.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.hero { animation: float 3s infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .hero { animation: none; }
+}</pre></div>
+</figure>

package/examples/G-44.html

@@ -0,0 +1,7 @@
+<!-- G-44 · Durations too long -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:6px;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Open</span><span style="color:#5c5c5c">····· 800ms ·····</span><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Menu</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A menu that takes most of a second to arrive.</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:6px;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Open</span><span style="color:#5c5c5c">· 150ms ·</span><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:6px 10px">Menu</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Fast enough to feel like an answer.</div></div></div>
+</figure>

package/examples/H-117.html

@@ -0,0 +1,11 @@
+<!-- H-117 · A token name nothing declares -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.card {
+  background: var(--color-surface-2);
+}</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Nothing declares --color-surface-2: the card has no background.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.card {
+  background: var(--color-bg-raised);
+}</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A token the layer declares.</div></div>
+</figure>

package/examples/H-119.html

@@ -0,0 +1,13 @@
+<!-- H-119 · A generic element where a native one says what the content is -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;div class="nav"&gt;
+  &lt;div&gt;&lt;a href="/docs"&gt;Docs&lt;/a&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;a href="/pricing"&gt;Pricing&lt;/a&gt;&lt;/div&gt;
+&lt;/div&gt;</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;nav aria-label="Main"&gt;
+  &lt;a href="/docs"&gt;Docs&lt;/a&gt;
+  &lt;a href="/pricing"&gt;Pricing&lt;/a&gt;
+&lt;/nav&gt;</pre></div>
+</figure>

package/examples/H-45.html

@@ -0,0 +1,13 @@
+<!-- H-45 · New component instead of the existing one -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">// components/PrimaryBtn.tsx, new
+export const PrimaryBtn = …
+
+// components/Button.tsx already has
+//   variant="primary"</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;Button variant="primary"&gt;
+  Save
+&lt;/Button&gt;</pre></div>
+</figure>

package/examples/H-46.html

@@ -0,0 +1,10 @@
+<!-- H-46 · Local convention overridden -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">// every file here uses clsx and CSS modules
+const s = { padding: 12, color: "#333" }
+return &lt;div style={s}&gt;…</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">import styles from "./Card.module.css"
+return &lt;div className={styles.card}&gt;…</pre></div>
+</figure>

package/examples/H-47.html

@@ -0,0 +1,15 @@
+<!-- H-47 · Values hard-coded past the token layer -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.card {
+  color: #3a3a3a;
+  padding: 13px 17px;
+  border-radius: 9px;
+}</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">.card {
+  color: var(--color-text-strong);
+  padding: var(--spacing-card);
+  border-radius: var(--radius-surface);
+}</pre></div>
+</figure>

package/examples/H-48.html

@@ -0,0 +1,8 @@
+<!-- H-48 · JavaScript for something CSS does -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">el.onmouseenter = () =&gt;
+  el.style.textDecoration = "underline"</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">a:hover { text-decoration: underline; }</pre></div>
+</figure>

package/examples/I-118.html

@@ -0,0 +1,7 @@
+<!-- I-118 · Em dashes in interface text -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:14px;">Your plan — including every seat — renews monthly.</div><div style="font-size:14px;">Free — forever.</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:14px;">Your plan renews monthly, including every seat.</div><div style="font-size:14px;">Free forever.</div></div></div>
+</figure>

package/examples/I-53.html

@@ -0,0 +1,7 @@
+<!-- I-53 · Title Case Used For Interface Text -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Save Post For Later?</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Add To Cart</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Keep Browsing</span></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Save post for later?</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Add to cart</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Keep browsing</span></div></div></div>
+</figure>

package/examples/I-54.html

@@ -0,0 +1,7 @@
+<!-- I-54 · Text that buries the point -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">If you want to learn how to design interfaces, you should read these 5 UI design books</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">5 UI design books worth reading</div></div>
+</figure>

package/examples/I-55.html

@@ -0,0 +1,7 @@
+<!-- I-55 · Vague or inflated language -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">Leverage our seamless, best-in-class solution to utilise actionable insights across your ecosystem.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">Ask your logs a question and see the lines that answer it.</div></div>
+</figure>

package/examples/I-56.html

@@ -0,0 +1,7 @@
+<!-- I-56 · Brand colour spent on decoration -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;color:#0e7490">Retention</div><div style="height:3px;width:40px;background:#0e7490;margin:4px 0"></div><div style="font-size:14px;font-size:12px">How long logs are kept.</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;background:#0e7490">Change plan</span></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Retention</div><div style="font-size:14px;font-size:12px">How long logs are kept.</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;background:#0e7490">Change plan</span></div></div></div>
+</figure>

package/examples/I-57.html

@@ -0,0 +1,7 @@
+<!-- I-57 · Actions and text centred by default -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;text-align:center">Delete this workspace?</div><div style="font-size:14px;text-align:center;font-size:12px">This removes 3 saved searches and 2 alerts.</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Delete</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Cancel</span></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Delete this workspace?</div><div style="font-size:14px;font-size:12px">This removes 3 saved searches and 2 alerts.</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Delete</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Cancel</span></div></div></div>
+</figure>

package/examples/I-79.html

@@ -0,0 +1,7 @@
+<!-- I-79 · Padding words and introductory phrases -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:14px;">Would you like to save the article? Don’t worry, you’ll still be able to publish it later.</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Yes, save it</span></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:14px;">Save article to publish later?</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Save</span></div></div></div>
+</figure>

package/examples/I-80.html

@@ -0,0 +1,7 @@
+<!-- I-80 · Long text without a structure -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;font-size:12px">We moved to a new data centre last month, which took some time and involved several teams, and because of that some older exports use the old address, so if you have a saved link you will need to regenerate it from Settings.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Regenerate saved export links</div><div style="font-size:14px;font-size:12px">Old links point to a data centre we have closed. Settings → Exports → Regenerate.</div></div></div>
+</figure>

package/examples/I-81.html

@@ -0,0 +1,7 @@
+<!-- I-81 · Vague headings -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Powerful features</div><div style="font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Build the future of work</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Search your logs by asking in plain English</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Alerts on any question you ask twice</div></div></div>
+</figure>

package/examples/I-82.html

@@ -0,0 +1,7 @@
+<!-- I-82 · Uneven text length across parallel elements -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap;align-items:stretch"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Saved questions that run every five minutes and message you when the answer changes.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">A link.</div></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap;align-items:stretch"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in plain English.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Hear when an answer changes.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">Send any result by link.</div></div></div></div>
+</figure>

package/examples/I-83.html

@@ -0,0 +1,7 @@
+<!-- I-83 · Numbers spelled out -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">Trusted by eight hundred and ninety-nine teams</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">Trusted by 899 teams</div></div>
+</figure>

package/examples/I-84.html

@@ -0,0 +1,7 @@
+<!-- I-84 · Abbreviations and acronyms -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">The ETA of the dept. mgr. is COB tmrw.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="font-size:14px;">The department manager will reply by the end of tomorrow.</div></div>
+</figure>

package/examples/I-85.html

@@ -0,0 +1,7 @@
+<!-- I-85 · UPPERCASE -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:14px;font-weight:700">YOUR TRIAL ENDS IN 3 DAYS. UPGRADE NOW TO KEEP YOUR SAVED SEARCHES.</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#5c5c5c">Trial</div><div style="font-size:14px;">Your trial ends in 3 days. Upgrade to keep your saved searches.</div></div></div>
+</figure>

package/examples/I-86.html

@@ -0,0 +1,7 @@
+<!-- I-86 · Full stops on fragments -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:14px;">Free secure parking.</div><div style="font-size:14px;">Fast check-in.</div><div style="font-size:14px;">Waterfront view</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:14px;">Free secure parking</div><div style="font-size:14px;">Fast check-in</div><div style="font-size:14px;">Waterfront view</div></div></div>
+</figure>

package/examples/I-87.html

@@ -0,0 +1,7 @@
+<!-- I-87 · Inconsistent vocabulary -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:14px;">Create a <b>workspace</b></div><div style="font-size:14px;">Invite people to your <b>project</b></div><div style="font-size:14px;">Delete this <b>space</b></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Three words. Are they three things?</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:14px;">Create a <b>workspace</b></div><div style="font-size:14px;">Invite people to your <b>workspace</b></div><div style="font-size:14px;">Delete this <b>workspace</b></div></div></div>
+</figure>

package/examples/I-88.html

@@ -0,0 +1,7 @@
+<!-- I-88 · "My" or "your" on form labels -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Your email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">&nbsp;</div><div style="font-size:12px;font-weight:600;margin-bottom:4px;">My company</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">&nbsp;</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">&nbsp;</div><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Company</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">&nbsp;</div></div></div>
+</figure>

package/examples/I-89.html

@@ -0,0 +1,7 @@
+<!-- I-89 · Generic link text -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:14px;">Alerts, sharing and saved searches. <u>Learn more</u></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Get started</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Learn more</span></div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-size:14px;"><u>How alerts work</u> · <u>Sharing a search</u></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;">Create a workspace</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Book a 20-minute demo</span></div></div></div>
+</figure>

package/examples/I-90.html

@@ -0,0 +1,7 @@
+<!-- I-90 · Error messages that report without helping -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Card number</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#b91c1c">4242 4242</div><div style="color:#b91c1c;font-size:12px">Error: validation failed.</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Card number</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#b91c1c">4242 4242</div><div style="color:#b91c1c;font-size:12px">✕ This number is 8 digits. Card numbers are 16.</div></div></div>
+</figure>

package/examples/J-120.html

@@ -0,0 +1,7 @@
+<!-- J-120 · Metadata that no longer matches the page -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Tidewell · The observability platform for enterprises</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Unify metrics, traces and logs across your enterprise stack.</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Metadata from before the page was rewritten.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Tidewell · Ask your logs in plain English</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Search your server logs by asking a question. For teams of 2 to 50.</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Changed in the same commit as the headline.</div></div>
+</figure>

package/examples/J-121.html

@@ -0,0 +1,7 @@
+<!-- J-121 · An indexable page with no title or description of its own -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io › pricing</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Tidewell</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Home · Product · Docs · Pricing · Sign in · Features · Alerts…</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">No title or description of its own: the nav is the snippet.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io › pricing</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Pricing · Tidewell</div><div style="font-size:12px;color:#4d5156;margin-top:2px">$0 for one person, $49 a month for a team of ten. Priced by log volume.</div></div></div>
+</figure>

package/examples/J-122.html

@@ -0,0 +1,7 @@
+<!-- J-122 · Metadata past its budget -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Tidewell · Search your server logs by asking in plain English, for small te…</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Tidewell turns plain English questions into precise log queries across every service you run, so small teams can find the lines that explain an incident without…</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Cut mid-word at both ends.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Tidewell · Search your logs in plain English</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Ask your server logs a question and see the lines that answer it. For teams of 2 to 50.</div></div></div>
+</figure>

package/examples/J-123.html

@@ -0,0 +1,7 @@
+<!-- J-123 · A page that must not be indexed and does not say so -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="background:#fff;border:1px solid #d6d6d6;border-radius:8px;padding:10px;"><div style="font-size:11px;color:#3f6212">tidewell.io › admin › billing</div><div style="color:#1a0dab;font-size:15px;line-height:1.25">Admin · Billing overrides · Tidewell</div><div style="font-size:12px;color:#4d5156;margin-top:2px">Override plan limits for any customer account.</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">An admin screen in a search result.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;meta name="robots" content="noindex"&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Said on the page itself, not in robots.txt.</div></div>
+</figure>

package/examples/J-124.html

@@ -0,0 +1,8 @@
+<!-- J-124 · A sitemap that contradicts the page -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;url&gt;&lt;loc&gt;https://tidewell.io/admin&lt;/loc&gt;&lt;/url&gt;
+&lt;url&gt;&lt;loc&gt;/pricing&lt;/loc&gt;&lt;/url&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A noindex page listed, and a path a crawler drops.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;url&gt;&lt;loc&gt;https://tidewell.io/pricing&lt;/loc&gt;&lt;/url&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Indexable pages only, as full URLs.</div></div>
+</figure>

package/examples/J-125.html

@@ -0,0 +1,10 @@
+<!-- J-125 · Invented facts in metadata -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">lastModified: new Date(),
+datePublished: "2026-01-01",
+aggregateRating: { ratingValue: 4.9 }</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Today on every build; a date and a rating nobody gave.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">lastModified: post.updatedAt,
+// no rating: there is none</pre></div>
+</figure>

package/examples/J-126.html

@@ -0,0 +1,9 @@
+<!-- J-126 · Structured data retyped instead of read -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">"name": "Tidewell",
+"description": "The enterprise observability platform"</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Typed by hand, already out of date.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">"name": site.name,
+"description": site.description</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Read from the source the page renders.</div></div>
+</figure>

package/examples/J-127.html

@@ -0,0 +1,10 @@
+<!-- J-127 · A list served as a fact when it is empty -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;urlset&gt;&lt;/urlset&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A failed read, shipped as “the site has no pages”.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;urlset&gt;
+  &lt;url&gt;&lt;loc&gt;https://tidewell.io/&lt;/loc&gt;&lt;/url&gt;
+  …static routes, always
+&lt;/urlset&gt;</pre></div>
+</figure>

package/examples/K-128.html

@@ -0,0 +1,9 @@
+<!-- K-128 · A new-tab link that hands over the page it left -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;a href="https://partner.example"
+   target="_blank"&gt;Partner&lt;/a&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The new tab can rewrite the page it came from.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;a href="https://partner.example"
+   target="_blank" rel="noopener noreferrer"&gt;Partner&lt;/a&gt;</pre></div>
+</figure>

package/examples/K-129.html

@@ -0,0 +1,7 @@
+<!-- K-129 · User content written as markup -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">el.innerHTML = comment.body</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A comment that contains a script runs it.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">el.textContent = comment.body</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Shown as text, whatever it contains.</div></div>
+</figure>

package/examples/K-130.html

@@ -0,0 +1,7 @@
+<!-- K-130 · Credential fields that fight the password manager -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Password</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#a3a3a3">&nbsp;</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">autocomplete="off", paste blocked: the manager cannot fill it.</div></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Password</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">••••••••••••</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">autocomplete="current-password": filled, pasted, strong.</div></div></div>
+</figure>

package/examples/K-131.html

@@ -0,0 +1,11 @@
+<!-- K-131 · A frame with no sandbox, a script from anywhere -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;iframe src="https://widget.example"&gt;&lt;/iframe&gt;
+&lt;script src="https://cdn.anywhere/x.js"&gt;&lt;/script&gt;</pre></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;iframe src="https://widget.example"
+        sandbox="allow-scripts"&gt;&lt;/iframe&gt;
+&lt;script src="/vendor/x.js"
+        integrity="sha384-…"&gt;&lt;/script&gt;</pre></div>
+</figure>

package/examples/K-132.html

@@ -0,0 +1,7 @@
+<!-- K-132 · A secret rendered as plain text -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">API key</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace">tw_live_8f2c91a7d44e0b6c3e</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">On screen, in a screenshot, in a screen share.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">API key</div><div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;flex:1">tw_live_••••••••••0b6c3e</div><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Copy</span><span style="display:inline-block;align-self:flex-start;background:#ffffff;color:#1f1f1f;border:1px solid #d6d6d6;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px;">Reveal</span></div></div></div>
+</figure>

package/examples/K-133.html

@@ -0,0 +1,8 @@
+<!-- K-133 · An error that describes the system -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:6px;"><div style="color:#b91c1c;font-weight:600">Error 500</div><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">PG::UndefinedColumn: column users.plan_id
+at /srv/app/models/user.rb:42</pre></div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="color:#b91c1c;font-weight:600">We could not load your plan</div><div style="font-size:14px;font-size:12px">Try again in a minute. If it keeps happening, quote reference 7F3A.</div></div></div>
+</figure>

package/examples/K-134.html

@@ -0,0 +1,9 @@
+<!-- K-134 · Inline handlers on a page with a content policy -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;button onclick="save()"&gt;Save&lt;/button&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Blocked by the page’s own content policy.</div></div>
+</figure>
+<figure data-example="do">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#1f1f1f;background:#f5f5f4;padding:16px;min-height:176px;box-sizing:border-box;"><pre style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;background:#ffffff;border:1px solid #d6d6d6;border-radius:6px;padding:10px;margin:0;white-space:pre-wrap;">&lt;button id="save"&gt;Save&lt;/button&gt;
+// in a script file:
+save.addEventListener("click", …)</pre></div>
+</figure>