Dimensional drawing

Draw one subject the way Apple's accessory dimensional drawings do (developer.apple.com/accessories/dimensional-drawings): everything on one sheet, notes top-left, views spread across the sheet with smaller detail views, tables beside the views that use them. Output is one self-contained HTML file (on claude.ai, publish it as an Artifact). Worked examples: examples/dialog-sheet.html and examples/card-sheet.html next to this file, copy their drawing kit instead of starting from zero.

House rules

1. Monochrome. Black line on white paper, grays only. No accent color anywhere. Tell things apart by line weight, dash pattern, hatch and light gray fill. Single light theme by design (color-scheme: light, every color explicit).
2. Architecture, not content. For UI, draw slots, never real copy: lead box with an X, TITLE SLOT · FLEX, TRAIL / ACTION (hug), CONTENT SLOT · FILL, META SLOT · FLEX · WRAPS, LABEL SLOT, VALUE SLOT. No text-width dimensions. Size words: HUG (sized by content), FLEX (takes remaining space), FILL (parent width).
3. Variables, not numbers. Every dimension on the drawing is a code; tables give code, variable name, value. Derived values are formulas with the result: H1 header-min = 2·S1+H3 = 64, R2 r-inner = R1−B−S6 = 11, E1 = BL+SP−Y, E2 = BL+SP, E3 = BL+SP+Y.
4. Unbranded. No product or company names, logos or wordmarks in the drawing, title block or footer unless the user asks. Use neutral names (UI-CARD-001, "UI component reference").
5. Never invent values. Anything not in the source is [TBD] (e.g. viewport margin, overflow behavior, unpublished physical dims) and is drawn as a proportional schematic.

Code system