nav-bar

Logo plate left, three text links, one boxed action. The boxed CTA is the reference wireframe's own device: it marks the single most important click on the page without using colour to do it.

hero-centered

Centred headline, one supporting line, one action. Deliberately the sparest hero in the catalog, so a client reviewing structure argues about the message rather than the photograph.

hero-split

Headline and two actions left, a large image slot right. The alternative to pattern 02 when the page has to show the thing it sells above the fold.

inner-banner

Page title and breadcrumb on the dark ground. Every page that is not the homepage opens with this, which is what stops a wireframe set from implying every page is a landing page.

services-3up

Three tiles, each an image slot over a heading and two copy bars. The reference wireframe's core row. Collapses to one column on a phone rather than shrinking to three unreadable columns.

services-list

Stacked rows, small icon slot beside each. The pattern for a business with eleven services rather than three, where a tile grid would run to four rows and stop being scannable.

split-image-left

Image slot left, heading and copy bars right. One of the two asymmetric rows in the reference wireframe, and the workhorse of any middle of page narrative.

split-copy-right

Copy left, a small square slot right. The mirror of pattern 07 at a lighter weight, for a supporting point that does not deserve a full width image.

features-alt

Two or more rows that alternate which side the image sits on. Patterns 07 and 08 repeated deliberately, so a long explanatory page has rhythm instead of four identical rows.

stats-row

Four figures on the dark ground. The numbers here are visibly fake on purpose. A wireframe that shows a plausible number invites the client to discuss the number instead of the layout.

process-steps

Four numbered steps across. The numbers are the hierarchy, so no accent colour and no connecting line are needed to make the sequence read.

testimonial-single

One quote at large size with a portrait circle and two attribution lines. The uncrossed circle is the wireframe convention for a person, which is why it is the one rounded shape in the kit.

testimonials-3up

Three quote cards on the dark ground. Each card re asserts its own light ground and ink at higher specificity than the dark section rule, which is the failure that has shipped invisible white on white text more than once.

logo-row

Six partner plates. Uncrossed on purpose, so the row reads as logos to be supplied rather than as six broken photographs.

pricing-3up

Three tiers, the middle one marked by a heavier border rather than by colour. Prices read as zeros for the same reason the stats do, and the feature ticks are empty boxes because the list is the client's to fill.

team-grid

Four portrait slots at 3:4 with a name bar and a role bar under each. Portrait ratio, not square, because that is what a headshot actually is and the slot should tell the photographer so.

gallery-grid

Six tiles at a tighter gutter than the card grids, because a gallery is one object and a card grid is six. Ratios are mixed on purpose to show the grid tolerates it.

faq-accordion

Five rows built on native details and summary, so it opens and closes with no JavaScript and stays keyboard operable in the wireframe itself. The first row ships open so a reviewer can see both states at once.

blog-grid

Three post cards, each a flush image slot over a date line, a title and an excerpt. Flush rather than inset, so the card reads as one object and the image is not floating inside a frame.

about-map

Copy left, map placeholder right, edge to edge in the reference wireframe. The map is a CSS street grid with a drawn pin, so it costs no asset and re inks with the palette like everything else.

cta-band

Full width dark band, one heading, one supporting line, two actions. The primary button inverts to white on this ground rather than staying accent on accent, which is the rule that keeps it visible in all five palettes.

contact-form-inline

One field and a send button, centred. The reference wireframe's closing row, and the lightest possible capture. Stacks to full width fields on a phone rather than squeezing a sixty pixel input, which is a defect a previous kit shipped.

contact-full

The full contact page. A two column form left, contact details and a map right. Every field is labelled, and the label sits above the input rather than inside it, so the wireframe does not bake in a placeholder only pattern that fails accessibility later.

footer

Logo column plus three link columns, over a legal bar. Collapses to two columns at tablet and one on a phone, which is the point at which a four column footer stops being a footer and becomes a wall.

announcement-bar

A thin strip above the nav for one time-limited message. On the dark ground so it reads as chrome rather than content, and dismissible, because a bar that cannot be closed is a bar every returning visitor resents.

mega-menu

The expanded nav panel, shown open on purpose. A hover-only device is invisible in a screenshot review, and the whole job of a wireframe is to be reviewable. Four columns collapsing to two then one.

breadcrumb-bar

The light breadcrumb strip, for pages that do not open on a dark banner. Same information as pattern 04 carries, at a fraction of the vertical cost.

sidebar-nav

Section navigation for a services tree or a docs set, with the current item marked by weight and an accent edge rather than by colour alone. Sits beside body copy in a narrow-left split.

pagination

A numbered pager with the current page as the one filled cell. Ships with an ellipsis gap so a long set is visibly handled rather than assumed away.

sticky-cta-bar

The persistent conversion bar. Rendered static here rather than fixed, because a fixed element inside a catalog demo escapes its box and floats over every pattern below it. The label says where it actually sits.

hero-search

For a site whose front door is a query rather than a pitch: a directory, an inventory, a knowledge base. One field, one button, and a line of suggested terms under it.

hero-form

Headline left, a boxed form card right. The highest-intent hero in the catalog: the form is above the fold, so nothing has to be scrolled before a lead can be captured.

error-404

The page nobody wireframes and everybody eventually needs. A code, one line of explanation, and two ways out, so a dead end is never actually dead.

icon-grid-6up

Six short capability cells, icon beside copy rather than above it, so the block stays shallow. The counterpart to pattern 05 when there are six things and none of them needs a photograph.

tabs-panel

A tab strip over one panel. Static in the kit, first tab current: a wireframe shows that tabs exist and what is inside one, and wiring them adds nothing a reviewer can act on.

accordion-list

Separated disclosure cards, distinct from the hairline FAQ in pattern 18. Use this where each item is a real chunk of content rather than a one-line answer.

timeline-vertical

A dated vertical rail for history, phases or a project schedule. The connecting line and node are drawn from pseudo-elements, so nothing is an asset, and the whole rail collapses to a flat stack under 640px.

comparison-table

A feature matrix. Ticks are the same empty boxes as the pricing list and gaps are a short rule, so nothing implies a decision the client has not made. Scrolls inside its own box, because a table is the one thing that genuinely cannot reflow.

data-table

A plain records table for specs, rates, schedules or inventory. Numeric cells are monospace so columns align, which is the one typographic decision a data table is allowed to make.

alert-callout

Three note boxes at one weight apart, distinguished by a left edge rather than by a coloured fill. In a grayscale kit the edge is the only honest way to rank them, and it survives every palette.

video-embed

A 16:9 embed slot with a drawn play triangle, so a reviewer can tell it apart from a still image at a glance. The triangle is a CSS border trick, not an icon file.

quote-band

One quote at full width on the dark ground. Louder than pattern 12 and used once per page at most, for the single line worth stopping on.

stat-cards

The bordered variant of pattern 10, for a light ground where a naked number would float. Four boxed figures that stay legible on paper without a dark band behind them.

before-after

Two labelled slots at equal size. Deliberately not a drag slider: a wireframe has to be reviewable as a flat image, and a slider shows one state in a screenshot.

trust-badges

A compact row of accreditations, licences or guarantees. Bordered plates rather than crossed boxes, so the row does not read as missing photographs.

review-summary

An aggregate score beside a distribution. Stars are clip-path polygons and the meters are bordered bars, so the whole block re-inks with the palette and needs no icon font.

product-grid

Four product cards: image, name, price, one action. Prices read as zeros like every other figure in the kit, because a plausible price moves the review onto the price.

product-detail

Gallery left, buy box right. Every commerce decision a wireframe has to settle is here: how many thumbnails, whether variants are boxes or a select, and where quantity sits relative to the add button.

filter-results

A filter rail beside a results grid, with the result count above it. The count is the part people forget, and it is the thing that tells a visitor whether their filter did anything.

cart-summary

Line items left, a totals panel right. Three lines, because one line hides how a long cart behaves and ten is padding.

article-body

Real prose scaffolding rather than bars: two heading levels, a list, a pull quote and a captioned figure. A blog wireframe made of bars tells a writer nothing about heading depth or how a quote is treated, which is the only thing they need from it.

toc-sidebar

A sticky contents list beside the body, current item marked. For anything long enough that a reader wants to skip, which is most service pages and every long post.

author-bio

Avatar, name, one paragraph and a link row, on the tinted ground so it reads as a footer to the article rather than part of it.

related-posts

Two posts rather than three. At the bottom of an article the job is one clear next step, and a third card mostly dilutes the first two.

location-cards

Three branches, each with an address, a phone slot and real opening hours. The hours list is the point: it is the single most-looked-at thing on a local site and the block most often left as a bar.

job-listings

Role rows with a meta strip and one action each. Enough structure that a careers page never has to be invented from scratch halfway through a build.

event-list

Dated rows with the day pulled into its own boxed cell, so a scanner reads the calendar down the left edge instead of parsing each line.

newsletter-band

One field on the tinted ground, bounded by hairlines top and bottom. The lightest capture in the kit and the one that belongs between the content and the footer.