Wireframe Graphite

A lo-fi wireframe kit. Fifty eight structural patterns in pencil gray, with placeholder copy and crossed image slots, for aligning a client on page structure before a single design decision gets made.

It is deliberately unfinished looking. A polished wireframe gets reviewed as a design proposal, and then the conversation is about the colour of a button instead of whether the page is in the right order.

Source

One reference wireframe screenshot. Not extracted from a live site.

Type

Lo-fi planning artifact, 58 patterns, five palettes

Primary

#6e6e6e as a ground, never as text

Built

2026-08-05

Design System

Tokens, the five palettes, the type ramp, buttons, form fields and every wireframe primitive on one page.

Sections

All fifty eight patterns rendered live, each with its origin and the reason it exists. Site chrome, marketing, commerce, editorial, data and local blocks.

Pages

Six assembled pages previewed in frames: homepage, service page, lead capture, about, shop and article.

Homepage

The reference wireframe's own section order, extended with the stats, testimonial and closing bands a real homepage needs.

What is in the kit

_shared.cssTokens and every component. The only stylesheet the pages link.
palettes.jsonGraphite canonical plus Blueprint, Redline, Vellum and Greenline. Runtime switching, nothing hardcoded in markup.
brand-spec.mdToken table, the pattern inventory, what was skipped and why, and the forbidden list.
sections.htmlThe fifty eight pattern catalog with an anchor index.
design-system.htmlKitchen sink: swatches, type, buttons, fields, primitives.
homepage.htmlFlagship page in the reference wireframe's order.
landing-1-service-page.htmlService page grammar: overview, inclusions, process, questions.
landing-2-lead-capture.htmlConversion page: split hero, proof, full form.
landing-3-about-team.htmlTrust page: who we are, team, features, gallery, blog.
pages.htmlGallery of the six pages in live frames.
page-shop.htmlCommerce path: listing, filters, product detail, ratings, cart.
page-article.htmlLong-form: sticky contents, real prose scaffold, author, next reads.
assets/One text free logo placeholder SVG. Everything else is drawn in CSS.

How it behaves

Everything is CSS, nothing is an image

The crossed image box, the map with its street grid and pin, the portrait circle, the icon square and the logo plate are all gradients and borders. They re ink when you switch palettes, and there is no asset that can go missing.

The placeholders look fake on purpose

Stats read 000 and prices read $000. A plausible number invites a conversation about the number. Copy is bars rather than sentences for the same reason.

Square, with one exception

Radius is zero everywhere. Rounding a corner is a design decision. The only curve in the kit is the portrait circle, which is the universal wireframe shorthand for a person.

Five palettes, one drawing

Blueprint for the schematic register, Redline for a markup pass, Vellum for print and pen, Greenline for sign-off once the structure is agreed. Every tone is luminance matched to the Graphite tone it replaces, so contrast and border weight never change.

Mobile is not an afterthought

Every fixed two column split collapses at 880px, the four column footer steps to two then one, and the inline form goes full width rather than squeezing a sixty pixel input.

It hands off cleanly

Each slot is labelled with the ratio a photographer or designer needs: 16:9, 4:3, 1:1, 3:4. Form labels sit above their inputs, so no accessibility debt gets baked in at the wireframe stage.