jig-ui 0.16.0 → 0.17.0

package/examples/A-01.html

@@ -0,0 +1,7 @@
+<!-- A-01 · Purple and violet as the unspecified 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:10px;"><div style="font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Search your logs</div><div style="color:#5c5c5c;margin-top:4px;">Ask in plain English.</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:linear-gradient(90deg,#7c3aed,#db2777)">Start searching</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;color:#6d28d9;border-color:#c4b5fd">Docs</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:10px;"><div style="font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Search your logs</div><div style="color:#5c5c5c;margin-top:4px;">Ask in plain English.</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;">Start searching</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;">Docs</span></div></div></div>
+</figure>

package/examples/A-02.html

@@ -0,0 +1,7 @@
+<!-- A-02 · Gradient text on 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:26px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;"><span style="background:linear-gradient(90deg,#2563eb,#a855f7,#ec4899);-webkit-background-clip:text;background-clip:text;color:transparent">Ship faster, together</span></div><div style="color:#5c5c5c;margin-top:4px;">A heading whose contrast cannot be measured.</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:26px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ship faster, together</div><div style="color:#5c5c5c;margin-top:4px;">One solid colour; size and weight carry it.</div></div></div>
+</figure>

package/examples/A-03.html

@@ -0,0 +1,7 @@
+<!-- A-03 · Decorative gradient blobs and orbs -->
+<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="position:relative;overflow:hidden;min-height:100px"><div style="position:absolute;width:140px;height:140px;border-radius:50%;background:#a78bfa;filter:blur(40px);top:-30px;left:-20px;opacity:.7"></div><div style="position:absolute;width:120px;height:120px;border-radius:50%;background:#f472b6;filter:blur(40px);bottom:-40px;right:0;opacity:.6"></div><div style="position:relative"><div style="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Search your logs</div><div style="color:#5c5c5c;margin-top:4px;">Blurred orbs behind the words.</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:8px;"><div style="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Search your logs</div><div style="color:#5c5c5c;margin-top:4px;">A flat surface. The words are the hero.</div></div></div>
+</figure>

package/examples/A-04.html

@@ -0,0 +1,7 @@
+<!-- A-04 · Trend styles that fight legibility -->
+<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:linear-gradient(135deg,#60a5fa,#c084fc);padding:14px;border-radius:10px"><div style="background:rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);border-radius:14px;padding:12px;color:#fff"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Weekly usage</div><div style="opacity:.8;margin-top:4px">1,284 queries · 12% more</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="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Weekly usage</div><div style="color:#5c5c5c;margin-top:4px;">1,284 queries · 12% more</div></div></div>
+</figure>

package/examples/A-05.html

@@ -0,0 +1,7 @@
+<!-- A-05 · Emoji as interface iconography -->
+<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="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">🚀 Fast deploys</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">🔒 Secure by default</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">⚡ Instant search</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="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Fast deploys</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Secure by default</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Instant search</div></div></div>
+</figure>

package/examples/A-06.html

@@ -0,0 +1,7 @@
+<!-- A-06 · The three-column feature grid reflex -->
+<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"><span aria-hidden="true" style="display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;font-size:24px;background:#eef2ff;color:#4f46e5;border-radius:8px">◆</span><div style="font-weight:700;margin-top:8px">Search</div><div style="color:#5c5c5c;font-size:12px">Ask in words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><span aria-hidden="true" style="display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;font-size:24px;background:#eef2ff;color:#4f46e5;border-radius:8px">◆</span><div style="font-weight:700;margin-top:8px">Alerts</div><div style="color:#5c5c5c;font-size:12px">Know first.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1;min-width:0"><span aria-hidden="true" style="display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;font-size:24px;background:#eef2ff;color:#4f46e5;border-radius:8px">◆</span><div style="font-weight:700;margin-top:8px">Share</div><div style="color:#5c5c5c;font-size:12px">Send 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;flex-direction:column;gap:8px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><div style="font-weight:700;font-size:15px">Ask your logs in plain English</div><div style="color:#5c5c5c;margin-top:4px;">The reason to switch. Alerts and sharing follow from it.</div></div><div style="padding:0 2px"><b>Alerts</b> <span style="color:#5c5c5c">on any question you ask twice</span></div><div style="padding:0 2px"><b>Sharing</b> <span style="color:#5c5c5c">by link, no seat needed</span></div></div></div>
+</figure>

package/examples/A-07.html

@@ -0,0 +1,7 @@
+<!-- A-07 · Oversized radius everywhere -->
+<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:8px;align-items:center;flex-wrap:wrap;"><span style="border:1px solid #d6d6d6;background:#fff;border-radius:22px;padding:14px 16px">Card</span><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;border-radius:22px">Button</span><span style="border:1px solid #a3a3a3;border-radius:22px;padding:6px 10px;background:#fff">Input</span><span style="background:#eee;border-radius:22px;padding:2px 8px;font-size:11px">Badge</span></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="border:1px solid #d6d6d6;background:#fff;border-radius:10px;padding:14px 16px">Card</span><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;border-radius:6px">Button</span><span style="border:1px solid #a3a3a3;border-radius:6px;padding:6px 10px;background:#fff">Input</span><span style="background:#eee;border-radius:4px;padding:2px 8px;font-size:11px">Badge</span></div></div>
+</figure>

package/examples/A-08.html

@@ -0,0 +1,7 @@
+<!-- A-08 · Shadow as the only depth cue -->
+<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:10px;"><div style="background:#fff;border-radius:8px;padding:10px;box-shadow:0 2px 6px rgba(0,0,0,.18)">Recent searches</div><div style="background:#fff;border-radius:8px;padding:10px;box-shadow:0 6px 18px rgba(0,0,0,.18)">Saved alerts</div><div style="background:#fff;border-radius:8px;padding:10px;box-shadow:0 12px 36px rgba(0,0,0,.18)">Team</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="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Recent searches</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Saved alerts</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Team</div></div></div>
+</figure>

package/examples/A-09.html

@@ -0,0 +1,7 @@
+<!-- A-09 · Marketing voice in an application -->
+<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;background:#fff"><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;">Supercharge your log workflow 🚀</div><div style="color:#5c5c5c;margin-top:4px;">Unlock next-level insights across your stack.</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></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;background:#fff"><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;">Errors in the last hour</div><div style="color:#5c5c5c;margin-top:4px;">214 errors, most from payment-svc.</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;">Open search</span></div></div></div>
+</figure>

package/examples/A-10.html

@@ -0,0 +1,7 @@
+<!-- A-10 · Placeholder content shipped -->
+<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:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="width:28px;height:28px;border-radius:50%;background:#ddd;display:inline-block"></span><div style="display:flex;flex-direction:column;gap:0px;"><b>John Doe</b><div style="color:#5c5c5c;margin-top:4px;">Lorem ipsum dolor sit amet, consectetur.</div></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Acme Inc · https://example.com</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="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="width:28px;height:28px;border-radius:50%;background:#1f1f1f;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px">MK</span><div style="display:flex;flex-direction:column;gap:0px;"><b>Maya Kowalski</b><div style="color:#5c5c5c;margin-top:4px;">Cut our incident time in half.</div></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Hollis Freight · hollis.co</div></div></div>
+</figure>

package/examples/A-135.html

@@ -0,0 +1,7 @@
+<!-- A-135 · A kicker above every heading -->
+<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:10px;"><div style="font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0891b2;margin-bottom:2px">Features</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">What you get</div><div style="font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0891b2;margin-bottom:2px">How it works</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Three steps to launch</div><div style="font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0891b2;margin-bottom:2px">Pricing</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Simple plans</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:10px;"><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ask your logs, get the lines</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Connect, ask, share</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">$0 to start, $49 for a team</div></div></div>
+</figure>

package/examples/A-136.html

@@ -0,0 +1,7 @@
+<!-- A-136 · An eyebrow chip over the headline -->
+<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;"><span style="align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1px solid #c7d2fe;background:#eef2ff;color:#4338ca;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600">✦ Introducing v2</span><div style="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ask your logs a question</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="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ask your logs a question</div><div style="color:#5c5c5c;margin-top:4px;">New in version 2: saved questions become alerts.</div></div></div>
+</figure>

package/examples/A-137.html

@@ -0,0 +1,7 @@
+<!-- A-137 · Cream and beige by reflex -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#2b1f18;background:#f7f0e4;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="font-family:Georgia,serif;font-size:22px">Reading rooms</div><div style="color:#5c5c5c;margin-top:4px;color:#6b5d4f">Warm, calm, and like every other page.</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;background:#efe6d6;border-color:#e2d6c2">Our process</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:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Reading rooms</div><div style="color:#5c5c5c;margin-top:4px;">Neutrals from the brand file, colour where it means something.</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Our process</div></div></div>
+</figure>

package/examples/A-138.html

@@ -0,0 +1,7 @@
+<!-- A-138 · An italic serif display headline -->
+<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-family:Georgia,'Times New Roman',serif;font-size:30px;line-height:1.05">Beautifully <em>crafted</em>, <em>quietly</em> bold.</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:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Reading rooms for public libraries</div><div style="color:#5c5c5c;margin-top:4px;">Planned around how people actually sit and read.</div></div></div>
+</figure>

package/examples/A-139.html

@@ -0,0 +1,7 @@
+<!-- A-139 · A side-tab accent border -->
+<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="background:#fff;border:1px solid #d6d6d6;border-left:4px solid #2563eb;border-radius:8px;padding:8px 10px"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in words.</div></div><div style="background:#fff;border:1px solid #d6d6d6;border-left:4px solid #2563eb;border-radius:8px;padding:8px 10px"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Know first.</div></div><div style="background:#fff;border:1px solid #d6d6d6;border-left:4px solid #2563eb;border-radius:8px;padding:8px 10px"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">Send 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;flex-direction:column;gap:6px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Know first.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><b>Sharing</b><div style="color:#5c5c5c;margin-top:4px;">Send a link.</div></div></div></div>
+</figure>

package/examples/A-140.html

@@ -0,0 +1,7 @@
+<!-- A-140 · A thick coloured border on a rounded element -->
+<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;"><div style="border:3px solid #6366f1;border-radius:22px;background:#fff;padding:14px 16px"><b>Team</b><div style="color:#5c5c5c;margin-top:4px;">$49 a month</div></div><span style="border:2px solid #6366f1;border-radius:999px;padding:6px 14px;color:#4338ca;font-weight:600">Start</span></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:10px;align-items:center;flex-wrap:wrap;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;background:#f0f0ef;border-color:#f0f0ef"><b>Team</b><div style="color:#5c5c5c;margin-top:4px;">$49 a month</div></div><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;">Start</span></div></div>
+</figure>

package/examples/A-141.html

@@ -0,0 +1,7 @@
+<!-- A-141 · Cards inside cards -->
+<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:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:10px"><div style="font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Team settings</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;margin-top:8px;padding:10px"><div style="font-size:12px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Members</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;margin-top:6px;padding:8px"><div style="color:#5c5c5c;margin-top:4px;margin:0">Ada Lovelace · owner</div></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="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:12px"><div style="font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Team settings</div><div style="margin-top:8px;font-size:12px;font-weight:700">Members</div><div style="border-top:1px solid #d6d6d6;margin-top:4px;padding-top:6px;color:#5c5c5c">Ada Lovelace · owner</div></div></div>
+</figure>

package/examples/A-142.html

@@ -0,0 +1,7 @@
+<!-- A-142 · The soft rounded card -->
+<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:12px;"><div style="background:#fbfbff;border:1px solid #e8e8f0;border-radius:24px;padding:12px 14px;box-shadow:0 12px 30px rgba(80,80,160,.12)"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in words.</div></div><div style="background:#fbfbff;border:1px solid #e8e8f0;border-radius:24px;padding:12px 14px;box-shadow:0 12px 30px rgba(80,80,160,.12)"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Know first.</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:8px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><b>Search</b><div style="color:#5c5c5c;margin-top:4px;">Ask in words.</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;"><b>Alerts</b><div style="color:#5c5c5c;margin-top:4px;">Know first.</div></div></div></div>
+</figure>

package/examples/A-143.html

@@ -0,0 +1,7 @@
+<!-- A-143 · A decorative grid or stripe background -->
+<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;background-color:#fafafa;background-image:linear-gradient(rgba(0,0,0,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.08) 1px,transparent 1px);background-size:18px 18px"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ask your logs</div><div style="color:#5c5c5c;margin-top:4px;">Lines behind every word.</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:#fafafa;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="font-size:22px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Ask your logs</div><div style="color:#5c5c5c;margin-top:4px;">A plain surface.</div></div></div>
+</figure>

package/examples/A-144.html

@@ -0,0 +1,7 @@
+<!-- A-144 · Dark mode with glowing accents -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#e5e7eb;background:#05070d;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:12px;"><div style="font-size:22px;font-weight:800;color:#e0f2fe;text-shadow:0 0 18px #22d3ee">Ask your logs</div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span style="border:1px solid #22d3ee;color:#a5f3fc;border-radius:8px;padding:7px 12px;box-shadow:0 0 18px #22d3ee;font-weight:600">Start</span><span style="border:1px solid #a855f7;color:#e9d5ff;border-radius:8px;padding:7px 12px;box-shadow:0 0 18px #a855f7;font-weight:600">Docs</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:#e5e7eb;background:#18181b;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:12px;"><div style="font-size:22px;font-weight:800;color:#f5f5f5">Ask your logs</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:#f5f5f5;color:#111">Start</span><span style="border:1px solid #3f3f46;color:#e5e5e5;border-radius:6px;padding:6px 11px;font-weight:600;font-size:12px">Docs</span></div></div></div>
+</figure>

package/examples/A-146.html

@@ -0,0 +1,7 @@
+<!-- A-146 · Numbered section 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:10px;"><div style="display:flex;gap:0px;align-items:center;flex-wrap:wrap;"><span style="font-size:11px;color:#a3a3a3;font-weight:700;margin-right:8px">01</span><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Discover</div></div><div style="display:flex;gap:0px;align-items:center;flex-wrap:wrap;"><span style="font-size:11px;color:#a3a3a3;font-weight:700;margin-right:8px">02</span><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Design</div></div><div style="display:flex;gap:0px;align-items:center;flex-wrap:wrap;"><span style="font-size:11px;color:#a3a3a3;font-weight:700;margin-right:8px">03</span><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Deliver</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:10px;"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">What we do</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">How we work with you</div><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Recent rooms</div></div></div>
+</figure>

package/examples/A-58.html

@@ -0,0 +1,7 @@
+<!-- A-58 · Decorative styling that implies meaning -->
+<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="color:#dc2626;font-weight:600">Search</div><div style="color:#2563eb;font-weight:600">Alerts</div><div style="color:#16a34a;font-weight:600">Sharing</div><div style="color:#9333ea;font-weight:600">Retention</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Four colours that mean nothing, read as four meanings.</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-weight:600">Search</div><div style="font-weight:600">Alerts</div><div style="font-weight:600">Sharing</div><div style="font-weight:600">Retention</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">One colour: the list reads as one kind of thing.</div></div>
+</figure>

package/examples/A-59.html

@@ -0,0 +1,7 @@
+<!-- A-59 · Repeated information -->
+<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>UI course · Chapter 1: Grids</div><div>UI course · Chapter 2: Type</div><div>UI course · Chapter 3: Colour</div><div>UI course · Chapter 4: Spacing</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;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">UI course</div><div>1. Grids</div><div>2. Type</div><div>3. Colour</div><div>4. Spacing</div></div></div>
+</figure>

package/examples/A-60.html

@@ -0,0 +1,7 @@
+<!-- A-60 · Icons all competing at equal weight -->
+<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="display:flex;gap:10px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;font-size:26px;background:#111;color:#fff;border-radius:8px">⌕</span><div style="color:#5c5c5c">Search in plain English</div></div><div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;font-size:26px;background:#111;color:#fff;border-radius:8px">!</span><div style="color:#5c5c5c">Alerts on patterns</div></div><div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;font-size:26px;background:#111;color:#fff;border-radius:8px">↗</span><div style="color:#5c5c5c">Share a result</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:8px;"><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;font-size:12px;color:#5c5c5c">⌕</span><div style="font-weight:600">Search in plain English</div></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;font-size:12px;color:#5c5c5c">!</span><div style="font-weight:600">Alerts on patterns</div></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:14px;height:14px;align-items:center;justify-content:center;font-size:12px;color:#5c5c5c">↗</span><div style="font-weight:600">Share a result</div></div></div></div>
+</figure>

package/examples/A-67.html

@@ -0,0 +1,7 @@
+<!-- A-67 · A container around every group -->
+<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="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:7px 10px"><div style="font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Plan</div><div style="color:#5c5c5c;margin-top:4px;margin:0">Team · $49</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:7px 10px"><div style="font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Seats</div><div style="color:#5c5c5c;margin-top:4px;margin:0">8 of 10</div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:7px 10px"><div style="font-size:13px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Renews</div><div style="color:#5c5c5c;margin-top:4px;margin:0">3 March</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:0px;"><div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #d6d6d6"><span style="font-weight:600">Plan</span><span style="color:#5c5c5c">Team · $49</span></div><div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #d6d6d6"><span style="font-weight:600">Seats</span><span style="color:#5c5c5c">8 of 10</span></div><div style="display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #d6d6d6"><span style="font-weight:600">Renews</span><span style="color:#5c5c5c">3 March</span></div></div></div>
+</figure>

package/examples/B-105.html

@@ -0,0 +1,7 @@
+<!-- B-105 · Monospace sized by a guessed ratio -->
+<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">Run <span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px">jig check --all</span> before you commit.</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">Run <span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px">jig check --all</span> before you commit.</div></div>
+</figure>

package/examples/B-106.html

@@ -0,0 +1,7 @@
+<!-- B-106 · A word stranded on its own line -->
+<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:22px;font-weight:700">Search every log your team<br>ships</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:22px;font-weight:700;max-width:14em;text-wrap:balance">Search every log your team ships</div></div>
+</figure>

package/examples/B-11.html

@@ -0,0 +1,7 @@
+<!-- B-11 · Unbounded line length -->
+<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;padding:10px"><div style="font-size:12px">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check it. Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check 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;padding:10px"><div style="font-size:12px;max-width:34ch">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check it.</div></div>
+</figure>

package/examples/B-12.html

@@ -0,0 +1,7 @@
+<!-- B-12 · Centred or justified body 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="text-align:center;font-size:12px">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check 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;"><div style="font-size:12px;max-width:40ch">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check it.</div></div>
+</figure>

package/examples/B-13.html

@@ -0,0 +1,7 @@
+<!-- B-13 · One line-height for 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:2px;"><div style="font-size:26px;font-weight:700;line-height:1.7">Ask your logs a question they can answer</div><div style="font-size:12px;line-height:1.7">Tidewell turns a question into a log query and shows the lines that answer 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:6px;"><div style="font-size:26px;font-weight:700;line-height:1.1">Ask your logs a question they can answer</div><div style="font-size:12px;line-height:1.55">Tidewell turns a question into a log query and shows the lines that answer it.</div></div></div>
+</figure>

package/examples/B-14.html

@@ -0,0 +1,7 @@
+<!-- B-14 · Thin weights for body 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="font-weight:200;font-size:13px;color:#555">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check 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;"><div style="font-weight:400;font-size:13px">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check it.</div></div>
+</figure>

package/examples/B-15.html

@@ -0,0 +1,7 @@
+<!-- B-15 · Ad-hoc type sizes -->
+<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:17px;font-weight:700">Plans</div><div style="font-size:15.5px">Team, $49 a month</div><div style="font-size:13.5px;color:#5c5c5c">Billed monthly</div><div style="font-size:12.5px;color:#5c5c5c">Cancel any time</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Four sizes, none of them on a scale.</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:18px;font-weight:700">Plans</div><div style="font-size:14px">Team, $49 a month</div><div style="font-size:12px;color:#5c5c5c">Billed monthly. Cancel any time.</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Three steps from one scale.</div></div>
+</figure>

package/examples/B-16.html

@@ -0,0 +1,7 @@
+<!-- B-16 · All-caps for anything 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="text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:.02em">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check 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;"><div style="display:flex;flex-direction:column;gap:4px;"><div style="text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em;color:#5c5c5c">Status</div><div style="font-size:13px">Tidewell turns a question into a log query and shows the lines that answer it.</div></div></div>
+</figure>

package/examples/B-17.html

@@ -0,0 +1,7 @@
+<!-- B-17 · Skipping heading levels for visual reasons -->
+<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="font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Settings</div><div style="font-size:12px;font-weight:700">&lt;h4&gt; Notifications</div><div style="color:#5c5c5c;margin-top:4px;">Picked for its size, three levels down.</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="font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Settings</div><div style="font-size:14px;font-weight:700">&lt;h2&gt; Notifications</div><div style="color:#5c5c5c;margin-top:4px;">The next level, styled to the size wanted.</div></div></div>
+</figure>

package/examples/B-75.html

@@ -0,0 +1,7 @@
+<!-- B-75 · Long-form text below 18px -->
+<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:12px;line-height:1.5;max-width:44ch">Tidewell turns a plain English question into a log query, runs it across every service you ship, and shows the lines that answer it with the query beside them so you can check it. Tidewell turns a question into a log query and shows the lines that answer 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;"><div style="font-size:17px;line-height:1.55;max-width:34ch">Tidewell turns a question into a log query and shows the lines that answer it.</div></div>
+</figure>

package/examples/B-76.html

@@ -0,0 +1,7 @@
+<!-- B-76 · More than two typefaces -->
+<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-family:Georgia,serif;font-size:20px">Reading rooms</div><div style="font-family:'Courier New',monospace;font-size:13px">For public libraries</div><div style="font-family:'Brush Script MT',cursive;font-size:18px">Est. 2019</div><div style="font-family:Verdana,sans-serif;font-size:12px">Tidewell turns a question into a log query and shows the lines that answer 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:4px;"><div style="font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Reading rooms</div><div style="font-size:13px">For public libraries, since 2019</div><div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#5c5c5c">ref RR-2019-04</div></div></div>
+</figure>

package/examples/B-77.html

@@ -0,0 +1,7 @@
+<!-- B-77 · More than two font weights -->
+<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:1px;"><div style="font-weight:300;font-size:14px">Weight 300: Team plan</div><div style="font-weight:400;font-size:14px">Weight 400: Team plan</div><div style="font-weight:500;font-size:14px">Weight 500: Team plan</div><div style="font-weight:600;font-size:14px">Weight 600: Team plan</div><div style="font-weight:700;font-size:14px">Weight 700: Team plan</div><div style="font-weight:800;font-size:14px">Weight 800: Team plan</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-weight:700;font-size:16px">Team plan</div><div style="font-weight:400;font-size:13px">$49 a month, ten seats, 30 days of logs.</div></div></div>
+</figure>

package/examples/B-78.html

@@ -0,0 +1,7 @@
+<!-- B-78 · Text placed directly on a photo -->
+<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:12px;min-height:176px;box-sizing:border-box;"><div style="height:140px;border-radius:8px;background:linear-gradient(120deg,#fde68a,#94a3b8 40%,#f8fafc 60%,#1e293b);display:flex;align-items:end;padding:12px"><div style="color:#fff;font-size:18px;font-weight:700">Reading rooms that last</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:12px;min-height:176px;box-sizing:border-box;"><div style="height:140px;border-radius:8px;background:linear-gradient(120deg,#fde68a,#94a3b8 40%,#f8fafc 60%,#1e293b);display:flex;align-items:end;overflow:hidden"><div style="background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:18px;font-weight:700;padding:28px 12px 12px;width:100%">Reading rooms that last</div></div></div>
+</figure>

package/examples/C-18.html

@@ -0,0 +1,7 @@
+<!-- C-18 · Pure black on pure white -->
+<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:#ffffff;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:#000">Retention</div><div style="color:#000">Tidewell turns a question into a log query and shows the lines that answer 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:#fbfbfa;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:#1c1c1c">Retention</div><div style="color:#1c1c1c">Tidewell turns a question into a log query and shows the lines that answer it.</div></div></div>
+</figure>

package/examples/C-19.html

@@ -0,0 +1,7 @@
+<!-- C-19 · Grey text below contrast floor -->
+<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:#fff;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><b>Deploy finished</b><div style="color:#b0b0b0">3 minutes ago · 214 lines</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:#fff;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:2px;"><b>Deploy finished</b><div style="color:#5c5c5c">3 minutes ago · 214 lines</div></div></div>
+</figure>

package/examples/C-20.html

@@ -0,0 +1,7 @@
+<!-- C-20 · Colour as the sole signal -->
+<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;">Email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#dc2626">ada@company</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;">Email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#b91c1c;border-width:2px">ada@company</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Add the part after the @, like company.com</div></div></div>
+</figure>

package/examples/C-21.html

@@ -0,0 +1,7 @@
+<!-- C-21 · Dark mode by inversion -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#fff;background:#000;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;background:#000;border-color:#fff;color:#fff"><b style="color:#e0e0ff">Plan</b><div style="color:#ffe1a8">$49 a month</div></div><div style="color:#5c5c5c;margin-top:4px;color:#cfcfcf">Colours flipped: hues turn strange, the photo would too.</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:#f5f5f5;background:#131316;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;background:#1f1f23;border-color:#2e2e33;color:#f5f5f5"><b>Plan</b><div style="color:#a3a3a3">$49 a month</div></div><div style="color:#5c5c5c;margin-top:4px;color:#a3a3a3">A ramp designed for dark: steps, not an inversion.</div></div></div>
+</figure>

package/examples/C-22.html

@@ -0,0 +1,11 @@
+<!-- C-22 · Semantic colours invented inline -->
+<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;">.saved { color: #22a06b; }
+.ok    { color: #1f9d55; }
+.done  { color: #2da44e; }</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;">.saved, .ok, .done {
+  color: var(--color-text-success);
+}</pre></div>
+</figure>

package/examples/C-49.html

@@ -0,0 +1,7 @@
+<!-- C-49 · Link treatment -->
+<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:13px">Read the <span style="color:#2563eb">retention guide</span> before you change a plan.</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:13px">Read the <span style="color:#1d4ed8;text-decoration:underline;text-underline-offset:2px">retention guide</span> before you change a plan.</div></div>
+</figure>

package/examples/C-50.html

@@ -0,0 +1,7 @@
+<!-- C-50 · Coloured heading 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:2px;"><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;color:#2563eb">Alerts</div><div style="color:#5c5c5c;margin-top:4px;">Saved questions that run on a schedule.</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;color:#2563eb">Sharing</div><div style="color:#5c5c5c;margin-top:4px;">Send a result by link.</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:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Alerts</div><div style="color:#5c5c5c;margin-top:4px;">Saved questions that run on a schedule.</div><div style="font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Sharing</div><div style="color:#5c5c5c;margin-top:4px;">Send a result by link.</div></div></div>
+</figure>

package/examples/C-66.html

@@ -0,0 +1,7 @@
+<!-- C-66 · Depth built from shadow in dark mode -->
+<figure data-example="dont">
+  <div style="font-family:system-ui,-apple-system,'Segoe UI',sans-serif;font-size:13px;line-height:1.45;color:#e5e5e5;background:#111113;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:12px;"><div style="background:#18181b;border-radius:8px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.6);color:#e5e5e5">Saved searches</div><div style="background:#18181b;border-radius:8px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.6);color:#e5e5e5">Alerts</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:#e5e5e5;background:#111113;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;flex-direction:column;gap:8px;"><div style="background:#1f1f23;border:1px solid #2e2e33;border-radius:8px;padding:10px;color:#e5e5e5">Saved searches</div><div style="background:#1f1f23;border:1px solid #2e2e33;border-radius:8px;padding:10px;color:#e5e5e5">Alerts</div></div></div>
+</figure>

package/examples/C-68.html

@@ -0,0 +1,7 @@
+<!-- C-68 · Non-interactive elements styled like interactive ones -->
+<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:8px;align-items:center;flex-wrap:wrap;"><span style="background:#1f1f1f;color:#fff;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600">Rule</span><b>A-01 Purple as the default</b></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A label wearing a button’s fill.</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="font-size:11px;color:#5c5c5c">Rule</span><b>A-01 Purple as the default</b></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A label that reads as a label.</div></div>
+</figure>

package/examples/D-111.html

@@ -0,0 +1,7 @@
+<!-- D-111 · A page that never adapts to the viewport -->
+<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;overflow:hidden"><div style="width:520px;display:flex;gap:8px"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1">Search</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1">Alerts</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;flex:1">Sharing</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Fixed at desktop width; a phone gets a slice.</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:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Search</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Alerts</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;">Sharing</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Columns that fold as the screen narrows.</div></div>
+</figure>

package/examples/D-112.html

@@ -0,0 +1,7 @@
+<!-- D-112 · A full-height section sized with `100vh` -->
+<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="border:2px solid #1f1f1f;border-radius:14px;width:120px;height:150px;overflow:hidden;background:#fff;position:relative"><div style="padding:8px;font-weight:700;font-size:12px">Ask your logs</div><div style="position:absolute;bottom:22px;left:8px"><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;font-size:10px">Start</span></div><div style="position:absolute;bottom:0;left:0;right:0;height:30px;background:#e5e5e5;font-size:9px;text-align:center;line-height:30px">browser bar</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">100vh: the button sits under the toolbar.</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="border:2px solid #1f1f1f;border-radius:14px;width:120px;height:150px;overflow:hidden;background:#fff;position:relative"><div style="padding:8px;font-weight:700;font-size:12px">Ask your logs</div><div style="position:absolute;bottom:38px;left:8px"><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;font-size:10px">Start</span></div><div style="position:absolute;bottom:0;left:0;right:0;height:30px;background:#e5e5e5;font-size:9px;text-align:center;line-height:30px">browser bar</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">100svh: the button clears it.</div></div>
+</figure>

package/examples/D-114.html

@@ -0,0 +1,7 @@
+<!-- D-114 · A pinned bar under the notch or the home indicator -->
+<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="border:2px solid #1f1f1f;border-radius:16px;width:120px;height:150px;overflow:hidden;background:#fff;position:relative"><div style="position:absolute;top:0;left:36px;right:36px;height:12px;background:#1f1f1f;border-radius:0 0 8px 8px"></div><div style="padding:4px 8px;font-size:10px;font-weight:700;background:#f0f0f0">Tidewell  ☰</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The bar sits under the notch.</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="border:2px solid #1f1f1f;border-radius:16px;width:120px;height:150px;overflow:hidden;background:#fff;position:relative"><div style="position:absolute;top:0;left:36px;right:36px;height:12px;background:#1f1f1f;border-radius:0 0 8px 8px"></div><div style="padding:18px 8px 4px;font-size:10px;font-weight:700;background:#f0f0f0">Tidewell  ☰</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Padded by the safe-area inset.</div></div>
+</figure>