# Greybox Fidelity Reference

> Adapted from open-design `design-templates/wireframe-greybox/SKILL.md` and `example.html` under Apache-2.0; modified for SDTK self-contained CSP, system-font rendering, manifest output paths, brief-sourced content, and `data-sdtk-id` anchors.

The required license copy is distributed beside this file as `open-design-Apache-2.0.txt`.

Use this reference only for an explicit greybox, blueprint, or lo-fi HTML wireframe request handled by `design-prototype`. The normal high-fidelity prototype path remains the default.

## Fidelity contract

- Communicate structure before visual polish: hierarchy, regions, density, actions, and states.
- Use neutral grey blocks, crisp 1–2px borders, text bars, and X-crossed image placeholders.
- Reserve exactly one annotation accent for redlines or structural notes.
- Use project facts and brief-sourced labels where they are known. Keep unknown factual values as honest `NEEDS_*` markers.
- Ignore brand color and decorative effects for this optional fidelity path; do not mutate `DESIGN_SYSTEM.md` or `DESIGN_TOKENS.json`.
- Write each result to the manifest entry `outPath` as one complete standalone HTML document.

## Self-contained and CSP rules

- Keep all CSS and SVG inline.
- Use `system-ui`, platform sans-serif fallbacks, and `ui-monospace`; do not request web fonts.
- Do not emit `<link>`, `@import`, remote URLs, external images, external JavaScript, or font files.
- Draw charts, icons, hatching, and image placeholders with CSS or inline SVG.
- Keep stable structural anchors as `data-sdtk-id` so Preview Studio feedback can target them.

## Composition workflow

1. Read the manifest, design system, tokens, screen brief, designer charter, and craft rules as usual.
2. Select regions from the actual screen role. Do not force a dashboard when the brief describes a form, landing page, detail view, or flow step.
3. Translate real regions into greybox primitives:
   - navigation or command areas → bar placeholders and active structural blocks;
   - metrics → label bars plus number blocks;
   - media → bordered boxes with a diagonal X;
   - charts → inline SVG axes plus schematic bars or lines;
   - lists or tables → repeated rows sized from the brief;
   - states → distinct loading, empty, error, and populated structural panels.
4. Add at most two terse monospace annotations that explain layout constraints, not invented product facts.
5. Add one responsive breakpoint that preserves reading order and visible primary action.
6. Verify the output against the checklist before reporting completion.

## Checklist

- The page is visibly lo-fi at thumbnail size and does not look like finished branded UI.
- Every major brief region is represented; no sample composition replaced screen-specific structure.
- All known actions and states remain recognizable.
- Text bars and placeholders do not invent customer copy or metrics.
- Image placeholders have a visible diagonal X.
- The annotation accent appears only on annotations or structural callouts.
- The document contains doctype, head, title, body, one h1, semantic landmarks, inline CSS, and no network dependency.
- The high-fidelity path and the Markdown `sdtk-design wireframe` command remain unchanged.

## Adapted example

Read `references/wireframe-greybox-example.html` only to understand the fidelity vocabulary and CSP-safe implementation. Do not copy its composition into generated screens and do not hash-match it.