jig-ui 0.16.0 → 0.17.0

package/examples/D-115.html

@@ -0,0 +1,7 @@
+<!-- D-115 · The page scrolls sideways on a phone -->
+<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"><div style="width:190px;padding:8px;font-size:10px"><b>Pricing</b><table style="font-size:10px;border-collapse:collapse;margin-top:4px"><tr><td style="padding:2px 6px">Solo</td><td style="padding:2px 6px">$0</td><td style="padding:2px 6px">1 seat</td><td style="padding:2px 6px">7 days</td></tr></table></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Wider than the phone: it scrolls sideways.</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"><div style="padding:8px;font-size:10px"><b>Pricing</b><div style="margin-top:4px">Solo · $0<br>1 seat · 7 days</div></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Reflowed to fit the width.</div></div>
+</figure>

package/examples/D-23.html

@@ -0,0 +1,11 @@
+<!-- D-23 · Spacing off the scale -->
+<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;">.row   { gap: 13px; }
+.card  { padding: 11px 19px; }
+.stack { margin-top: 27px; }</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;">.row   { gap: var(--spacing-s); }
+.card  { padding: var(--spacing-card); }
+.stack { margin-top: var(--spacing-l); }</pre></div>
+</figure>

package/examples/D-24.html

@@ -0,0 +1,7 @@
+<!-- D-24 · Symmetric spacing around 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:0px;"><div style="color:#5c5c5c;margin-top:4px;margin:0">…the end of the section before.</div><div style="margin:14px 0"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Retention</div></div><div style="color:#5c5c5c;margin-top:4px;margin:0">How long logs are kept.</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="color:#5c5c5c;margin-top:4px;margin:0">…the end of the section before.</div><div style="margin:22px 0 4px"><div style="font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Retention</div></div><div style="color:#5c5c5c;margin-top:4px;margin:0">How long logs are kept.</div></div></div>
+</figure>

package/examples/D-25.html

@@ -0,0 +1,7 @@
+<!-- D-25 · No proximity hierarchy -->
+<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;"><b>Name</b><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Ada</span></div><b>Email</b><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">ada@co.com</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:14px;"><div style="display:flex;flex-direction:column;gap:3px;"><b>Name</b><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Ada</span></div></div><div style="display:flex;flex-direction:column;gap:3px;"><b>Email</b><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">ada@co.com</span></div></div></div></div>
+</figure>

package/examples/D-26.html

@@ -0,0 +1,7 @@
+<!-- D-26 · One padding value for all containers -->
+<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:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:12px">Plan</div><span style="align-self:flex-start;background:#eee;border-radius:4px;padding:12px">Badge</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;padding:12px">Upgrade</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;flex-direction:column;gap:6px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:14px">Plan</div><span style="align-self:flex-start;background:#eee;border-radius:4px;padding:2px 8px;font-size:11px">Badge</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;">Upgrade</span></div></div>
+</figure>

package/examples/D-27.html

@@ -0,0 +1,7 @@
+<!-- D-27 · Optical alignment 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;"><div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;"><span style="display:inline-flex;width:40px;height:40px;border-radius:50%;background:#1f1f1f;color:#fff;align-items:center;justify-content:center;font-size:14px">▶</span><div style="color:#5c5c5c;margin-top:4px;margin:0">Centred by the box, so the triangle looks off.</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:10px;align-items:center;flex-wrap:wrap;"><span style="display:inline-flex;width:40px;height:40px;border-radius:50%;background:#1f1f1f;color:#fff;align-items:center;justify-content:center;font-size:14px;padding-left:3px;box-sizing:border-box">▶</span><div style="color:#5c5c5c;margin-top:4px;margin:0">Nudged right until it looks centred.</div></div></div>
+</figure>

package/examples/D-69.html

@@ -0,0 +1,7 @@
+<!-- D-69 · Spacing that does not grow outward -->
+<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:8px"><div style="display:flex;flex-direction:column;gap:16px;"><b>Plan</b><div style="color:#5c5c5c;margin-top:4px;margin:0">Team</div></div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:8px"><div style="display:flex;flex-direction:column;gap:16px;"><b>Seats</b><div style="color:#5c5c5c;margin-top:4px;margin:0">8 of 10</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="display:flex;flex-direction:column;gap:14px;"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:12px"><div style="display:flex;flex-direction:column;gap:2px;"><b>Plan</b><div style="color:#5c5c5c;margin-top:4px;margin:0">Team</div></div></div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;padding:12px"><div style="display:flex;flex-direction:column;gap:2px;"><b>Seats</b><div style="color:#5c5c5c;margin-top:4px;margin:0">8 of 10</div></div></div></div></div>
+</figure>

package/examples/D-70.html

@@ -0,0 +1,7 @@
+<!-- D-70 · Broken left edge -->
+<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="padding-left:0"><b>Plan</b></div><div style="padding-left:14px">Team, $49</div><div style="padding-left:6px">Renews 3 March</div><div style="padding-left:22px">Change 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;"><b>Plan</b><div>Team, $49</div><div>Renews 3 March</div><div>Change plan</div></div></div>
+</figure>

package/examples/D-71.html

@@ -0,0 +1,7 @@
+<!-- D-71 · Multiple alignments in one component -->
+<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;flex-direction:column;gap:4px;"><div style="text-align:center;font-weight:700">Team</div><div style="text-align:right">$49 a month</div><div style="text-align:left">Ten seats</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="display:flex;flex-direction:column;gap:4px;"><div style="font-weight:700">Team</div><div>$49 a month</div><div>Ten seats</div></div></div></div>
+</figure>

package/examples/D-72.html

@@ -0,0 +1,7 @@
+<!-- D-72 · Mixed-size text centred vertically -->
+<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;align-items:center"><span style="font-size:26px;font-weight:800">$49</span><span style="font-size:12px;color:#5c5c5c">a month</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:6px;align-items:center;flex-wrap:wrap;align-items:baseline"><span style="font-size:26px;font-weight:800">$49</span><span style="font-size:12px;color:#5c5c5c">a month</span></div></div>
+</figure>

package/examples/D-96.html

@@ -0,0 +1,7 @@
+<!-- D-96 · Icon and text out of balance -->
+<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;"><span aria-hidden="true" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;font-size:28px;">⚙</span><span style="font-size:12px">Settings</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:6px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:15px;height:15px;align-items:center;justify-content:center;font-size:13px;">⚙</span><span style="font-size:13px;font-weight:600">Settings</span></div></div>
+</figure>

package/examples/E-116.html

@@ -0,0 +1,7 @@
+<!-- E-116 · A menu that cannot be opened, or does not say it is open -->
+<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;"><b>Tidewell</b><span style="margin-left:auto;font-size:16px">☰</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">&lt;span&gt;☰&lt;/span&gt;: no button, nothing opens, no state.</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;"><b>Tidewell</b><span style="margin-left:auto"><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;">Menu</span></span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">&lt;button aria-expanded="false"&gt;Menu&lt;/button&gt;</div></div>
+</figure>

package/examples/E-28.html

@@ -0,0 +1,7 @@
+<!-- E-28 · Missing states -->
+<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:12px;align-items:center;flex-wrap:wrap;"><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">rest</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;">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">hover</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;">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">pressed</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;">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">focus</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;">Save</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Every state looks the same.</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:12px;align-items:center;flex-wrap:wrap;"><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">rest</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;">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">hover</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;background:#3a3a3a">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">pressed</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;background:#000;transform:translateY(1px)">Save</span></div><div style="display:flex;flex-direction:column;gap:2px;"><span style="font-size:10px;color:#5c5c5c">focus</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;outline:2px solid #1f1f1f;outline-offset:2px">Save</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Each state answers the pointer.</div></div>
+</figure>

package/examples/E-29.html

@@ -0,0 +1,7 @@
+<!-- E-29 · Focus removed without replacement -->
+<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="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;outline:none;border-color:#a3a3a3"><span style="color:#8a8a8a">Search logs</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Focused. Nothing shows 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="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;outline:2px solid #1f1f1f;outline-offset:2px"><span style="color:#8a8a8a">Search logs</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Focused, and visibly so.</div></div></div>
+</figure>

package/examples/E-30.html

@@ -0,0 +1,7 @@
+<!-- E-30 · Empty states omitted -->
+<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;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Saved searches</div><div style="height:70px"></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:14px;font-weight:700;line-height:1.2;letter-spacing:-0.01em;text-wrap:balance;">Saved searches</div><div style="color:#5c5c5c;margin-top:4px;">None yet. Save a search to rerun it in one click.</div><div style="display:flex;gap:8px;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;">Search your logs</span></div></div></div>
+</figure>

package/examples/E-31.html

@@ -0,0 +1,7 @@
+<!-- E-31 · Hover-only affordances -->
+<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;"><b>deploy.log</b><span style="margin-left:auto;color:#d4d4d4;font-size:11px">(hover to see actions)</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Actions appear only on hover: none on touch.</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;"><b>deploy.log</b><span style="margin-left:auto"><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;padding:3px 8px">Open</span></span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The action is always there.</div></div>
+</figure>

package/examples/E-32.html

@@ -0,0 +1,7 @@
+<!-- E-32 · Disabled buttons -->
+<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:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Work email</span></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;opacity:.35">Create workspace</span><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Disabled. Nothing says why.</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 #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Work email</span></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;">Create workspace</span><div style="font-size:12px;color:#b91c1c">✕ Enter a work email to continue</div></div></div>
+</figure>

package/examples/E-33.html

@@ -0,0 +1,11 @@
+<!-- E-33 · `div` with a click handler -->
+<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="btn" onclick="save()"&gt;
+  Save
+&lt;/div&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">No keyboard, no role, no name for a screen reader.</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 type="button"&gt;
+  Save
+&lt;/button&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Focusable, announced, works with Enter and Space.</div></div>
+</figure>

package/examples/E-34.html

@@ -0,0 +1,7 @@
+<!-- E-34 · Icon-only controls without names -->
+<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;"><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff">✎</span><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff">⧉</span><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff">🗑</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Three icons. A screen reader hears “button, button, button”.</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;"><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff" title="Rename">✎</span><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff" title="Duplicate">⧉</span><span style="display:inline-flex;width:30px;height:30px;border:1px solid #d6d6d6;border-radius:6px;align-items:center;justify-content:center;background:#fff" title="Delete">🗑</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Each named: aria-label="Rename", "Duplicate", "Delete".</div></div>
+</figure>

package/examples/E-35.html

@@ -0,0 +1,7 @@
+<!-- E-35 · Dynamic results with no announcement -->
+<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 #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">payment</div><div style="color:#5c5c5c;margin-top:4px;margin:0">12 results</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The count changed. Nothing was announced.</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="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">payment</div><div role="status" style="color:#5c5c5c">12 results</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">In a live region: announced as it changes.</div></div></div>
+</figure>

package/examples/E-51.html

@@ -0,0 +1,7 @@
+<!-- E-51 · Icon without a visible label -->
+<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:18px;align-items:center;flex-wrap:wrap;"><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⌂</span><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⌕</span><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⚑</span><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⚙</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Four icons to decode.</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:14px;align-items:center;flex-wrap:wrap;"><div style="display:flex;flex-direction:column;gap:0px;align-items:center"><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⌂</span><span style="font-size:10px">Home</span></div><div style="display:flex;flex-direction:column;gap:0px;align-items:center"><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⌕</span><span style="font-size:10px">Search</span></div><div style="display:flex;flex-direction:column;gap:0px;align-items:center"><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⚑</span><span style="font-size:10px">Alerts</span></div><div style="display:flex;flex-direction:column;gap:0px;align-items:center"><span aria-hidden="true" style="display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;font-size:16px;">⚙</span><span style="font-size:10px">Settings</span></div></div></div>
+</figure>

package/examples/E-52.html

@@ -0,0 +1,7 @@
+<!-- E-52 · Unconventional controls -->
+<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;">Retention</div><div style="display:flex;gap:4px;align-items:center;flex-wrap:wrap;"><span style="width:26px;height:26px;border-radius:50%;background:#1f1f1f;display:inline-block"></span><span style="width:26px;height:26px;border-radius:50%;background:#d4d4d4;display:inline-block"></span><span style="width:26px;height:26px;border-radius:50%;background:#d4d4d4;display:inline-block"></span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Three dots. Which is 30 days?</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;">Retention</div><div style="display:flex;flex-direction:column;gap:4px;"><label style="display:flex;gap:6px;align-items:center"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #1f1f1f;box-sizing:border-box;background:radial-gradient(#1f1f1f 45%,transparent 50%)"></span>7 days</label><label style="display:flex;gap:6px;align-items:center"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #1f1f1f;box-sizing:border-box;"></span>30 days</label><label style="display:flex;gap:6px;align-items:center"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #1f1f1f;box-sizing:border-box;"></span>90 days</label></div></div></div>
+</figure>

package/examples/E-61.html

@@ -0,0 +1,7 @@
+<!-- E-61 · Important navigation hidden when it fits -->
+<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;"><b>Tidewell</b><span style="margin-left:auto;font-size:16px">☰</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">At 1280px, four links hidden behind a menu.</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;"><b>Tidewell</b><span style="margin-left:auto;display:flex;gap:12px;font-size:12px"><span>Product</span><span>Docs</span><span>Pricing</span><span>Sign in</span></span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">They fit, so they show.</div></div>
+</figure>

package/examples/E-62.html

@@ -0,0 +1,7 @@
+<!-- E-62 · Off-screen content with no affordance -->
+<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;overflow:hidden"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 1</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 2</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 3</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The third card is cut clean at the edge: is there more?</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;overflow:hidden"><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 1</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 2</div><div style="background:#ffffff;border:1px solid #d6d6d6;border-radius:8px;padding:12px;min-width:110px">Case 3</div></div><div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;"><div style="font-size:11px;color:#5c5c5c;margin-top:8px">1 of 5</div><span style="margin-left:auto"><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;padding:3px 8px">Next →</span></span></div></div>
+</figure>

package/examples/E-63.html

@@ -0,0 +1,7 @@
+<!-- E-63 · Minimal but unreadable -->
+<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;gap:16px;align-items:center;flex-wrap:wrap;"><span style="font-size:10px;color:#c4c4c4">home</span><span style="font-size:10px;color:#c4c4c4">docs</span><span style="font-size:10px;color:#c4c4c4">pricing</span><span style="font-size:10px;color:#c4c4c4">login</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:#fff;padding:16px;min-height:176px;box-sizing:border-box;"><div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;"><span style="font-size:13px">Home</span><span style="font-size:13px">Docs</span><span style="font-size:13px">Pricing</span><span style="font-size:13px">Sign in</span></div></div>
+</figure>

package/examples/E-64.html

@@ -0,0 +1,7 @@
+<!-- E-64 · Brand colour colliding with a system 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: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;background:#dc2626">Save changes</span><div style="color:#dc2626;font-size:12px">Payment failed</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The brand red means “go” and “broken”.</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;"><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 changes</span><div style="color:#b91c1c;font-size:12px">✕ Payment failed</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Red is kept for errors.</div></div></div>
+</figure>

package/examples/E-65.html

@@ -0,0 +1,7 @@
+<!-- E-65 · More than one interactive colour -->
+<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;"><span>Read the <span style="color:#2563eb;text-decoration:underline">guide</span>, then <span style="color:#16a34a;text-decoration:underline">start a trial</span> or <span style="color:#9333ea;text-decoration:underline">book a demo</span>.</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;flex-direction:column;gap:0px;"><span>Read the <span style="color:#1d4ed8;text-decoration:underline">guide</span>, then <span style="color:#1d4ed8;text-decoration:underline">start a trial</span> or <span style="color:#1d4ed8;text-decoration:underline">book a demo</span>.</span></div></div>
+</figure>

package/examples/E-73.html

@@ -0,0 +1,7 @@
+<!-- E-73 · Interface built only for short content -->
+<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:6px;align-items:center;flex-wrap:wrap;flex-wrap:nowrap"><b style="white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:120px;display:block">Maximiliana Oyelaran-Whitfield</b><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;">Edit</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Built for “Ada”. A real name is cut off.</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:6px;align-items:center;flex-wrap:wrap;"><b>Maximiliana Oyelaran-Whitfield</b><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;">Edit</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The name wraps; the button keeps its place.</div></div>
+</figure>

package/examples/E-74.html

@@ -0,0 +1,7 @@
+<!-- E-74 · Truncating where items share a prefix -->
+<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>Invoice 2026-0…</div><div>Invoice 2026-0…</div><div>Invoice 2026-0…</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Cut where they differ.</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>Invoice …0412</div><div>Invoice …0413</div><div>Invoice …0414</div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Cut where they are the same.</div></div>
+</figure>

package/examples/E-91.html

@@ -0,0 +1,7 @@
+<!-- E-91 · Button hierarchy carried by colour alone -->
+<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="display:inline-block;align-self:flex-start;background:#1f1f1f;color:#fff;border-radius:6px;padding:7px 12px;font-weight:600;font-size:12px;background:#2563eb">Save</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;background:#64748b">Cancel</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Two filled buttons: the hierarchy is only a hue.</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="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><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 style="font-size:11px;color:#5c5c5c;margin-top:8px">Filled and outlined: the shape says which.</div></div>
+</figure>

package/examples/E-92.html

@@ -0,0 +1,7 @@
+<!-- E-92 · Light grey secondary button -->
+<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="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><span style="display:inline-block;background:#f0f0f0;color:#b5b5b5;border-radius:6px;padding:7px 12px;font-size:12px;font-weight:600">Cancel</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Cancel looks disabled.</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="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><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 style="font-size:11px;color:#5c5c5c;margin-top:8px">Cancel looks available.</div></div>
+</figure>

package/examples/E-93.html

@@ -0,0 +1,7 @@
+<!-- E-93 · Inconsistent button shapes -->
+<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="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:999px">Save</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;border-radius:2px">Preview</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;border-radius:10px">Export</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="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><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;">Preview</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;">Export</span></div></div>
+</figure>

package/examples/E-94.html

@@ -0,0 +1,7 @@
+<!-- E-94 · Destructive actions coloured red at rest -->
+<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="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;">Rename</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;background:#dc2626">Delete workspace</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Red at rest: the loudest thing on the page.</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="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;">Rename</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;">Delete workspace</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Red only in the confirm step, where it applies.</div></div>
+</figure>

package/examples/E-95.html

@@ -0,0 +1,7 @@
+<!-- E-95 · Primary action parked at the right -->
+<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;justify-content:space-between;align-items:center;max-width:300px"><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;">Back</span><span style="color:#5c5c5c;font-size:11px">Step 2 of 3</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;">Continue</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">On a wide form, the next step is far from the eye.</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;max-width:260px"><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Company name</span></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;">Continue</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;">Back</span></div></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The action sits where the eye already is.</div></div>
+</figure>

package/examples/F-100.html

@@ -0,0 +1,7 @@
+<!-- F-100 · A dropdown for a small set of options -->
+<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;">Billing</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">Monthly ▾</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Two options, hidden in a menu.</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:12px;font-weight:600;margin-bottom:4px;">Billing</div><div style="display:flex;gap:14px;align-items:center;flex-wrap:wrap;"><label style="display:flex;gap:6px;align-items:center"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #1f1f1f;box-sizing:border-box;background:radial-gradient(#1f1f1f 45%,transparent 50%)"></span>Monthly</label><label style="display:flex;gap:6px;align-items:center"><span style="width:12px;height:12px;border-radius:50%;border:2px solid #1f1f1f;box-sizing:border-box;"></span>Yearly</label></div></div></div>
+</figure>

package/examples/F-101.html

@@ -0,0 +1,7 @@
+<!-- F-101 · A long dropdown where autocomplete belongs -->
+<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;">Country</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">Select a country ▾</div><div style="border:1px solid #d6d6d6;border-radius:6px;background:#fff;font-size:12px;max-height:70px;overflow:hidden">Afghanistan<br>Åland Islands<br>Albania<br>Algeria<br>American Samoa</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;">Country</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">uni</div><div style="border:1px solid #d6d6d6;border-radius:6px;background:#fff;font-size:12px;padding:4px 8px">United Kingdom<br>United States<br>United Arab Emirates</div></div></div>
+</figure>

package/examples/F-102.html

@@ -0,0 +1,7 @@
+<!-- F-102 · Toggle and checkbox used interchangeably -->
+<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:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-block;width:30px;height:16px;border-radius:999px;background:#1f1f1f;position:relative"><span style="position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#fff"></span></span>Email me the invoice</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;">Save</span><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A switch that waits for Save: is it on yet?</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 style="display:inline-flex;width:14px;height:14px;border:2px solid #1f1f1f;border-radius:3px;box-sizing:border-box;align-items:center;justify-content:center;font-size:10px">✓</span>Email me the invoice</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;">Save</span><div style="font-size:11px;color:#5c5c5c;margin-top:8px">A checkbox waits for Save; a switch acts at once.</div></div></div>
+</figure>

package/examples/F-103.html

@@ -0,0 +1,7 @@
+<!-- F-103 · Negatively phrased checkbox 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;gap:8px;align-items:center;flex-wrap:wrap;"><span style="display:inline-flex;width:14px;height:14px;border:2px solid #1f1f1f;border-radius:3px;box-sizing:border-box;align-items:center;justify-content:center;font-size:10px"></span>Don’t send me product updates</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="display:inline-flex;width:14px;height:14px;border:2px solid #1f1f1f;border-radius:3px;box-sizing:border-box;align-items:center;justify-content:center;font-size:10px">✓</span>Send me product updates</div></div>
+</figure>

package/examples/F-104.html

@@ -0,0 +1,7 @@
+<!-- F-104 · Instructional verbs in 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:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Enter your email address</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:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Email address</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/F-113.html

@@ -0,0 +1,7 @@
+<!-- F-113 · Form text small enough to make the phone zoom -->
+<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;font-size:12px">ada@company.com</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">12px: the phone zooms in when it is tapped.</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;font-size:16px">ada@company.com</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">16px: no zoom.</div></div></div>
+</figure>

package/examples/F-147.html

@@ -0,0 +1,7 @@
+<!-- F-147 · Asking for more than the task needs -->
+<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="display:grid;grid-template-columns:1fr 1fr;gap:4px 8px"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:1px;font-size:11px">Name</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px"><span style="color:#8a8a8a">Ada</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:1px;font-size:11px">Work email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px"><span style="color:#8a8a8a">ada@co.com</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:1px;font-size:11px">Phone</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px"><span style="color:#8a8a8a">+44</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:1px;font-size:11px">Company size</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px"><span style="color:#8a8a8a">Choose</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:1px;font-size:11px">Job title</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px">&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:1px;font-size:11px">How did you hear?</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px">&nbsp;</div></div></div><div style="margin-top:6px"><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 free trial</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;flex-direction:column;gap:8px;max-width:260px"><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;margin-bottom:1px;font-size:11px">Work email</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;padding:2px 7px;font-size:12px"><span style="color:#8a8a8a">ada@company.com</span></div></div><div style="color:#5c5c5c;margin-top:4px;margin:0;font-size:12px">That is all we need to start. Invite your team later.</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;">Create workspace</span></div></div>
+</figure>

package/examples/F-36.html

@@ -0,0 +1,7 @@
+<!-- F-36 · Placeholder as label -->
+<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:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">Email address</span></div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;border-color:#a3a3a3">ada@compa</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Once typed in, which field was this?</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;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Email address</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">ada@company.com</span></div></div><div style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Email address</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;">ada@compa</div></div></div></div>
+</figure>

package/examples/F-37.html

@@ -0,0 +1,7 @@
+<!-- F-37 · Unhelpful error 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;">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 4242</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Invalid input</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;">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 4242</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Enter all 16 digits; this has 12</div></div></div>
+</figure>

package/examples/F-38.html

@@ -0,0 +1,7 @@
+<!-- F-38 · Validation timing wrong at both ends -->
+<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:#b91c1c">a</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Enter a valid email</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Shouted after one keystroke.</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:#a3a3a3">ada@</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Checked when you leave the field, rechecked as you fix it.</div></div></div>
+</figure>

package/examples/F-39.html

@@ -0,0 +1,7 @@
+<!-- F-39 · Input cleared on error -->
+<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:#b91c1c">&nbsp;</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Needs a number</div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">The whole password is gone.</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;border-color:#b91c1c">•••••••••</div><div style="color:#b91c1c;font-size:12px;margin-top:4px">✕ Add a number to what you typed</div></div></div>
+</figure>

package/examples/F-40.html

@@ -0,0 +1,7 @@
+<!-- F-40 · Missing input affordances -->
+<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;">Phone</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:11px;color:#5c5c5c;margin-top:8px">type="text", no autocomplete: the phone shows letters.</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;">Phone</div><div style="background:#ffffff;border:1px solid #a3a3a3;border-radius:6px;padding:7px 9px;font-size:13px;min-height:18px;"><span style="color:#8a8a8a">+44 7700 900123</span></div><div style="font-size:11px;color:#5c5c5c;margin-top:8px">type="tel" autocomplete="tel": the number pad, and autofill.</div></div></div>
+</figure>

package/examples/F-41.html

@@ -0,0 +1,11 @@
+<!-- F-41 · Critical function dependent on JavaScript -->
+<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="#" onclick="submitOrder()"&gt;
+  Place order
+&lt;/a&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">No script, no order.</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;form method="post" action="/order"&gt;
+  &lt;button&gt;Place order&lt;/button&gt;
+&lt;/form&gt;</pre><div style="font-size:11px;color:#5c5c5c;margin-top:8px">Works before the script loads, and without it.</div></div>
+</figure>

package/examples/F-97.html

@@ -0,0 +1,7 @@
+<!-- F-97 · Required fields left unmarked -->
+<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;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Name</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 style="display:flex;flex-direction:column;gap:0px;"><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 style="font-size:11px;color:#5c5c5c;margin-top:8px">Which of these can be skipped?</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;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Name</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 style="display:flex;flex-direction:column;gap:0px;"><div style="font-size:12px;font-weight:600;margin-bottom:4px;">Company <span style="font-weight:400;color:#5c5c5c">(optional)</span></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></div>
+</figure>