{ "pack_id": "screenshot-design-review", "title": "Screenshot design review", "version": "0.1.0", "summary": "A collection of nouns and verbs for reviewing a user interface screenshot against design rules: a screenshot sent with little or no text described first, captures at named widths and themes, text size, contrast, cropping, overflow, alignment, spacing and broken assets measured from each capture's layout, every failing check recorded as a finding with its capture and location, a proposed fix verb for each, and a re-render at the same widths and themes verified by a different worker.", "dependencies": [ "findings-to-fixes", "visual-rendering", "video-motion", "policy-and-law-watch", "taste-palettes" ], "boundaries": [ "Findings, fixes and closing use the findings to fixes pack; this pack adds intake, captures and measured checks.", "Captures use local or test pages with synthetic data; a screenshot that shows personal data is never recorded.", "A matter of taste is a palette brief, never a finding.", "No verb changes the page; importing the pack writes nothing and enqueues nothing." ], "nouns": [ { "slug": "pack", "category": "noun.skill_pack", "role": "pack", "title": "A collection of nouns and verbs for reviewing a user interface screenshot against design rules", "value": { "lets_workers": "Review a user interface screenshot against design rules: describe a screenshot sent with little or no text before judging it, capture the page at named widths and themes, measure text size, contrast, cropping, overflow, alignment, spacing and broken assets from each capture's layout, record every failing check as a finding with its capture and location, propose a fix verb for each, and have a different worker re-render the same widths and themes and verify every fix.", "flow": [ { "verb": { "$verb": "screenshot-design-review.describe-screenshot" } }, { "verb": { "$verb": "screenshot-design-review.plan-captures" } }, { "verb": { "$verb": "screenshot-design-review.capture-screens" } }, { "verb": { "$verb": "screenshot-design-review.check-design-rules" } }, { "verb": { "$verb": "screenshot-design-review.record-design-findings" } }, { "verb": { "$verb": "findings-to-fixes.triage" }, "when": "Triage confirms each finding's kind and severity." }, { "verb": { "$verb": "findings-to-fixes.propose-fix" }, "when": "A taste call gets a palette brief instead of a fix." }, { "verb": { "$verb": "findings-to-fixes.fix" }, "when": "In a local copy, with a page check that fails first." }, { "verb": { "$verb": "screenshot-design-review.rerender-and-verify" }, "when": "A different worker, at the same widths and themes." }, { "verb": { "$verb": "findings-to-fixes.close" }, "when": "Only after a passing verification." } ], "complements": [ "Findings, fixes, verifications and closing come from the findings to fixes pack; this pack adds the screenshot-first intake, the capture matrix and the measured design checks.", "The contrast formula is visual and 3D rendering's worked example, pinned rather than redefined.", "Captures use the video and motion pack's Playwright and Chromium tool cards; a matter of taste becomes a taste palettes brief." ], "guardrails": [ { "$pin": "guardrail.describe-before-judging" }, { "$pin": "guardrail.locate-every-finding" }, { "$pin": "guardrail.same-matrix-after-a-fix" }, { "$pin": "policy-and-law-watch:guardrail.no-personal-data" } ], "worked_example": "Synthetic: a phone screenshot with no text, described first; a volunteer sign-up page captured at 320, 768 and 1440 CSS pixels in light and dark; 29 failing checks across all seven rules, recorded as seven findings with their cells and boxes; and a re-render that verifies the contrast fix and finds the alignment fix still failing at 1440." }, "relations": [ [ "requires_noun", "guardrail.describe-before-judging" ], [ "requires_noun", "guardrail.locate-every-finding" ], [ "requires_noun", "guardrail.same-matrix-after-a-fix" ], [ "requires_noun", "policy-and-law-watch:guardrail.no-personal-data" ], [ "requires_noun", "capture-matrix" ], [ "requires_noun", "design-rules" ], [ "requires_noun", "template.review-request" ], [ "requires_noun", "template.screenshot-description" ], [ "requires_noun", "template.capture-plan" ], [ "requires_noun", "template.capture-set" ], [ "requires_noun", "template.layout-facts" ], [ "requires_noun", "template.design-check-report" ], [ "requires_noun", "findings-to-fixes:template.finding" ], [ "requires_noun", "findings-to-fixes:template.verification" ], [ "requires_noun", "visual-rendering:example.contrast" ] ] }, { "slug": "guardrail.describe-before-judging", "category": "noun.skill_pack", "role": "guardrail", "title": "Guardrail: describe a screenshot before judging it", "category_reason": "A guardrail is a reusable rule every verb in this work follows, with the check that proves it.", "value": { "rule": "Say what a screenshot shows before judging it: the page and state as far as they can be seen, the visible text exactly, the apparent theme and how it was told. Mark what cannot be seen as unknown, such as the width in CSS pixels, the build and the address. Concerns stay observations until a capture measures them.", "how_it_is_checked": "A screenshot description lists visible text, unknowns and proposed captures, and records no finding." } }, { "slug": "guardrail.locate-every-finding", "category": "noun.skill_pack", "role": "guardrail", "title": "Guardrail: every finding names its capture and location", "category_reason": "A guardrail is a reusable rule every verb in this work follows, with the check that proves it.", "value": { "rule": "Every finding names each capture cell it was seen in by width and theme, the screenshot's digest, the element's selector and box in CSS pixels, the rule it breaks, what was measured and the threshold.", "how_it_is_checked": "The design finding checks fail any finding without a located screenshot and a measurement." } }, { "slug": "guardrail.same-matrix-after-a-fix", "category": "noun.skill_pack", "role": "guardrail", "title": "Guardrail: a fix is verified at the same widths and themes", "category_reason": "A guardrail is a reusable rule every verb in this work follows, with the check that proves it.", "value": { "rule": "A fix is verified by re-rendering every cell of the original capture plan on the fixed build and rerunning every check. A fix seen at one width or theme is not verified at the others, and a new failure anywhere is a new finding.", "how_it_is_checked": "A verification lists the fixed build's screenshots for every cell the finding failed in, and fix_verified needs all of them to pass." } }, { "slug": "capture-matrix", "category": "noun.reflex_procedure", "role": "capture_matrix", "title": "Capturing a page at named widths, themes and states", "category_reason": "A zero-call deterministic procedure: the same inputs always give the same result.", "value": { "defaults": { "widths_px": [ 320, 768, 1440 ], "themes": [ "light", "dark" ], "states": [ "default" ], "viewport_height_px": 800, "device_scale_factor": 1 }, "rules": [ "Capture every cell: each width with each theme and each state the request names. 320 CSS pixels is where WCAG's reflow rule applies.", "Use a pinned browser build through the pinned Playwright version, set the theme with its color scheme emulation, and set reduced motion to reduce.", "Take full-page screenshots with animations disabled, the text caret hidden and one image pixel per CSS pixel.", "Wait for fonts and network to settle before each capture; record a failed cell with its reason instead of retrying silently.", "Collect each cell's layout facts from the same render: every text element's box, font size, weight and colors; every control's clipping; every image's load state; the document's scroll width.", "Store every screenshot and layout by SHA-256. Use test pages and synthetic accounts only; never capture personal data." ], "model_calls": 0 }, "relations": [ [ "requires_noun", "video-motion:tool.playwright" ], [ "requires_noun", "video-motion:tool.chromium" ], [ "requires_noun", "policy-and-law-watch:guardrail.no-personal-data" ] ] }, { "slug": "design-rules", "category": "noun.benchmark_suite", "role": "design_rules", "title": "Design rules measured from a capture's layout", "category_reason": "A fixed set of checks with thresholds and methods that every capture is scored against.", "value": { "thresholds": { "min_text_px": 12, "contrast_normal": 4.5, "contrast_large": 3.0, "large_text_px": 24, "large_bold_px": 18.66, "bold_weight": 700, "spacing_unit_px": 4 }, "checks": [ { "id": "text-size", "fails_when": "Any text element's computed font size is below min_text_px.", "basis": "A team default of 12 CSS px; WCAG sets no minimum size, so the request may set another." }, { "id": "contrast", "fails_when": "Text contrast is below 4.5:1, or below 3:1 for large text: at least 24 CSS px, or at least 18.66 CSS px and weight 700.", "basis": "WCAG 2.2 success criterion 1.4.3, with relative luminance computed as in visual and 3D rendering's contrast example." }, { "id": "cropping", "fails_when": "An element that hides its overflow holds content more than 1 CSS px wider than its box.", "basis": "WCAG 2.2 asks for no loss of content when text is resized or respaced (1.4.4, 1.4.12)." }, { "id": "overflow", "fails_when": "The document's scroll width is above the viewport width, so the page scrolls sideways.", "basis": "WCAG 2.2 success criterion 1.4.10, reflow at 320 CSS px." }, { "id": "alignment", "fails_when": "A member of a declared alignment group sits 1 CSS px or more off the group's most common edge.", "basis": "The groups the request declares; nothing is guessed from the picture." }, { "id": "spacing", "fails_when": "A gap between consecutive members of a declared stack is not a multiple of spacing_unit_px.", "basis": "A team default spacing scale of 4 CSS px." }, { "id": "broken-asset", "fails_when": "An image did not load or has a natural width of 0.", "basis": "The browser's own load state for each image." } ], "rules": [ "Reproduce the contrast example's expected ratios before checking anything; stop with blocked if they differ.", "Every check reports its measurement and threshold; a check that cannot run is not_run with a reason, never a pass.", "passed is true only when no check fails in any cell." ], "contrast_example": { "$pin": "visual-rendering:example.contrast" } }, "relations": [ [ "requires_noun", "visual-rendering:example.contrast" ] ] }, { "slug": "template.review-request", "category": "noun.seed_hypothesis", "role": "template", "title": "Template: the page, its capture matrix and the rules to check", "value": { "describes": "a design review request: the page, address and build, the states, widths and themes, the rule thresholds, the declared alignment groups and stacks, any screenshots the person sent, their words, and what is out of scope", "schema": { "type": "object", "additionalProperties": false, "required": [ "page", "states", "widths_px", "themes", "rules", "alignment_groups", "stacks", "supplied_screenshots", "person_said", "out_of_scope" ], "properties": { "page": { "type": "object", "additionalProperties": false, "required": [ "name", "address", "build" ], "properties": { "name": { "type": "string", "minLength": 1, "maxLength": 160 }, "address": { "type": "string", "minLength": 1, "maxLength": 300 }, "build": { "type": "string", "minLength": 1, "maxLength": 80 } } }, "states": { "type": "array", "minItems": 1, "maxItems": 20, "items": { "type": "string", "minLength": 1, "maxLength": 60 } }, "widths_px": { "type": "array", "minItems": 1, "maxItems": 8, "items": { "type": "integer", "minimum": 200, "maximum": 4000 } }, "themes": { "type": "array", "minItems": 1, "maxItems": 3, "items": { "type": "string", "enum": [ "light", "dark", "high_contrast" ] } }, "rules": { "type": "object", "additionalProperties": false, "required": [ "min_text_px", "contrast_normal", "contrast_large", "large_text_px", "large_bold_px", "bold_weight", "spacing_unit_px" ], "properties": { "min_text_px": { "type": "number", "minimum": 0 }, "contrast_normal": { "type": "number", "minimum": 0 }, "contrast_large": { "type": "number", "minimum": 0 }, "large_text_px": { "type": "number", "minimum": 0 }, "large_bold_px": { "type": "number", "minimum": 0 }, "bold_weight": { "type": "number", "minimum": 0 }, "spacing_unit_px": { "type": "number", "minimum": 0 } } }, "alignment_groups": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "edge", "members" ], "properties": { "id": { "type": "string", "minLength": 1, "maxLength": 60 }, "edge": { "type": "string", "enum": [ "left", "right", "top", "bottom" ] }, "members": { "type": "array", "minItems": 2, "maxItems": 40, "items": { "type": "string", "minLength": 1, "maxLength": 200 } } } } }, "stacks": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "axis", "members" ], "properties": { "id": { "type": "string", "minLength": 1, "maxLength": 60 }, "axis": { "type": "string", "enum": [ "vertical", "horizontal" ] }, "members": { "type": "array", "minItems": 2, "maxItems": 40, "items": { "type": "string", "minLength": 1, "maxLength": 200 } } } } }, "supplied_screenshots": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "string", "pattern": "^[0-9a-f]{64}$" } }, "person_said": { "type": "string", "minLength": 1, "maxLength": 2000 }, "out_of_scope": { "type": "array", "minItems": 1, "maxItems": 10, "items": { "type": "string", "minLength": 1, "maxLength": 200 } } } }, "rules": [ "The address is a local or test page with synthetic data.", "person_said is verbatim, or says there was no text." ] } }, { "slug": "template.screenshot-description", "category": "noun.seed_hypothesis", "role": "template", "title": "Template: what a screenshot shows, said before any judgment", "value": { "describes": "a screenshot description: the screenshot's digest and size, what is shown, the visible text exactly, the apparent theme and its basis, the width in CSS pixels if known, the likely concerns as observations, any taste reactions, the unknowns and the cells to capture", "schema": { "type": "object", "additionalProperties": false, "required": [ "screenshot", "what_is_shown", "visible_text", "apparent_theme", "theme_basis", "css_width", "likely_concerns", "taste_reactions", "unknowns", "proposed_cells" ], "properties": { "screenshot": { "type": "object", "additionalProperties": false, "required": [ "sha256", "width_px", "height_px" ], "properties": { "sha256": { "type": "string", "pattern": "^[0-9a-f]{64}$" }, "width_px": { "type": "integer", "minimum": 1 }, "height_px": { "type": "integer", "minimum": 1 } } }, "what_is_shown": { "type": "string", "minLength": 1, "maxLength": 600 }, "visible_text": { "type": "array", "minItems": 0, "maxItems": 60, "items": { "type": "string", "minLength": 1, "maxLength": 300 } }, "apparent_theme": { "type": "string", "enum": [ "light", "dark", "high_contrast", "unknown" ] }, "theme_basis": { "type": "string", "minLength": 1, "maxLength": 300 }, "css_width": { "type": [ "integer", "null" ], "minimum": 200, "maximum": 4000 }, "likely_concerns": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "string", "minLength": 1, "maxLength": 300 } }, "taste_reactions": { "type": "array", "minItems": 0, "maxItems": 10, "items": { "type": "string", "minLength": 1, "maxLength": 300 } }, "unknowns": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "object", "additionalProperties": false, "required": [ "item", "reason", "would_resolve" ], "properties": { "item": { "type": "string", "minLength": 1, "maxLength": 200 }, "reason": { "type": "string", "minLength": 1, "maxLength": 400 }, "would_resolve": { "type": "string", "minLength": 1, "maxLength": 300 } } } }, "proposed_cells": { "type": "array", "minItems": 1, "maxItems": 60, "items": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" } } } }, "rules": [ "visible_text is transcribed exactly, cut-off words included.", "A likely concern is an observation; only a measured check makes a finding." ] } }, { "slug": "template.capture-plan", "category": "noun.scene_recipe", "role": "template", "title": "Template: every capture cell and the settings that make captures repeatable", "value": { "describes": "a capture plan: the page, address and build, the pinned browser, the viewport height and device scale, the screenshot settings and every cell by width, theme and state", "schema": { "type": "object", "additionalProperties": false, "required": [ "page", "address", "build", "browser", "viewport_height_px", "device_scale_factor", "settings", "cells" ], "properties": { "page": { "type": "string", "minLength": 1, "maxLength": 160 }, "address": { "type": "string", "minLength": 1, "maxLength": 300 }, "build": { "type": "string", "minLength": 1, "maxLength": 80 }, "browser": { "type": "object", "additionalProperties": false, "required": [ "name", "pinned_by" ], "properties": { "name": { "type": "string", "minLength": 1, "maxLength": 80 }, "pinned_by": { "type": "string", "minLength": 1, "maxLength": 160 } } }, "viewport_height_px": { "type": "integer", "minimum": 200, "maximum": 10000 }, "device_scale_factor": { "type": "number", "minimum": 1, "maximum": 4 }, "settings": { "type": "object", "additionalProperties": false, "required": [ "full_page", "animations", "caret", "scale", "reduced_motion", "wait_for" ], "properties": { "full_page": { "type": "boolean" }, "animations": { "type": "string", "enum": [ "disabled" ] }, "caret": { "type": "string", "enum": [ "hide" ] }, "scale": { "type": "string", "enum": [ "css" ] }, "reduced_motion": { "type": "string", "enum": [ "reduce" ] }, "wait_for": { "type": "string", "minLength": 1, "maxLength": 160 } } }, "cells": { "type": "array", "minItems": 1, "maxItems": 60, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "width_px", "theme", "state" ], "properties": { "id": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" }, "width_px": { "type": "integer", "minimum": 200, "maximum": 4000 }, "theme": { "type": "string", "enum": [ "light", "dark", "high_contrast" ] }, "state": { "type": "string", "minLength": 1, "maxLength": 60 } } } } } }, "rules": [ "Every width, theme and state the request names appears in cells exactly once." ] }, "category_reason": "A capture plan is a reproducible recipe for a set of renders, kept as data." }, { "slug": "template.capture-set", "category": "noun.eval_run", "role": "template", "title": "Template: every capture cell's screenshot and layout, by digest", "value": { "describes": "a capture set: the page, build and browser, and for every cell its status, screenshot digest and size, capture time and layout facts digest", "schema": { "type": "object", "additionalProperties": false, "required": [ "page", "build", "browser", "captures" ], "properties": { "page": { "type": "string", "minLength": 1, "maxLength": 160 }, "build": { "type": "string", "minLength": 1, "maxLength": 80 }, "browser": { "type": "object", "additionalProperties": false, "required": [ "name", "version" ], "properties": { "name": { "type": "string", "minLength": 1, "maxLength": 80 }, "version": { "type": "string", "minLength": 1, "maxLength": 80 } } }, "captures": { "type": "array", "minItems": 1, "maxItems": 60, "items": { "type": "object", "additionalProperties": false, "required": [ "cell", "status", "screenshot_sha256", "image_width_px", "image_height_px", "captured_at", "layout_facts_sha256" ], "properties": { "cell": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" }, "status": { "type": "string", "enum": [ "captured", "failed" ] }, "screenshot_sha256": { "type": "string", "pattern": "^[0-9a-f]{64}$" }, "image_width_px": { "type": "integer", "minimum": 1 }, "image_height_px": { "type": "integer", "minimum": 1 }, "captured_at": { "type": "string", "minLength": 10, "maxLength": 40 }, "layout_facts_sha256": { "type": "string", "pattern": "^[0-9a-f]{64}$" }, "reason": { "type": "string", "minLength": 1, "maxLength": 300 } } } }, "note": { "type": "string", "minLength": 1, "maxLength": 400 } } }, "rules": [ "A failed cell keeps its reason; no cell is left out." ] } }, { "slug": "template.layout-facts", "category": "noun.eval_run", "role": "template", "title": "Template: the measured layout of every capture cell", "value": { "describes": "layout facts: for every capture cell, the viewport, the document's scroll width and each element's selector, role and box in CSS pixels, with font size, weight and colors for text, clipping for controls and load state for images", "schema": { "type": "object", "additionalProperties": false, "required": [ "page", "build", "cells" ], "properties": { "page": { "type": "string", "minLength": 1, "maxLength": 160 }, "build": { "type": "string", "minLength": 1, "maxLength": 80 }, "cells": { "type": "array", "minItems": 1, "maxItems": 60, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "width_px", "height_px", "theme", "state", "document", "elements" ], "properties": { "id": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" }, "width_px": { "type": "integer", "minimum": 200, "maximum": 4000 }, "height_px": { "type": "integer", "minimum": 200, "maximum": 10000 }, "theme": { "type": "string", "enum": [ "light", "dark", "high_contrast" ] }, "state": { "type": "string", "minLength": 1, "maxLength": 60 }, "document": { "type": "object", "additionalProperties": false, "required": [ "scroll_width_px", "client_width_px" ], "properties": { "scroll_width_px": { "type": "integer", "minimum": 0 }, "client_width_px": { "type": "integer", "minimum": 0 } } }, "elements": { "type": "array", "minItems": 1, "maxItems": 200, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "selector", "role", "box" ], "properties": { "id": { "type": "string", "minLength": 1, "maxLength": 60 }, "selector": { "type": "string", "minLength": 1, "maxLength": 200 }, "role": { "type": "string", "enum": [ "text", "control", "image", "container" ] }, "box": { "type": "array", "minItems": 4, "maxItems": 4, "items": { "type": "integer", "minimum": 0, "maximum": 100000 } }, "font_size_px": { "type": "number", "minimum": 0 }, "font_weight": { "type": "integer", "minimum": 100, "maximum": 1000 }, "color": { "type": "string", "pattern": "^#[0-9a-f]{6}$" }, "background": { "type": "string", "pattern": "^#[0-9a-f]{6}$" }, "scroll_width_px": { "type": "integer", "minimum": 0 }, "client_width_px": { "type": "integer", "minimum": 0 }, "clips_overflow": { "type": "boolean" }, "loaded": { "type": "boolean" }, "natural_width_px": { "type": "integer", "minimum": 0 } } } } } } } } }, "rules": [ "Every value is measured from the same render as the cell's screenshot.", "Colors are the computed text and background colors, as lowercase hex." ] } }, { "slug": "template.design-check-report", "category": "noun.eval_run", "role": "template", "title": "Template: every design rule applied to every capture cell", "value": { "describes": "a design check report: the thresholds, groups and stacks used, whether the contrast example was reproduced, the checked and failed counts per cell and rule, and every failure with its cell, selector, box, measurement and threshold", "schema": { "type": "object", "additionalProperties": false, "required": [ "page", "build", "contrast_example_reproduced", "rules", "groups", "stacks", "counts", "failures", "passed" ], "properties": { "page": { "type": "string", "minLength": 1, "maxLength": 160 }, "build": { "type": "string", "minLength": 1, "maxLength": 80 }, "contrast_example_reproduced": { "type": "boolean" }, "rules": { "type": "object", "additionalProperties": false, "required": [ "min_text_px", "contrast_normal", "contrast_large", "large_text_px", "large_bold_px", "bold_weight", "spacing_unit_px" ], "properties": { "min_text_px": { "type": "number", "minimum": 0 }, "contrast_normal": { "type": "number", "minimum": 0 }, "contrast_large": { "type": "number", "minimum": 0 }, "large_text_px": { "type": "number", "minimum": 0 }, "large_bold_px": { "type": "number", "minimum": 0 }, "bold_weight": { "type": "number", "minimum": 0 }, "spacing_unit_px": { "type": "number", "minimum": 0 } } }, "groups": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "edge", "members" ], "properties": { "id": { "type": "string", "minLength": 1, "maxLength": 60 }, "edge": { "type": "string", "enum": [ "left", "right", "top", "bottom" ] }, "members": { "type": "array", "minItems": 2, "maxItems": 40, "items": { "type": "string", "minLength": 1, "maxLength": 200 } } } } }, "stacks": { "type": "array", "minItems": 0, "maxItems": 20, "items": { "type": "object", "additionalProperties": false, "required": [ "id", "axis", "members" ], "properties": { "id": { "type": "string", "minLength": 1, "maxLength": 60 }, "axis": { "type": "string", "enum": [ "vertical", "horizontal" ] }, "members": { "type": "array", "minItems": 2, "maxItems": 40, "items": { "type": "string", "minLength": 1, "maxLength": 200 } } } } }, "counts": { "type": "array", "minItems": 1, "maxItems": 400, "items": { "type": "object", "additionalProperties": false, "required": [ "cell", "rule", "checked", "failed" ], "properties": { "cell": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" }, "rule": { "type": "string", "enum": [ "text-size", "contrast", "cropping", "overflow", "alignment", "spacing", "broken-asset" ] }, "checked": { "type": "integer", "minimum": 0 }, "failed": { "type": "integer", "minimum": 0 } } } }, "failures": { "type": "array", "minItems": 0, "maxItems": 400, "items": { "type": "object", "additionalProperties": false, "required": [ "cell", "rule", "selector", "box", "measured", "threshold" ], "properties": { "cell": { "type": "string", "pattern": "^[0-9]{3,4}-(light|dark|high_contrast)$" }, "rule": { "type": "string", "enum": [ "text-size", "contrast", "cropping", "overflow", "alignment", "spacing", "broken-asset" ] }, "selector": { "type": "string", "minLength": 1, "maxLength": 200 }, "box": { "type": "array", "minItems": 4, "maxItems": 4, "items": { "type": "integer", "minimum": 0, "maximum": 100000 } }, "measured": { "type": "string", "minLength": 1, "maxLength": 120 }, "threshold": { "type": "string", "minLength": 1, "maxLength": 120 } } } }, "passed": { "type": "boolean" } } }, "rules": [ "passed is true only when failures is empty.", "Every cell and rule appears once in counts." ] } }, { "slug": "checklist", "category": "noun.skill_pack", "role": "checklist", "title": "Checklist a person runs before trusting a design review", "category_reason": "A short checklist a person runs is part of the review's guardrails.", "value": { "items": [ "A screenshot sent without words was described before anything was judged.", "Every width, theme and state the request names was captured, or its failure is recorded.", "Every finding names its cells, its element's box and the rule, measurement and threshold.", "Matters of taste went to a palette brief, not into a finding.", "No capture shows personal data or a real account.", "Every fix was verified at the same widths and themes by someone other than the fixer." ] } }, { "slug": "sources", "category": "noun.public_source", "role": "sources", "title": "Dated public sources for screenshot design reviews", "value": { "sources": [ { "title": "W3C: Web Content Accessibility Guidelines (WCAG) 2.2", "url": "https://www.w3.org/TR/WCAG22/", "used_for": "Contrast minimum (1.4.3), resize text (1.4.4), reflow (1.4.10), text spacing (1.4.12), and relative luminance", "checked_date": "2026-10-30" }, { "title": "W3C WAI: Understanding Success Criterion 1.4.3 Contrast (Minimum)", "url": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html", "used_for": "4.5:1 for text and 3:1 for large text", "checked_date": "2026-10-30" }, { "title": "W3C WAI: Understanding Success Criterion 1.4.10 Reflow", "url": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html", "used_for": "No sideways scrolling at a width of 320 CSS pixels", "checked_date": "2026-10-30" }, { "title": "W3C WAI: Understanding Success Criterion 1.4.12 Text Spacing", "url": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html", "used_for": "No loss of content when spacing changes", "checked_date": "2026-10-30" }, { "title": "Playwright: Screenshots", "url": "https://playwright.dev/docs/screenshots", "used_for": "Full-page and element screenshots", "checked_date": "2026-10-30" }, { "title": "Playwright: Emulation", "url": "https://playwright.dev/docs/emulation", "used_for": "Viewport size and color scheme emulation", "checked_date": "2026-10-30" }, { "title": "Playwright: Page API", "url": "https://playwright.dev/docs/api/class-page", "used_for": "Screenshot options for animations, caret and scale, and media emulation for reduced motion and forced colors", "checked_date": "2026-10-30" }, { "title": "MDN: Element.scrollWidth", "url": "https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth", "used_for": "Measuring content wider than its box", "checked_date": "2026-10-30" }, { "title": "MDN: HTMLImageElement.naturalWidth", "url": "https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth", "used_for": "Telling a broken image from a loaded one", "checked_date": "2026-10-30" } ], "recheck": "Recheck each source before relying on it; versions change." } }, { "slug": "test-cases", "category": "noun.benchmark_suite", "role": "test_cases", "title": "Synthetic test cases for screenshot design reviews", "synthetic": true, "value": { "cases": [ { "id": "SDR-NO-TEXT", "scenario": "A person sends a screenshot with no words", "sample_input": "SYNTHETIC: one phone screenshot, nothing else.", "expected_outcome": "screenshot_described", "expected_indicators": [ "described_before_judging", "width_unknown", "captures_proposed" ], "expected_human_escalation": false }, { "id": "SDR-PERSONAL-DATA", "scenario": "The screenshot shows a real person's email address", "sample_input": "SYNTHETIC: a capture of a live account page.", "expected_outcome": "blocked", "expected_indicators": [ "not_recorded", "synthetic_account_asked_for" ], "expected_human_escalation": true }, { "id": "SDR-ONE-THEME", "scenario": "Only a dark capture exists", "sample_input": "SYNTHETIC: the dark theme at 390 px.", "expected_outcome": "captures_taken", "expected_indicators": [ "light_theme_captured", "all_widths_captured" ], "expected_human_escalation": false }, { "id": "SDR-DARK-ONLY-CONTRAST", "scenario": "A link passes in light and fails in dark", "sample_input": "SYNTHETIC: #3d5afe on #121212.", "expected_outcome": "findings_recorded", "expected_indicators": [ "dark_cells_only", "ratio_3.65", "one_finding" ], "expected_human_escalation": false }, { "id": "SDR-TASTE", "scenario": "The person says the page feels bland", "sample_input": "SYNTHETIC: It looks boring, can it pop more?", "expected_outcome": "findings_recorded", "expected_indicators": [ "palette_brief_proposed", "no_finding_for_taste" ], "expected_human_escalation": true }, { "id": "SDR-MID-ANIMATION", "scenario": "A capture catches a transition halfway", "sample_input": "SYNTHETIC: a fading banner at 50% opacity.", "expected_outcome": "captures_taken", "expected_indicators": [ "animations_disabled", "recaptured_stable" ], "expected_human_escalation": false }, { "id": "SDR-BROKEN-IMAGE", "scenario": "An image request fails", "sample_input": "SYNTHETIC: the logo returns 404.", "expected_outcome": "findings_recorded", "expected_indicators": [ "broken_asset_finding", "every_cell_listed" ], "expected_human_escalation": false }, { "id": "SDR-FIXED-AT-ONE-WIDTH", "scenario": "A fix works at 768 and not at 1440", "sample_input": "SYNTHETIC: the card edge is fixed at 768 only.", "expected_outcome": "fixes_verified", "expected_indicators": [ "fix_failed", "cells_still_failing_listed" ], "expected_human_escalation": false }, { "id": "SDR-NEW-PROBLEM", "scenario": "A fix creates a new overflow", "sample_input": "SYNTHETIC: a wider button now scrolls the page at 320.", "expected_outcome": "fixes_verified", "expected_indicators": [ "new_problem_listed", "record_design_findings_proposed" ], "expected_human_escalation": false } ] } }, { "slug": "example.review-request", "category": "noun.seed_hypothesis", "role": "example", "title": "Worked example: a review of a sign-up page at three widths and two themes", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.review-request" }, "instance": { "page": { "name": "Synthetic volunteer sign-up page", "address": "http://localhost:8080/signup", "build": "4f2a9c1" }, "states": [ "default" ], "widths_px": [ 320, 768, 1440 ], "themes": [ "light", "dark" ], "rules": { "min_text_px": 12, "contrast_normal": 4.5, "contrast_large": 3.0, "large_text_px": 24, "large_bold_px": 18.66, "bold_weight": 700, "spacing_unit_px": 4 }, "alignment_groups": [ { "id": "shift-cards", "edge": "left", "members": [ ".card:nth-child(1)", ".card:nth-child(2)", ".card:nth-child(3)" ] } ], "stacks": [ { "id": "email-field", "axis": "vertical", "members": [ "#email-label", "#email", "#email-help" ] } ], "supplied_screenshots": [ "fb725c4cb4ebc2bee1e02d657d26a467191bcc86b9d74852051a458200861e40" ], "person_said": "SYNTHETIC: (no text; only the screenshot)", "out_of_scope": [ "Taste calls such as color or tone, which go through taste palettes", "Real accounts or personal data", "Changing the page; fixes go through findings to fixes" ] } } }, { "slug": "example.screenshot-description", "category": "noun.seed_hypothesis", "role": "example", "title": "Worked example: a phone screenshot with no text, described before judging", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.screenshot-description" }, "instance": { "screenshot": { "sha256": "fb725c4cb4ebc2bee1e02d657d26a467191bcc86b9d74852051a458200861e40", "width_px": 1080, "height_px": 2340 }, "what_is_shown": "A sign-up form on a narrow screen in a dark theme: a title, an email field with help text, a terms link, a button and the top of a table.", "visible_text": [ "Volunteer sign-up", "Email", "We only use this to confirm your shifts.", "Read the volunteer terms", "Join the volunteer li", "Shift" ], "apparent_theme": "dark", "theme_basis": "The background's mean relative luminance is below 0.2.", "css_width": null, "likely_concerns": [ "The button label stops at 'Join the volunteer li', so it may be cut off.", "The terms link is hard to make out against the dark background.", "A broken image icon sits where a logo would be.", "The table runs past the right edge of the screen." ], "taste_reactions": [], "unknowns": [ { "item": "The width in CSS pixels", "reason": "The image is 1080 pixels wide; at an unknown device scale that could be 360 or 412 CSS pixels.", "would_resolve": "A capture at named widths with the device scale recorded." }, { "item": "The page address, build and state", "reason": "Nothing on the screenshot names them.", "would_resolve": "The review request." } ], "proposed_cells": [ "320-light", "320-dark", "768-light", "768-dark", "1440-light", "1440-dark" ] } } }, { "slug": "example.capture-plan", "category": "noun.scene_recipe", "role": "example", "title": "Worked example: six cells with repeatable settings", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.capture-plan" }, "instance": { "page": "Synthetic volunteer sign-up page", "address": "http://localhost:8080/signup", "build": "4f2a9c1", "browser": { "name": "Chromium", "pinned_by": "the pinned Playwright version" }, "viewport_height_px": 800, "device_scale_factor": 1, "settings": { "full_page": true, "animations": "disabled", "caret": "hide", "scale": "css", "reduced_motion": "reduce", "wait_for": "fonts loaded and network idle" }, "cells": [ { "id": "320-light", "width_px": 320, "theme": "light", "state": "default" }, { "id": "320-dark", "width_px": 320, "theme": "dark", "state": "default" }, { "id": "768-light", "width_px": 768, "theme": "light", "state": "default" }, { "id": "768-dark", "width_px": 768, "theme": "dark", "state": "default" }, { "id": "1440-light", "width_px": 1440, "theme": "light", "state": "default" }, { "id": "1440-dark", "width_px": 1440, "theme": "dark", "state": "default" } ] } } }, { "slug": "example.capture-set", "category": "noun.eval_run", "role": "example", "title": "Worked example: six captures before the fix", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.capture-set" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "4f2a9c1", "browser": { "name": "Chromium", "version": "synthetic stand-in" }, "captures": [ { "cell": "320-light", "status": "captured", "screenshot_sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e", "image_width_px": 320, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "c1b87978cdad69c89d4f4273c7d327b245f7080c10d976a1c39e2937a2aa94f7" }, { "cell": "320-dark", "status": "captured", "screenshot_sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1", "image_width_px": 320, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "702d4cefa7afbd157344681c658519845966d22ce85691aefb6285929e1e75c9" }, { "cell": "768-light", "status": "captured", "screenshot_sha256": "092cac370941920b93af8e2b11747f371a634c35420182cffaabac3d92bafd5d", "image_width_px": 768, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "525e0133cf82796ade41ebd0d127f47268f19587a50db9e5e5f3354d1eca1683" }, { "cell": "768-dark", "status": "captured", "screenshot_sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8", "image_width_px": 768, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "4d471d5819cbc1e919250b97562e0c09ac78db69c9985d2ccbd70a4cdeb06230" }, { "cell": "1440-light", "status": "captured", "screenshot_sha256": "95d56e3468bc2e6b0d022aaf17179211379531f1a45812b11632ad843114d546", "image_width_px": 1440, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "25bb51143018d7aeb4f27aa3a571da168d3abf22706dca72460f9729f30916b5" }, { "cell": "1440-dark", "status": "captured", "screenshot_sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5", "image_width_px": 1440, "image_height_px": 1100, "captured_at": "2026-10-30T15:12Z", "layout_facts_sha256": "8d981699e213089fecbabc889cfda4a0295a36f04f61e3973ac29c709fdb5199" } ], "note": "SYNTHETIC. No page was rendered: each screenshot digest is the SHA-256 of a stand-in string, and each layout digest is of that cell's layout facts." } } }, { "slug": "example.layout-facts", "category": "noun.eval_run", "role": "example", "title": "Worked example: the layout of six cells before the fix", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.layout-facts" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "4f2a9c1", "cells": [ { "id": "320-light", "width_px": 320, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 412, "client_width_px": 320 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 16, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 16, 72, 288, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 16, 130, 288, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 16, 158, 288, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 16, 211, 288, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 16, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 16, 281, 180, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 180, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 16, 349, 396, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 16, 553, 288, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 16, 665, 288, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 16, 777, 288, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 16, 897, 288, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "320-dark", "width_px": 320, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 412, "client_width_px": 320 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 16, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 16, 72, 288, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 16, 130, 288, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 16, 158, 288, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 16, 211, 288, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 16, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#3d5afe", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 16, 281, 180, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 180, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 16, 349, 396, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 16, 553, 288, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 16, 665, 288, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 16, 777, 288, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 16, 897, 288, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] }, { "id": "768-light", "width_px": 768, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 768, "client_width_px": 768 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 32, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 32, 72, 704, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 32, 130, 320, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 32, 158, 320, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 32, 211, 320, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 32, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 32, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 32, 349, 600, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 32, 553, 320, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 34, 665, 320, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 32, 777, 320, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 32, 897, 704, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "768-dark", "width_px": 768, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 768, "client_width_px": 768 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 32, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 32, 72, 704, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 32, 130, 320, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 32, 158, 320, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 32, 211, 320, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 32, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#3d5afe", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 32, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 32, 349, 600, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 32, 553, 320, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 34, 665, 320, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 32, 777, 320, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 32, 897, 704, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] }, { "id": "1440-light", "width_px": 1440, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 1440, "client_width_px": 1440 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 64, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 64, 72, 1312, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 64, 130, 400, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 64, 158, 400, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 64, 211, 400, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 64, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 64, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 64, 349, 800, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 64, 553, 400, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 66, 665, 400, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 64, 777, 400, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 64, 897, 1312, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "1440-dark", "width_px": 1440, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 1440, "client_width_px": 1440 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 64, 16, 120, 32 ], "loaded": false, "natural_width_px": 0 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 64, 72, 1312, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 64, 130, 400, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 64, 158, 400, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 64, 211, 400, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 64, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#3d5afe", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 64, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 64, 349, 800, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 64, 553, 400, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 66, 665, 400, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 64, 777, 400, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 64, 897, 1312, 16 ], "font_size_px": 11, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] } ] } } }, { "slug": "example.check-report", "category": "noun.eval_run", "role": "example", "title": "Worked example: 29 failing checks across all seven rules", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.design-check-report" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "4f2a9c1", "contrast_example_reproduced": true, "rules": { "min_text_px": 12, "contrast_normal": 4.5, "contrast_large": 3.0, "large_text_px": 24, "large_bold_px": 18.66, "bold_weight": 700, "spacing_unit_px": 4 }, "groups": [ { "id": "shift-cards", "edge": "left", "members": [ ".card:nth-child(1)", ".card:nth-child(2)", ".card:nth-child(3)" ] } ], "stacks": [ { "id": "email-field", "axis": "vertical", "members": [ "#email-label", "#email", "#email-help" ] } ], "counts": [ { "cell": "320-light", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "320-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "320-light", "rule": "cropping", "checked": 1, "failed": 1 }, { "cell": "320-light", "rule": "overflow", "checked": 1, "failed": 1 }, { "cell": "320-light", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "320-light", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "320-light", "rule": "broken-asset", "checked": 1, "failed": 1 }, { "cell": "320-dark", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "320-dark", "rule": "contrast", "checked": 6, "failed": 1 }, { "cell": "320-dark", "rule": "cropping", "checked": 1, "failed": 1 }, { "cell": "320-dark", "rule": "overflow", "checked": 1, "failed": 1 }, { "cell": "320-dark", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "320-dark", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "320-dark", "rule": "broken-asset", "checked": 1, "failed": 1 }, { "cell": "768-light", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "768-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "768-light", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "768-light", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "768-light", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "768-light", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "768-light", "rule": "broken-asset", "checked": 1, "failed": 1 }, { "cell": "768-dark", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "768-dark", "rule": "contrast", "checked": 6, "failed": 1 }, { "cell": "768-dark", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "768-dark", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "768-dark", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "768-dark", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "768-dark", "rule": "broken-asset", "checked": 1, "failed": 1 }, { "cell": "1440-light", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "1440-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "1440-light", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "1440-light", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "1440-light", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "1440-light", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "1440-light", "rule": "broken-asset", "checked": 1, "failed": 1 }, { "cell": "1440-dark", "rule": "text-size", "checked": 6, "failed": 1 }, { "cell": "1440-dark", "rule": "contrast", "checked": 6, "failed": 1 }, { "cell": "1440-dark", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "1440-dark", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "1440-dark", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "1440-dark", "rule": "spacing", "checked": 2, "failed": 1 }, { "cell": "1440-dark", "rule": "broken-asset", "checked": 1, "failed": 1 } ], "failures": [ { "cell": "320-light", "rule": "broken-asset", "selector": "header img.logo", "box": [ 16, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "320-light", "rule": "cropping", "selector": "#signup-submit", "box": [ 16, 281, 180, 44 ], "measured": "content 212 px wide in 180 px", "threshold": "content fits its box" }, { "cell": "320-light", "rule": "text-size", "selector": "footer p.legal", "box": [ 16, 897, 288, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "320-light", "rule": "overflow", "selector": "table.shifts", "box": [ 16, 349, 396, 180 ], "measured": "page 412 px wide at a 320 px viewport", "threshold": "no sideways scrolling" }, { "cell": "320-light", "rule": "spacing", "selector": "#email-help", "box": [ 16, 211, 288, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" }, { "cell": "320-dark", "rule": "broken-asset", "selector": "header img.logo", "box": [ 16, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "320-dark", "rule": "contrast", "selector": "a.terms-link", "box": [ 16, 245, 214, 20 ], "measured": "3.65:1", "threshold": "4.5:1" }, { "cell": "320-dark", "rule": "cropping", "selector": "#signup-submit", "box": [ 16, 281, 180, 44 ], "measured": "content 212 px wide in 180 px", "threshold": "content fits its box" }, { "cell": "320-dark", "rule": "text-size", "selector": "footer p.legal", "box": [ 16, 897, 288, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "320-dark", "rule": "overflow", "selector": "table.shifts", "box": [ 16, 349, 396, 180 ], "measured": "page 412 px wide at a 320 px viewport", "threshold": "no sideways scrolling" }, { "cell": "320-dark", "rule": "spacing", "selector": "#email-help", "box": [ 16, 211, 288, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" }, { "cell": "768-light", "rule": "broken-asset", "selector": "header img.logo", "box": [ 32, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "768-light", "rule": "text-size", "selector": "footer p.legal", "box": [ 32, 897, 704, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "768-light", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 34, 665, 320, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" }, { "cell": "768-light", "rule": "spacing", "selector": "#email-help", "box": [ 32, 211, 320, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" }, { "cell": "768-dark", "rule": "broken-asset", "selector": "header img.logo", "box": [ 32, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "768-dark", "rule": "contrast", "selector": "a.terms-link", "box": [ 32, 245, 214, 20 ], "measured": "3.65:1", "threshold": "4.5:1" }, { "cell": "768-dark", "rule": "text-size", "selector": "footer p.legal", "box": [ 32, 897, 704, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "768-dark", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 34, 665, 320, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" }, { "cell": "768-dark", "rule": "spacing", "selector": "#email-help", "box": [ 32, 211, 320, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" }, { "cell": "1440-light", "rule": "broken-asset", "selector": "header img.logo", "box": [ 64, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "1440-light", "rule": "text-size", "selector": "footer p.legal", "box": [ 64, 897, 1312, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "1440-light", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 66, 665, 400, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" }, { "cell": "1440-light", "rule": "spacing", "selector": "#email-help", "box": [ 64, 211, 400, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" }, { "cell": "1440-dark", "rule": "broken-asset", "selector": "header img.logo", "box": [ 64, 16, 120, 32 ], "measured": "not loaded, natural width 0 px", "threshold": "loaded, natural width above 0" }, { "cell": "1440-dark", "rule": "contrast", "selector": "a.terms-link", "box": [ 64, 245, 214, 20 ], "measured": "3.65:1", "threshold": "4.5:1" }, { "cell": "1440-dark", "rule": "text-size", "selector": "footer p.legal", "box": [ 64, 897, 1312, 16 ], "measured": "11 px", "threshold": "12 px" }, { "cell": "1440-dark", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 66, 665, 400, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" }, { "cell": "1440-dark", "rule": "spacing", "selector": "#email-help", "box": [ 64, 211, 400, 18 ], "measured": "gap 13 px after #email", "threshold": "multiples of 4 px" } ], "passed": false } } }, { "slug": "example.finding", "category": "noun.seed_hypothesis", "role": "example", "title": "Worked example: the dark theme contrast finding, in the findings to fixes shape", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "findings-to-fixes:template.finding" }, "instance": { "id": "SDR-1", "title": "The terms link is too faint to read on the dark background", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "Link text at least 4.5:1 against its background in every theme", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,245,214x20 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 32,245,214x20 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 64,245,214x20 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule contrast: measured 3.65:1; threshold 4.5:1", "location": "selector a.terms-link", "widths_px": [ 320, 768, 1440 ], "themes": [ "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/contrast-terms-link", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } } }, { "slug": "example.capture-set-after", "category": "noun.eval_run", "role": "example", "title": "Worked example: the same six cells captured on the fixed build", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.capture-set" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "7d3e0b8", "browser": { "name": "Chromium", "version": "synthetic stand-in" }, "captures": [ { "cell": "320-light", "status": "captured", "screenshot_sha256": "a69869b00f6ce6b8e3bb9d6e89fd6853f36e9b64a79e0bc9b4e21bfcfc5ab2ac", "image_width_px": 320, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "40d5a6c92854e32e0b927b35359abfe48837220d829737c3df24b3be0aba009b" }, { "cell": "320-dark", "status": "captured", "screenshot_sha256": "f3fdc3ab20493acfcdeae0863873bd05c645795e48de98538af148d5f24a3501", "image_width_px": 320, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "e41d912b58ef0caa86d320df710df31289835503e5beb493197bde79b0fc4d4a" }, { "cell": "768-light", "status": "captured", "screenshot_sha256": "8c7cc5de3fa9c3d9f3fab946771ee35e81d113beca80f2e942e858ae16fe26fa", "image_width_px": 768, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "4f8a5970050c50ac35153d4aa1b6160a24f1e0f5d26f958510e4f4187d1bfdde" }, { "cell": "768-dark", "status": "captured", "screenshot_sha256": "dbd1161679b3b6275f1f4551da53038119f86f57604066242a2898708cef6f1a", "image_width_px": 768, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "3b1cbcf27d6a05470004eb7ab76a59f7810b43b452bdb18afece92e1373fe926" }, { "cell": "1440-light", "status": "captured", "screenshot_sha256": "46df061e5db33709a411d14e444eea4b6952f0df1974650e125ceb9f6eae9568", "image_width_px": 1440, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "58e1b7493ce672d2de74daec445adba018fe97677350f3d8e4e9c3981018c13e" }, { "cell": "1440-dark", "status": "captured", "screenshot_sha256": "7733ea92016d7f3ca5a9956d12712669805fd0da8c6aaef5f0c7a7e82026b165", "image_width_px": 1440, "image_height_px": 1100, "captured_at": "2026-10-30T16:40Z", "layout_facts_sha256": "e52701c067ba6ed08788c06c5c021167df60d3b4c2a9d766506893920814ffe9" } ], "note": "SYNTHETIC. No page was rendered: each screenshot digest is the SHA-256 of a stand-in string, and each layout digest is of that cell's layout facts." } } }, { "slug": "example.layout-facts-after", "category": "noun.eval_run", "role": "example", "title": "Worked example: the layout of six cells after the fix", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.layout-facts" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "7d3e0b8", "cells": [ { "id": "320-light", "width_px": 320, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 320, "client_width_px": 320 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 16, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 16, 72, 288, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 16, 130, 288, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 16, 158, 288, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 16, 210, 288, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 16, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 16, 281, 180, 64 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 180, "client_width_px": 180, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 16, 369, 288, 180 ], "scroll_width_px": 396, "client_width_px": 288, "clips_overflow": false }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 16, 573, 288, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 16, 685, 288, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 16, 797, 288, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 16, 917, 288, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "320-dark", "width_px": 320, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 320, "client_width_px": 320 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 16, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 16, 72, 288, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 16, 130, 288, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 16, 158, 288, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 16, 210, 288, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 16, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#8ab4f8", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 16, 281, 180, 64 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 180, "client_width_px": 180, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 16, 369, 288, 180 ], "scroll_width_px": 396, "client_width_px": 288, "clips_overflow": false }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 16, 573, 288, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 16, 685, 288, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 16, 797, 288, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 16, 917, 288, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] }, { "id": "768-light", "width_px": 768, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 768, "client_width_px": 768 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 32, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 32, 72, 704, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 32, 130, 320, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 32, 158, 320, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 32, 210, 320, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 32, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 32, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 32, 349, 600, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 32, 553, 320, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 32, 665, 320, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 32, 777, 320, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 32, 897, 704, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "768-dark", "width_px": 768, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 768, "client_width_px": 768 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 32, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 32, 72, 704, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 32, 130, 320, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 32, 158, 320, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 32, 210, 320, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 32, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#8ab4f8", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 32, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 32, 349, 600, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 32, 553, 320, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 32, 665, 320, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 32, 777, 320, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 32, 897, 704, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] }, { "id": "1440-light", "width_px": 1440, "height_px": 800, "theme": "light", "state": "default", "document": { "scroll_width_px": 1440, "client_width_px": 1440 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 64, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 64, 72, 1312, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 64, 130, 400, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#1a1a1a", "background": "#ffffff" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 64, 158, 400, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 64, 210, 400, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#5f6368", "background": "#ffffff" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 64, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#1a56db", "background": "#ffffff" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 64, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 64, 349, 800, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 64, 553, 400, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 66, 665, 400, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 64, 777, 400, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 64, 897, 1312, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#4a4a4a", "background": "#ffffff" } ] }, { "id": "1440-dark", "width_px": 1440, "height_px": 800, "theme": "dark", "state": "default", "document": { "scroll_width_px": 1440, "client_width_px": 1440 }, "elements": [ { "id": "logo", "selector": "header img.logo", "role": "image", "box": [ 64, 16, 120, 32 ], "loaded": true, "natural_width_px": 120 }, { "id": "title", "selector": "h1", "role": "text", "box": [ 64, 72, 1312, 34 ], "font_size_px": 28, "font_weight": 700, "color": "#f2f2f2", "background": "#121212" }, { "id": "email-label", "selector": "#email-label", "role": "text", "box": [ 64, 130, 400, 20 ], "font_size_px": 14, "font_weight": 600, "color": "#f2f2f2", "background": "#121212" }, { "id": "email", "selector": "#email", "role": "control", "box": [ 64, 158, 400, 40 ] }, { "id": "email-help", "selector": "#email-help", "role": "text", "box": [ 64, 210, 400, 18 ], "font_size_px": 14, "font_weight": 400, "color": "#9aa0a6", "background": "#121212" }, { "id": "terms-link", "selector": "a.terms-link", "role": "text", "box": [ 64, 245, 214, 20 ], "font_size_px": 14, "font_weight": 400, "color": "#8ab4f8", "background": "#121212" }, { "id": "submit", "selector": "#signup-submit", "role": "control", "box": [ 64, 281, 240, 44 ], "font_size_px": 16, "font_weight": 700, "color": "#ffffff", "background": "#1f6feb", "scroll_width_px": 212, "client_width_px": 240, "clips_overflow": true }, { "id": "shifts", "selector": "table.shifts", "role": "container", "box": [ 64, 349, 800, 180 ] }, { "id": "card-1", "selector": ".card:nth-child(1)", "role": "container", "box": [ 64, 553, 400, 96 ] }, { "id": "card-2", "selector": ".card:nth-child(2)", "role": "container", "box": [ 66, 665, 400, 96 ] }, { "id": "card-3", "selector": ".card:nth-child(3)", "role": "container", "box": [ 64, 777, 400, 96 ] }, { "id": "legal", "selector": "footer p.legal", "role": "text", "box": [ 64, 897, 1312, 16 ], "font_size_px": 12, "font_weight": 400, "color": "#bdbdbd", "background": "#121212" } ] } ] } } }, { "slug": "example.check-report-after", "category": "noun.eval_run", "role": "example", "title": "Worked example: one rule still failing at 1440 after the fix", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "template.design-check-report" }, "instance": { "page": "Synthetic volunteer sign-up page", "build": "7d3e0b8", "contrast_example_reproduced": true, "rules": { "min_text_px": 12, "contrast_normal": 4.5, "contrast_large": 3.0, "large_text_px": 24, "large_bold_px": 18.66, "bold_weight": 700, "spacing_unit_px": 4 }, "groups": [ { "id": "shift-cards", "edge": "left", "members": [ ".card:nth-child(1)", ".card:nth-child(2)", ".card:nth-child(3)" ] } ], "stacks": [ { "id": "email-field", "axis": "vertical", "members": [ "#email-label", "#email", "#email-help" ] } ], "counts": [ { "cell": "320-light", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "320-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "320-light", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "320-light", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "320-light", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "320-light", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "320-light", "rule": "broken-asset", "checked": 1, "failed": 0 }, { "cell": "320-dark", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "320-dark", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "320-dark", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "320-dark", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "320-dark", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "320-dark", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "320-dark", "rule": "broken-asset", "checked": 1, "failed": 0 }, { "cell": "768-light", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "768-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "768-light", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "768-light", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "768-light", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "768-light", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "768-light", "rule": "broken-asset", "checked": 1, "failed": 0 }, { "cell": "768-dark", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "768-dark", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "768-dark", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "768-dark", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "768-dark", "rule": "alignment", "checked": 3, "failed": 0 }, { "cell": "768-dark", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "768-dark", "rule": "broken-asset", "checked": 1, "failed": 0 }, { "cell": "1440-light", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "1440-light", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "1440-light", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "1440-light", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "1440-light", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "1440-light", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "1440-light", "rule": "broken-asset", "checked": 1, "failed": 0 }, { "cell": "1440-dark", "rule": "text-size", "checked": 6, "failed": 0 }, { "cell": "1440-dark", "rule": "contrast", "checked": 6, "failed": 0 }, { "cell": "1440-dark", "rule": "cropping", "checked": 1, "failed": 0 }, { "cell": "1440-dark", "rule": "overflow", "checked": 1, "failed": 0 }, { "cell": "1440-dark", "rule": "alignment", "checked": 3, "failed": 1 }, { "cell": "1440-dark", "rule": "spacing", "checked": 2, "failed": 0 }, { "cell": "1440-dark", "rule": "broken-asset", "checked": 1, "failed": 0 } ], "failures": [ { "cell": "1440-light", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 66, 665, 400, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" }, { "cell": "1440-dark", "rule": "alignment", "selector": ".card:nth-child(2)", "box": [ 66, 665, 400, 96 ], "measured": "2 px off the group's left edge", "threshold": "0 px" } ], "passed": false } } }, { "slug": "example.verification-contrast", "category": "noun.eval_run", "role": "example", "title": "Worked example: the contrast fix verified in every dark cell", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "findings-to-fixes:template.verification" }, "instance": { "finding_ref": "finding SDR-1", "fix_ref": "fix: dark theme link color, build 7d3e0b8", "verifier": "rerender-and-verify worker, not the fixer", "distinct_from_fixer": true, "runs": [ { "version": "build 4f2a9c1", "version_kind": "unfixed", "shows_problem": true, "evidence_sha256": [ "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" ] }, { "version": "build 7d3e0b8", "version_kind": "fixed", "shows_problem": false, "evidence_sha256": [ "390c957da89ce25ffd9f2e12f51edde629e2750960cd3133d9d3060e1a882be1" ] } ], "where_checked": "local_copy", "verdict": "fix_verified", "screenshots": [ { "width_px": 320, "theme": "dark", "sha256": "f3fdc3ab20493acfcdeae0863873bd05c645795e48de98538af148d5f24a3501" }, { "width_px": 768, "theme": "dark", "sha256": "dbd1161679b3b6275f1f4551da53038119f86f57604066242a2898708cef6f1a" }, { "width_px": 1440, "theme": "dark", "sha256": "7733ea92016d7f3ca5a9956d12712669805fd0da8c6aaef5f0c7a7e82026b165" } ], "new_problems": [] } } }, { "slug": "example.verification-alignment", "category": "noun.eval_run", "role": "example", "title": "Worked example: the alignment fix failing at 1440", "synthetic": true, "value": { "notice": "SYNTHETIC. A made-up page with made-up layout numbers; no page was rendered and no person's data appears.", "conforms_to": { "$pin": "findings-to-fixes:template.verification" }, "instance": { "finding_ref": "finding SDR-5", "fix_ref": "fix: card grid left edge, build 7d3e0b8", "verifier": "rerender-and-verify worker, not the fixer", "distinct_from_fixer": true, "runs": [ { "version": "build 4f2a9c1", "version_kind": "unfixed", "shows_problem": true, "evidence_sha256": [ "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" ] }, { "version": "build 7d3e0b8", "version_kind": "fixed", "shows_problem": true, "evidence_sha256": [ "390c957da89ce25ffd9f2e12f51edde629e2750960cd3133d9d3060e1a882be1" ] } ], "where_checked": "local_copy", "verdict": "fix_failed", "screenshots": [ { "width_px": 768, "theme": "light", "sha256": "8c7cc5de3fa9c3d9f3fab946771ee35e81d113beca80f2e942e858ae16fe26fa" }, { "width_px": 768, "theme": "dark", "sha256": "dbd1161679b3b6275f1f4551da53038119f86f57604066242a2898708cef6f1a" }, { "width_px": 1440, "theme": "light", "sha256": "46df061e5db33709a411d14e444eea4b6952f0df1974650e125ceb9f6eae9568" }, { "width_px": 1440, "theme": "dark", "sha256": "7733ea92016d7f3ca5a9956d12712669805fd0da8c6aaef5f0c7a7e82026b165" } ], "new_problems": [] } } }, { "slug": "design-finding-checks", "category": "noun.benchmark_suite", "role": "worked_example", "synthetic": true, "title": "Design finding checks, with the worked example's findings and bad ones the validator recomputes", "category_reason": "A golden fixture: fixed findings and the recorded results of every check.", "value": { "fixture_kind": "finding_checks", "purpose": "Deterministic checks every finding this pack records passes on top of the findings to fixes record checks, each shown failing on a bad finding for exactly its own reason. The seven good findings are the worked example's.", "deterministic_checks": [ { "id": "kind-design-flaw", "rule": { "rule": "enum", "path": "kind", "values": [ "design_flaw" ] }, "why": "A broken design rule is a design flaw in the findings to fixes pack's terms." }, { "id": "screenshot-evidence", "rule": { "rule": "pattern_present", "path": "evidence", "pattern": "^screenshot$" }, "why": "A visual finding comes with the screenshots it was seen in." }, { "id": "located", "rule": { "rule": "pattern_present", "path": "evidence", "pattern": "^cell [0-9]{3,4}-(light|dark|high_contrast); box [0-9]+,[0-9]+,[0-9]+x[0-9]+ css px$" }, "why": "Each screenshot names its capture cell and the element's box in CSS pixels." }, { "id": "measured", "rule": { "rule": "pattern_present", "path": "evidence", "pattern": "^rule (text-size|contrast|cropping|overflow|alignment|spacing|broken-asset): measured [^;]+; threshold [^;]+$" }, "why": "The finding states the rule, what was measured and the threshold." }, { "id": "evidence-complete", "rule": { "rule": "each_has", "path": "evidence", "fields": [ "kind", "detail", "location", "widths_px", "themes", "sha256" ], "min": 2 }, "why": "Every piece of evidence names where it was seen, at which widths and themes, and its digest." }, { "id": "fingerprint-names-the-rule", "rule": { "rule": "pattern_present", "path": "fingerprint", "pattern": "^design_flaw/[a-z0-9-]+/(text-size|contrast|cropping|overflow|alignment|spacing|broken-asset)-[a-z0-9-]+$" }, "why": "Duplicates fold together by page, rule and element." }, { "id": "open-when-recorded", "rule": { "rule": "enum", "path": "status", "values": [ "open" ] }, "why": "A newly recorded finding is open; only triage and close move it on." }, { "id": "no-taste-words", "rule": { "rule": "pattern_absent", "path": "title", "pattern": "(?i)\\b(ugly|bland|boring|dated|cluttered|looks (bad|off|wrong|cheap)|not pretty|(do not|don't) like)\\b" }, "why": "A matter of taste is a palette brief, not a finding." }, { "id": "no-personal-data", "rule": { "rule": "enum", "path": "sensitivity", "values": [ "none" ] }, "why": "Captures use synthetic or test data only; a screenshot that shows personal data is never recorded." }, { "id": "fix-verb-proposed", "rule": { "rule": "pattern_present", "path": "work", "pattern": "^propose-fix$" }, "why": "Every finding carries its proposed fix verb." } ], "golden_fixtures": [ { "id": "good-sdr-1", "label": "known_good", "finding": { "id": "SDR-1", "title": "The terms link is too faint to read on the dark background", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "Link text at least 4.5:1 against its background in every theme", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,245,214x20 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 32,245,214x20 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 64,245,214x20 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule contrast: measured 3.65:1; threshold 4.5:1", "location": "selector a.terms-link", "widths_px": [ 320, 768, 1440 ], "themes": [ "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/contrast-terms-link", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-2", "label": "known_good", "finding": { "id": "SDR-2", "title": "The legal note is set smaller than the smallest allowed text", "kind": "design_flaw", "severity": "P3", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "No text smaller than 12 CSS px", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,897,288x16 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,897,288x16 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "screenshot", "detail": "Capture 768-light before the fix", "location": "cell 768-light; box 32,897,704x16 css px", "widths_px": [ 768 ], "themes": [ "light" ], "sha256": "092cac370941920b93af8e2b11747f371a634c35420182cffaabac3d92bafd5d" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 32,897,704x16 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-light before the fix", "location": "cell 1440-light; box 64,897,1312x16 css px", "widths_px": [ 1440 ], "themes": [ "light" ], "sha256": "95d56e3468bc2e6b0d022aaf17179211379531f1a45812b11632ad843114d546" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 64,897,1312x16 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule text-size: measured 11 px; threshold 12 px", "location": "selector footer p.legal", "widths_px": [ 320, 768, 1440 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/text-size-legal-note", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-3", "label": "known_good", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-4", "label": "known_good", "finding": { "id": "SDR-4", "title": "The shifts table makes the page scroll sideways at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "No sideways scrolling at 320 CSS px", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,349,396x180 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,349,396x180 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule overflow: measured page 412 px wide at a 320 px viewport; threshold no sideways scrolling", "location": "selector table.shifts", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/overflow-shifts-table", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-5", "label": "known_good", "finding": { "id": "SDR-5", "title": "The second shift card sits off the left edge of the others", "kind": "design_flaw", "severity": "P3", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "Every card on the same left edge", "evidence": [ { "kind": "screenshot", "detail": "Capture 768-light before the fix", "location": "cell 768-light; box 34,665,320x96 css px", "widths_px": [ 768 ], "themes": [ "light" ], "sha256": "092cac370941920b93af8e2b11747f371a634c35420182cffaabac3d92bafd5d" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 34,665,320x96 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-light before the fix", "location": "cell 1440-light; box 66,665,400x96 css px", "widths_px": [ 1440 ], "themes": [ "light" ], "sha256": "95d56e3468bc2e6b0d022aaf17179211379531f1a45812b11632ad843114d546" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 66,665,400x96 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule alignment: measured 2 px off the group's left edge; threshold 0 px", "location": "selector .card:nth-child(2)", "widths_px": [ 768, 1440 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/alignment-second-card", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-6", "label": "known_good", "finding": { "id": "SDR-6", "title": "The gap above the email help text is off the 4 px spacing scale", "kind": "design_flaw", "severity": "P3", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "Gaps in the email field on the 4 px scale", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,211,288x18 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,211,288x18 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "screenshot", "detail": "Capture 768-light before the fix", "location": "cell 768-light; box 32,211,320x18 css px", "widths_px": [ 768 ], "themes": [ "light" ], "sha256": "092cac370941920b93af8e2b11747f371a634c35420182cffaabac3d92bafd5d" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 32,211,320x18 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-light before the fix", "location": "cell 1440-light; box 64,211,400x18 css px", "widths_px": [ 1440 ], "themes": [ "light" ], "sha256": "95d56e3468bc2e6b0d022aaf17179211379531f1a45812b11632ad843114d546" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 64,211,400x18 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule spacing: measured gap 13 px after #email; threshold multiples of 4 px", "location": "selector #email-help", "widths_px": [ 320, 768, 1440 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/spacing-email-help-gap", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "good-sdr-7", "label": "known_good", "finding": { "id": "SDR-7", "title": "The header logo does not load", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The logo image loads", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,16,120x32 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,16,120x32 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "screenshot", "detail": "Capture 768-light before the fix", "location": "cell 768-light; box 32,16,120x32 css px", "widths_px": [ 768 ], "themes": [ "light" ], "sha256": "092cac370941920b93af8e2b11747f371a634c35420182cffaabac3d92bafd5d" }, { "kind": "screenshot", "detail": "Capture 768-dark before the fix", "location": "cell 768-dark; box 32,16,120x32 css px", "widths_px": [ 768 ], "themes": [ "dark" ], "sha256": "db5d5110af53fbd54853a3481f6714f6d40bd31664298fbfbf2423acfe43cbe8" }, { "kind": "screenshot", "detail": "Capture 1440-light before the fix", "location": "cell 1440-light; box 64,16,120x32 css px", "widths_px": [ 1440 ], "themes": [ "light" ], "sha256": "95d56e3468bc2e6b0d022aaf17179211379531f1a45812b11632ad843114d546" }, { "kind": "screenshot", "detail": "Capture 1440-dark before the fix", "location": "cell 1440-dark; box 64,16,120x32 css px", "widths_px": [ 1440 ], "themes": [ "dark" ], "sha256": "2dce8dfd23377c93365a9e7ca22b45e8a37afe7b2116e17ce091cdf8385f99b5" }, { "kind": "measurement", "detail": "rule broken-asset: measured not loaded, natural width 0 px; threshold loaded, natural width above 0", "location": "selector header img.logo", "widths_px": [ 320, 768, 1440 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/broken-asset-header-logo", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-kind", "label": "known_bad", "fails": "kind-design-flaw", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "error", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-no-screenshot", "label": "known_bad", "fails": "screenshot-evidence", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "measurement", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "measurement", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-unlocated", "label": "known_bad", "fails": "located", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "the button on the phone", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "the button on the phone", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-unmeasured", "label": "known_bad", "fails": "measured", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "The label is cut off.", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-no-digest", "label": "known_bad", "fails": "evidence-complete", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ] }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-fingerprint", "label": "known_bad", "fails": "fingerprint-names-the-rule", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/button-problem", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-not-open", "label": "known_bad", "fails": "open-when-recorded", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "in_progress", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-taste", "label": "known_bad", "fails": "no-taste-words", "finding": { "id": "SDR-3", "title": "The sign-up button looks bad on phones", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-personal-data", "label": "known_bad", "fails": "no-personal-data", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "personal_data", "public": false, "work": [ { "verb": "triage", "state": "pending" }, { "verb": "propose-fix", "state": "pending" } ] } }, { "id": "bad-no-fix-verb", "label": "known_bad", "fails": "fix-verb-proposed", "finding": { "id": "SDR-3", "title": "The sign-up button cuts off its own label at 320 px", "kind": "design_flaw", "severity": "P2", "where": "Synthetic volunteer sign-up page, build 4f2a9c1, default state", "expected": "The whole label shows inside the button", "evidence": [ { "kind": "screenshot", "detail": "Capture 320-light before the fix", "location": "cell 320-light; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "light" ], "sha256": "12b31a39944fa38e36282d73282fa33e7108fa35da0152850e544d7509d2787e" }, { "kind": "screenshot", "detail": "Capture 320-dark before the fix", "location": "cell 320-dark; box 16,281,180x44 css px", "widths_px": [ 320 ], "themes": [ "dark" ], "sha256": "7d652e6edda61b8b2d49da704df4d19e9bfe5ad949c53cbcfb628fde5c5f18f1" }, { "kind": "measurement", "detail": "rule cropping: measured content 212 px wide in 180 px; threshold content fits its box", "location": "selector #signup-submit", "widths_px": [ 320 ], "themes": [ "light", "dark" ], "sha256": "3ab5befb91d07f9250a35e1b33ad083c5e8bdbe457f692d8465bd55fb2d935c1" } ], "noticed_by": "check-design-rules worker", "noticed_at": "2026-10-30T15:20Z", "fingerprint": "design_flaw/signup-page/cropping-submit-label", "status": "open", "sensitivity": "none", "public": false, "work": [ { "verb": "triage", "state": "pending" } ] } } ], "expected": { "good-sdr-1": { "verdict": "pass", "failed_checks": [] }, "good-sdr-2": { "verdict": "pass", "failed_checks": [] }, "good-sdr-3": { "verdict": "pass", "failed_checks": [] }, "good-sdr-4": { "verdict": "pass", "failed_checks": [] }, "good-sdr-5": { "verdict": "pass", "failed_checks": [] }, "good-sdr-6": { "verdict": "pass", "failed_checks": [] }, "good-sdr-7": { "verdict": "pass", "failed_checks": [] }, "bad-kind": { "verdict": "fail", "failed_checks": [ "kind-design-flaw" ] }, "bad-no-screenshot": { "verdict": "fail", "failed_checks": [ "screenshot-evidence" ] }, "bad-unlocated": { "verdict": "fail", "failed_checks": [ "located" ] }, "bad-unmeasured": { "verdict": "fail", "failed_checks": [ "measured" ] }, "bad-no-digest": { "verdict": "fail", "failed_checks": [ "evidence-complete" ] }, "bad-fingerprint": { "verdict": "fail", "failed_checks": [ "fingerprint-names-the-rule" ] }, "bad-not-open": { "verdict": "fail", "failed_checks": [ "open-when-recorded" ] }, "bad-taste": { "verdict": "fail", "failed_checks": [ "no-taste-words" ] }, "bad-personal-data": { "verdict": "fail", "failed_checks": [ "no-personal-data" ] }, "bad-no-fix-verb": { "verdict": "fail", "failed_checks": [ "fix-verb-proposed" ] } } } } ], "verbs": [ { "slug": "describe-screenshot", "kind": "verb.situate", "title": "Describe what a screenshot shows, before judging it", "claimant": "agent", "summary": "Describe a screenshot sent with little or no text: what page and state it seems to show, the visible text exactly, the apparent theme and how it was told, what cannot be known from it, the likely concerns as observations, and the capture cells that would measure them.", "outcome": "A screenshot description; no finding yet.", "ready_outcome": "screenshot_described", "pinned": [ "guardrail.describe-before-judging", "policy-and-law-watch:guardrail.no-personal-data", "capture-matrix" ], "slots": [ { "name": "screenshots", "category": "noun.eval_run", "many": true, "max": 20, "description": "Pins of the nouns holding the screenshots the person sent, stored by SHA-256." }, { "name": "review_request", "category": "noun.seed_hypothesis", "description": "Pin of the review request, if one exists.", "required": false } ], "produces": [ { "name": "screenshot_description", "template": "template.screenshot-description" } ], "steps": [ "Say what is visible before saying what is wrong, and transcribe visible text exactly, cut-off words included.", "Mark the width in CSS pixels, the device scale, the address, the build and the state unknown unless the screenshot shows them.", "Stop with blocked when the screenshot shows personal data, and ask for a capture with a synthetic account.", "Keep concerns as observations and propose plan-captures; a reaction of taste goes in taste_reactions, for a palette brief." ], "acceptance": [ { "id": "matches-template", "check": "The output validates against template.screenshot-description's schema.", "method": "deterministic" }, { "id": "unknowns-listed", "check": "css_width is null with an unknown unless the screenshot states the width.", "method": "deterministic" }, { "id": "cells-proposed", "check": "proposed_cells covers every default width with every default theme.", "method": "deterministic" }, { "id": "faithful", "check": "The description says only what the screenshot shows.", "method": "judgment" } ] }, { "slug": "plan-captures", "kind": "verb.decompose_dag", "title": "Plan every capture cell and its settings", "claimant": "agent", "summary": "Turn the review request into a capture plan: every width with every theme and state, the pinned browser, the viewport and device scale, and the settings that make captures repeatable.", "outcome": "A capture plan.", "ready_outcome": "captures_planned", "pinned": [ "capture-matrix", "video-motion:tool.playwright" ], "slots": [ { "name": "review_request", "category": "noun.seed_hypothesis", "description": "Pin of the review request." }, { "name": "screenshot_description", "category": "noun.seed_hypothesis", "required": false, "description": "Pin of the screenshot description, if the review started from one." } ], "produces": [ { "name": "capture_plan", "template": "template.capture-plan" } ], "steps": [ "List every width with every theme and every state the request names, once each.", "Use the capture matrix's settings unless the request names others, and say why when it does." ], "acceptance": [ { "id": "matches-template", "check": "The output validates against template.capture-plan's schema.", "method": "deterministic" }, { "id": "every-cell", "check": "cells holds each requested width, theme and state exactly once.", "method": "deterministic" } ], "follows": [ "screenshot-design-review.describe-screenshot" ] }, { "slug": "capture-screens", "kind": "verb.compile_dag", "title": "Capture every cell's screenshot and layout", "claimant": "agent", "model_use": "none", "summary": "Render the page once per cell of the capture plan with the pinned browser, take a full-page screenshot, collect the cell's layout facts from the same render, and store both by SHA-256.", "outcome": "A capture set and the layout facts of every cell.", "ready_outcome": "captures_taken", "pinned": [ "capture-matrix", "video-motion:tool.playwright", "video-motion:tool.chromium", "policy-and-law-watch:guardrail.no-personal-data" ], "slots": [ { "name": "capture_plan", "category": "noun.scene_recipe", "description": "Pin of the capture plan." }, { "name": "review_request", "category": "noun.seed_hypothesis", "description": "Pin of the review request." } ], "network": [ "read_only", "Only the page address the capture plan names, a local build or a test page with synthetic data, read without signing in; no other hosts, and browser downloads only under the worker's own policy." ], "produces": [ { "name": "capture_set", "template": "template.capture-set" }, { "name": "layout_facts", "template": "template.layout-facts" } ], "steps": [ "Capture every cell with the plan's settings; record a failed cell with its reason.", "Collect layout facts from the same render as the screenshot, never from another load.", "Stop with blocked when a page shows personal data or needs a real account." ], "acceptance": [ { "id": "matches-template", "check": "The output validates against template.capture-set's schema.", "method": "deterministic" }, { "id": "every-cell", "check": "Every plan cell appears once in the capture set and once in the layout facts.", "method": "deterministic" }, { "id": "digests-match", "check": "Each capture's layout_facts_sha256 is the digest of that cell's layout facts.", "method": "deterministic" } ], "bounds": { "max_elapsed_seconds": 1800 }, "follows": [ "screenshot-design-review.plan-captures" ] }, { "slug": "check-design-rules", "kind": "verb.verify_gate", "title": "Measure every design rule in every cell", "claimant": "agent", "model_use": "none", "summary": "Reproduce the contrast example, then apply the seven design rules (text size, contrast, cropping, overflow, alignment, spacing and broken assets) to every cell's layout facts, recording each check's measurement and threshold.", "outcome": "A design check report.", "ready_outcome": "rules_checked", "pinned": [ "design-rules", "visual-rendering:example.contrast" ], "slots": [ { "name": "layout_facts", "category": "noun.eval_run", "description": "Pin of the layout facts." }, { "name": "capture_set", "category": "noun.eval_run", "description": "Pin of the capture set." }, { "name": "review_request", "category": "noun.seed_hypothesis", "description": "Pin of the review request." } ], "produces": [ { "name": "check_report", "template": "template.design-check-report" } ], "steps": [ "Reproduce the contrast example's expected ratios first; stop with blocked if they differ.", "Apply every rule to every cell with the request's thresholds, groups and stacks; never guess a group from the picture.", "Set passed only when no check fails in any cell." ], "acceptance": [ { "id": "matches-template", "check": "The output validates against template.design-check-report's schema.", "method": "deterministic" }, { "id": "every-cell-and-rule", "check": "Every cell and rule appears once in counts.", "method": "deterministic" }, { "id": "recomputed", "check": "Recomputing the rules from the pinned layout facts reproduces the report exactly.", "method": "deterministic" } ], "follows": [ "screenshot-design-review.capture-screens" ] }, { "slug": "record-design-findings", "kind": "verb.problemize", "title": "Record each failing rule as a located finding", "claimant": "agent", "summary": "Record one finding per rule and element that failed, in the findings to fixes shape, with a screenshot for each cell it failed in, the element's box and the measurement, and propose a fix verb for each; a matter of taste becomes a palette brief instead.", "outcome": "Design findings, each with its proposed fix verb.", "ready_outcome": "findings_recorded", "pinned": [ "guardrail.locate-every-finding", "design-finding-checks", "findings-to-fixes:evidence-checklist", "findings-to-fixes:kind-definitions", "findings-to-fixes:record-checks" ], "slots": [ { "name": "check_report", "category": "noun.eval_run", "description": "Pin of the design check report." }, { "name": "capture_set", "category": "noun.eval_run", "description": "Pin of the capture set." }, { "name": "review_request", "category": "noun.seed_hypothesis", "description": "Pin of the review request." }, { "name": "screenshot_description", "category": "noun.seed_hypothesis", "required": false, "description": "Pin of the screenshot description, if the review started from one." } ], "produces": [ { "name": "finding", "template": "findings-to-fixes:template.finding", "max": 40 }, { "name": "palette_brief", "template": "taste-palettes:template.brief", "max": 3 } ], "steps": [ "Group failures by rule and element; record one open finding for each group, naming every cell it failed in.", "Give each finding a screenshot item per cell with its box, and one measurement item with the rule, measurement and threshold.", "Propose findings-to-fixes.triage and then findings-to-fixes.propose-fix for each finding, and list both in its work as pending.", "Turn a taste reaction into a palette brief, never a finding; run both sets of record checks before submitting." ], "acceptance": [ { "id": "findings-match-template", "check": "Every finding validates against template.finding's schema.", "method": "deterministic" }, { "id": "record-checks-pass", "check": "Every finding passes the findings to fixes record checks and the design finding checks.", "method": "deterministic" }, { "id": "every-failure-recorded", "check": "Every failure in the check report belongs to exactly one finding.", "method": "deterministic" } ], "ready_requires": [ "proposed_verbs" ], "follows": [ "screenshot-design-review.check-design-rules" ] }, { "slug": "rerender-and-verify", "kind": "verb.verify_gate", "title": "Re-render every cell and verify each fix (a different worker)", "claimant": "agent", "model_use": "none", "review": "distinct_reviewer", "summary": "A worker who wrote neither the fix nor its proposal re-renders every cell of the original capture plan on the fixed build, reruns every design check, and writes one verification per finding: fixed only when every cell it failed in now passes.", "outcome": "The fixed build's captures, layout and checks, and a verification for every finding.", "ready_outcome": "fixes_verified", "pinned": [ "guardrail.same-matrix-after-a-fix", "capture-matrix", "design-rules", "visual-rendering:example.contrast", "video-motion:tool.playwright" ], "slots": [ { "name": "findings", "category": "noun.seed_hypothesis", "many": true, "max": 40, "description": "Pins of the findings the fix addresses." }, { "name": "fix", "category": "noun.code_node", "description": "Pin of the fix, from the findings to fixes pack's fix verb." }, { "name": "capture_plan", "category": "noun.scene_recipe", "description": "Pin of the capture plan." }, { "name": "check_report", "category": "noun.eval_run", "description": "Pin of the design check report from before the fix." } ], "network": [ "read_only", "Only the page address the capture plan names, a local build or a test page with synthetic data, read without signing in; no other hosts, and browser downloads only under the worker's own policy." ], "produces": [ { "name": "capture_set", "template": "template.capture-set" }, { "name": "layout_facts", "template": "template.layout-facts" }, { "name": "check_report", "template": "template.design-check-report" }, { "name": "verification", "template": "findings-to-fixes:template.verification", "max": 40 } ], "steps": [ "Confirm you wrote neither the fix nor its proposal; otherwise end blocked.", "Re-render every cell of the original plan on the fixed build and rerun every check, not only the finding's cells.", "Write fix_verified only when every cell a finding failed in now passes, and fix_failed when any still fails.", "Propose record-design-findings for any new failure in any cell; never fix it inside this verb." ], "acceptance": [ { "id": "matches-template", "check": "The output validates against template.design-check-report's schema.", "method": "deterministic" }, { "id": "same-matrix", "check": "The new capture set holds exactly the original plan's cells.", "method": "deterministic" }, { "id": "verdicts-follow", "check": "Each verdict follows from the before and after failures of its finding's cells.", "method": "deterministic" }, { "id": "distinct-verifier", "check": "The verifying key differs from the keys that wrote the fix and its proposal.", "method": "deterministic" } ], "bounds": { "max_elapsed_seconds": 1800 }, "follows": [ "findings-to-fixes.fix" ] } ] }