new-ui-mock

# New UI mock For work with **no reference screenshot to copy**. If there is one, use `clone-prototype` instead. Measurement beats invention every time. Everything renders on the canvas from `mockups/canvases/<slug>/`; see `prototype-canvas` for running it and `mockups/canvases/README.md` for the folder and `layout.json` rules. --- ## 1. Find the tokens before you design Never invent a palette when the product already has one. - **Extending an existing board?** Reuse its `00-design-tokens.html` block verbatim. Copy it byte-identically into the new file; a sandboxed iframe has no shared stylesheet. - **Cloning a real app's look?** Stop and run `clone-prototype` Phase 1 and Phase 2 first; come back with a measured token block. - **Genuinely new product, nothing to measure?** Copy `mockups/canvases/templates/`, change `NAME` and the prefix, and pick deliberately: platform-native stack, a neutral ramp, one accent, one danger. Keep the evidence table and write *why* in it ("iOS system blue", "brand hex from the logo"). An unexplained hex is a future bug. A new token is a decision, not a convenience. If a screen needs a colour or a size that is not in the block, either it belongs in the block (add it there, in every file) or the screen is wrong. --- ## 2. Ground the content Readers take the copy, numbers and states in a mockup as product decisions. - Take strings from the real source when it exists: localization files, existing screens, the spec. Never fr...