A lo-fi design system for UX wireframes and annotations
Design System v1.0A deliberately restrained palette of greys for wireframe structure, with annotation colors reserved for callouts and interactive markers.
Wireframe Greys
White
#FFFFFF
Grey 100
#F0F1F3
Grey 200
#E2E4E8
Grey 400
#9EA4AD
Grey 600
#4A5060
Grey 800
#21252D
Annotation Colors
Red Marker
#E74C3C
Blue Marker
#3B82F6
Green Marker
#22C55E
Orange Marker
#F59E0B
Sticky Note
#FFF740
Inter provides clean, readable content. Architects Daughter adds that handwritten annotation feel for labels and callouts.
Page Title
Section Header
Component Title
Card Heading
Label Heading
Meta Heading
The quick brown fox jumps over the lazy dog. This text represents the standard body copy used throughout wireframes to indicate content areas and reading blocks.
This is the annotation style -- used for sticky notes, callouts, and design comments throughout the wireframe.
A 4px base unit scale from tight micro-spacing to generous section padding. Blue dashed boxes show the actual space.
Four button tiers for wireframe prototyping. Solid borders for primary actions, dashed for secondary, dotted for ghost states.
Wireframe form components with clear labels and annotation-style placeholders. Blue focus ring indicates the active field.
Checkboxes
Radio Buttons
Four card variants for wireframe layouts: standard box, annotated, blueprint, and sticky note. Each serves a different documentation purpose.
Dashed border indicates a generic content container in the wireframe layout.
Red dashed border signals a component that has designer annotations or review notes.
Blue outline for finalized components that are ready for development handoff.
We should revisit the navigation pattern after usability testing. Users struggled with the hamburger menu on tablet.
A clean wireframe table with dotted row separators. Headers use uppercase labels following the annotation convention.
| Screen | Status | Fidelity | Last Updated | Owner |
|---|---|---|---|---|
| Homepage | Approved | Hi-fi | 2026-01-15 | Sarah K. |
| Dashboard | In Review | Mid-fi | 2026-01-28 | James L. |
| Settings | In Progress | Lo-fi | 2026-02-01 | Maria C. |
| Onboarding | Blocked | Lo-fi | 2026-01-20 | Alex T. |
| Profile | Not Started | -- | -- | Unassigned |
Status indicators and labels using the annotation color system. Solid borders for defined states, dashed for provisional ones.
Four alert types using annotation colors and dashed borders. The wireframe style keeps them distinct from production alert components.
Information
This wireframe is for internal review only. Share feedback using annotation comments.
Approved
This screen has been approved by stakeholders and is ready for high-fidelity design.
Needs Review
The navigation pattern has changed since the last review cycle. Please verify with the UX lead.
Blocked
This flow is blocked by missing API specifications. Contact the backend team for endpoint details.
The rules that guide this wireframe design system and keep lo-fi prototypes honest.
Low fidelity is a feature, not a limitation. Grey blocks, dashed borders, and placeholder text prevent premature fixation on visual polish.
Wireframes communicate layout, hierarchy, and flow. Color is reserved for annotations, not decoration. Let the grey do the talking.
Every design decision deserves explanation. Sticky notes, red arrows, and inline comments make wireframes self-documenting for the whole team.
Wireframes should be quick to create and easy to discard. If you are precious about a wireframe, you are working at the wrong fidelity level.