Composition
Doc Head
Every wireframe page opens with the same doc head. The Wireframe badge is always present. It identifies the file type. A status badge sits next to it to show where the page is in the review cycle.
Full doc head
Wireframe
In Progress
Page Name
Lives at the top of every wireframe page. The structure is fixed; only the badges, title, and meta values change per page.
Status badges
Wireframe
.badge
File-type badge. Always present, outlined ink. Identifies the file as a wireframe at a glance.
Not Started
.badge.not-started
Mute fill. Page exists in the index but hasn't been built yet.
In Progress
.badge.in-progress
Accent-3 (purple) fill. Active work, not yet ready for review.
Pending Approval
.badge.pending-approval
Accent (blue) fill. Sent to the client or team for review.
Approved
.badge.approved
Accent-2 (green) fill. Locked. Ready to hand off to the design phase.
Removed
.badge.removed
Red fill. Page was cut from the project. Kept in the index for traceability.
Always pair the Wireframe badge with a status badge. The status mirrors the tag shown next to the page tile on index.html. Change both at the same time.
Logo mark
Standard
[Client Name]
Mark only
.logo → .mark (24px circle, 2px border) + wordmark. Replace the circle with the client's actual mark in the design phase. Don't reach for a real brand asset inside a wireframe.
Meta row pieces
Each meta item is a <span> with a bold <b> label inside. Add, remove, or reorder items as the project needs. The spacing and type styling stay consistent because everything is in .doc-head .meta.