Conventions · applies to every screen
How to read these wireframes
Every panel in this deck uses the same conventions. Numbered evergreen markers inside a frame point to the annotation legend directly beneath it.
1 Numbered callout
An evergreen numbered marker sits beside the region it describes. The matching legend is directly under the frame, same numbers, same order.
Grey bar = placeholder text. Width and weight suggest emphasis; words inside bars are real copy where the wording matters.
Image · map · document
Crossed box = imagery or a rendered region (map tiles, scans, photos). Never a designed picture.
Control vocabulary
Primary actionSecondary+ AddDisabled
Text inputDropdownSearch…
Status · word always shownSelected / active
Filter chip✕ removablemeta tagstub · coming soon
Frame caption
Every frame’s dark caption bar names the screen, its route, and the Vue component that implements it. A dashed note strip under the caption carries context the reviewers need before looking.