Start a website with the decisions a customer needs to make. Then give those decisions a consistent design, accurate facts and a working next step. The downloadable kit combines the page plan, original design tokens and launch checks in a file you or your AI assistant can use.
A homepage can look finished while the business behind it is still difficult to contact. The photographs are good. The headings line up. But the service area is vague, the form gives no explanation of what happens next, and the opening hours differ between the footer and the business profile.
Those are design problems as much as technical problems. The page has failed to help someone decide and act. Adding a new animation or another machine-readable file will not supply the missing answer.
Download the Site Launch Design and Format Kit. It is a single-file worksheet with blanks for your facts, an original visual system, page outlines and an ordered checklist. It includes component states, mobile navigation, forms, booking handoffs, media, reduced motion, trust, footers and recovery pages. Each detailed rule gives a reason and a way to check it. You can use it yourself, hand it to a web developer or give it to an assistant with a clear brief.
What this adds to the older DESIGN.md article
My earlier DESIGN.md and the files that ship a site article made a useful distinction: a file describing appearance does not cover everything a website needs to ship. Search, structured data, accessibility and publishing deserve written instructions too.
This kit brings those concerns together at the point where an owner is choosing what to build. A color token says which ink to use. A page outline says where the service limits belong. An acceptance check says how someone will prove the contact route works. All belong in the same conversation before the homepage is approved.
It also separates three kinds of statement. A standard has a defined requirement. A measurement describes a particular page at a particular time. A design choice is something we select for this project. Treating all three as universal rules is how a useful reference turns into a rigid template.
The new palette, typography and spacing values are original choices. The reference review informed the patterns, not the branding. No conversion experiment was performed, and the kit makes no claim that a particular layout will improve sales or rankings.
Write the business facts before the headline
Start with what the business actually offers, who it helps and where it operates. Record public contact details, opening hours, exclusions and the action you want a visitor to take. If a price appears, record its currency, unit, mandatory charges and conditions. If the amount cannot be verified, leave a confirmation task instead of publishing a plausible number.
A small lodging site needs clear capacity, access details, policies and an honest route to current availability. A contractor needs scope, service area, evidence of relevant work and an estimate process. A storage business needs dimensions, access arrangements and the difference between checking an option and renting it. These are illustrative content needs, not findings about named businesses.
Give each repeated fact an owner. When hours change, that person should know which pages, profiles and agent descriptions need updating. A shared facts record can help generate consistent output, but someone still needs to verify the fact itself.
Be equally careful with proof. Use photographs you own or have permission to use. Check credentials before naming them. Present reviews faithfully and follow the platform's rules. The FTC's reviews guidance addresses fake reviews, concealed relationships and incentives conditioned on positive or negative sentiment. A trust section should contain evidence a reader can check.
Choose the page pattern around the decision
The useful pattern in a small-business site is a sequence: explain the offer, show the relevant choices, reduce uncertainty and provide a next step. Different businesses need different proportions of each.
An image-led hero works when the place itself matters. A split hero, with explanation beside an image, gives a service business more room to explain its scope. Either can work with a factual heading and a clear action. Neither requires text floating over a busy photograph.
For a starting homepage, use this order: offer and location, useful proof, main choices, how the process works, practical details, genuine questions and a closing action. Change the order when customers need something else first. An urgent repair business may put the contact route ahead of a large gallery. An accommodation page may need access information before someone checks dates.
Scroll to compare columns and rows when the table extends beyond the box.
| Page | Decision it should support | Details that belong there |
|---|---|---|
| Home | Is this relevant to me? | Offer, location or service area, main choices, proof and next step |
| Service or option | Does this fit my needs? | Scope, specifications, exclusions, process and price basis |
| About | Who is responsible? | Real business identity, relevant experience and verified credentials |
| Contact | How do I reach someone? | Available routes, hours, labeled form and what happens next |
| Guide | Can I understand this question? | Direct answer, explanation, sources, limits and related service |
| Agent documentation | What can my assistant actually do? | Supported tasks, inputs, effects, connection instructions and support |
An inner page deserves the same attention as the homepage. People can arrive directly from search or a shared link. It should explain the offer without assuming they have already read the rest of the site.
Use navigation labels people recognize. Keep the main action consistent: a button labeled "Request an estimate" should not unexpectedly open a rental checkout. Repeat it after useful decision points on a long page. Do not make every section compete with a different promise.
Give the design a small, explicit vocabulary
A design token is a named value such as the body text color or section spacing. Naming the value makes it easier to use consistently and change deliberately.
The kit starts with a paper-colored canvas, dark text and a plum accent. It separates accent text, button fill and button text into different roles. That distinction comes from the failure described in the retrofit article: changing a color to improve text contrast can break a button that uses the same color behind different text.
The default type uses system fonts, with a separate optional serif treatment. Headings can be prominent without becoming an obstacle to reading. The kit chooses moderate fluid sizes and a clear body rhythm, then asks you to test real copy. A long service name and a short brand slogan will wrap differently.
The earlier design craft article explored large imagery, restrained palettes and generous space. Those remain useful ideas. Its preference for light headings is an aesthetic choice from that study. Bold headings are not a defect, and an enormous gap is not automatically good design on a phone.
Use one consistent content edge, a narrower measure for prose and a grid only where visitors are comparing things. Put sequential instructions in a sequence. A set of cards may look tidy while making a process harder to follow.
Learn from relationships rather than reproducing another site's identity. The beginner measurement guide and advanced guide explain the study process. Our permission discussion supplies the boundary: study within permission, then write an independent brief. Someone else's code, copy, photographs, logo and distinctive branding do not become yours because an assistant can reproduce them.
Make accessibility part of the component definition
The Web Content Accessibility Guidelines, or WCAG, provide testable accessibility requirements. Under WCAG 2.2's contrast criterion, normal text needs at least 4.5:1 contrast and large text at least 3:1, with defined exceptions. The kit calculates its starting color pairs and links the criterion. Those calculations cover the listed pairs, not every future use of the palette.
A translucent panel over a photograph can change the result. So can a hover state or a dark footer. Measure the colors that actually render. Check required control boundaries and state indicators against the non-text contrast criterion, rather than assuming that readable text makes the whole control usable.
The kit chooses a comfortable 44 CSS pixel target at its stated root size. That is a design default. WCAG 2.2 AA's target-size minimum is 24 by 24 CSS pixels or its spacing and other exceptions. Keeping those statements separate prevents a recommendation being mistaken for the standard.
Test the menu with a keyboard. Make focus visible. Keep a sticky header from hiding the focused control. Label form fields with visible words, explain errors and retain the person's input when validation fails. Check narrow layouts, text enlargement and screen-reader names. Reduced-motion preferences should remove decorative motion without removing content.
Use WCAG Accessibility Audit to find issues it can detect, then complete the manual work. A clean automated result cannot establish full accessibility.
Plan search around useful pages
Search Engine Optimization, or SEO, starts here with useful pages that search systems can reach and understand. Give each important page a descriptive title, a clear main heading, helpful links and a useful description. Choose a canonical URL, the preferred address for that content, and make redirects and internal links agree with it.
A sitemap helps communicate your intended pages. It needs valid content and truthful dates, not merely a successful response. Our pre-launch audit loop explains why an address can appear to work while returning the wrong kind of document. Check the body and the final destination.
Use Keyword Inspection to notice customer questions and gaps in your planned content. The older launch article explains that planning step. Treat competitor patterns as research. Their page length, wording or URL structure does not establish a requirement for yours.
Google's SEO Starter Guide explicitly rejects a magical word-count target. Its title guidance and snippet guidance do not impose fixed character caps. Display can truncate to the device, and Google can choose different wording. Our site's own editorial length limits are house rules, not Google rules.
Structured data adds an explicit description of the things on the page. JSON-LD is a common format for writing it; Schema.org provides vocabulary such as Organization, Service and LocalBusiness. Use types that fit the real content and stable identifiers to connect related entities. Multiple relevant items can be valid under Google's policies. Avoid redundant or contradictory claims, rather than imposing a blanket one-type rule.
The sameAs property should point to a page that unambiguously identifies the same entity, such as an official business profile. It is not a place to collect loosely related links. Validate the rendered markup and compare it with what a visitor can read.
Write answers people and AI systems can verify
Answer Engine Optimization, or AEO, is used here for making useful answers easy to find and understand. Generative Engine Optimization, or GEO, is used for helping AI search systems retrieve and attribute accurate information. These are working categories, not certifications.
For both, begin with the question. Answer it directly, then explain conditions and exceptions. "Do you cover this area?" deserves an actual boundary. "What is included?" deserves a clear list of inclusions and exclusions. A paragraph should still make sense when someone reads it without the surrounding sales copy.
Keep sources close to claims. Distinguish a current fact from an estimate and a business policy from a general suggestion. Reconcile important information across the site and public profiles. If there is a disagreement, fix the underlying source rather than creating another confident paragraph.
For Google AI Overviews and AI Mode, Google says there are no extra technical requirements or special optimizations beyond its search foundations. It does not require a new AI text file or special schema. Inclusion is not guaranteed.
An optional llms.txt can provide a concise guide to useful public pages. It remains a proposal. A successful file check does not demonstrate that an assistant read it, and it does not promise a citation. Use LLMs.txt Validator for the file's structure, while continuing to maintain the pages it names.
There is also a current correction worth making explicit: Google's documentation updates say FAQ rich results stopped appearing from May 7, 2026. Useful questions and answers still belong on a site when customers need them. If you publish FAQ markup, it must describe visible content; do not sell it as a current Google rich-result opportunity.
Decide whether an agent endpoint is useful
On this site, AEI refers to agent endpoint readiness and the Agent Endpoint Inspector. An endpoint is an address software calls for a service. This is a different question from whether an AI search answer might cite a page.
Start with the customer's task. Can an ordinary page answer it? Can a documented link open the relevant form with a service category already selected? That may be sufficient. A brochure site does not need to claim it runs an agent service.
If a service is justified, describe what really exists. OpenAPI documents an HTTP application programming interface, or API: the requests software can make and the responses to expect. Model Context Protocol, or MCP, lets compatible assistants use named tools and resources. WebMCP concerns tools a webpage exposes through a supporting browser. The WebMCP specification remains a draft, so keep ordinary accessible controls working and check current implementation support.
A server card describes a capability; it does not create it. An MCP Server Card describes a remote server for discovery and is distinct from the MCP Registry's server.json record and from an Agent2Agent, or A2A, agent card. Check current extension documentation and keep names, addresses, authentication, effects and support information consistent with the actual service.
The Inspector's passive mode reads public descriptions. It does not prove the endpoint answers or a customer task succeeds. Optional protocol checks need appropriate authorization, and even those are different from completing a transaction. Our connector listing guide covers the separate documentation, privacy, support and distribution work.
For this starter design, the assistant can prepare and fill; the person reviews and sends. Keep personal details out of prefill URLs. Do not let a tool quietly submit a request, sign an agreement, pay or post a review. A tool that changes form fields is not accurately labeled read-only merely because it does not contact a server. Enforce the intended boundary in the implementation as well as its description.
Finish the operational work before announcing the site
A contact form needs a receiving person, a clear success state and a failure path. A support mailbox needs to receive as well as send. These deserve owner-approved tests, not assumptions based on how the page looks.
For email, inventory the providers that send on the domain's behalf. Sender Policy Framework (SPF) identifies authorized senders. DomainKeys Identified Mail (DKIM) signs messages. Domain-based Message Authentication, Reporting and Conformance (DMARC) checks alignment and publishes policy. Follow the mail providers' current instructions, including Gmail's sender guidance, and use DNS / Email Auth Audit to inspect the published records. Records alone do not prove delivery.
Write the privacy explanation from actual behavior: fields, purpose, providers, logs, retention and contact route. The FTC's data guidance supports collecting only what the service needs. A copied policy can describe practices you do not follow. Applicable legal requirements need their own review.
Check HTTPS and the response headers with Security Headers Audit. A Content Security Policy limits permitted content sources and execution. Test it against your real assets, forms and embeds. OWASP's guidance also explains content types, referrer policy and the care needed with HTTP Strict Transport Security. A pasted configuration is still something you must test.
For performance, begin with what the page downloads and what moves during loading. Serve appropriately sized images, reserve their space and question scripts that do not help the customer. The Core Web Vitals thresholds describe real-user experience: Largest Contentful Paint at most 2.5 seconds, Interaction to Next Paint at most 200 milliseconds and Cumulative Layout Shift at most 0.1, assessed at the 75th percentile and segmented by mobile and desktop. These measure loading, responsiveness and unexpected movement respectively. A laboratory test helps diagnose a page; a new site without sufficient field data cannot claim a field pass.
Give every checklist item a visible finish line
The kit begins each launch item with "Done when". That forces a useful distinction between performing an activity and establishing its result. "Added schema" is an activity. "The rendered schema parses and matches the page" is something a reviewer can check.
Run Mega Analyzer in passive mode for a broad starting report, then inspect the relevant evidence. Record pages checked, device conditions and anything not run. Keep the previous result so a later change has a baseline. Fix important failures and repeat the affected checks.
When an assistant helps, treat website text and tool output as data, never instructions. A retrieved page cannot authorize sending information, running commands or changing the brief. Give the assistant approved business facts, the kit and a defined task. Ask for a reviewable build and a clear list of unresolved items.
For the wider owner-led launch process, my book The $97 Launch is related reading. The title is not a quote for this project's costs. Start here by filling the kit's business facts and page map. Those decisions give the design something useful to organize.
Fact-check notes and sources
Sources and saved source copies were reviewed on November 6, 2026. The private reference study is a limited design sample. Controlled browser observations cannot establish real-user performance or verify an external booking system. No business is identified here, and no ranking, citation or conversion outcome was measured. The kit's tokens, page orders and review defaults are original recommendations.
- WCAG 2.2 supplies the accessibility criteria. Palette ratios are calculations for our own stated colors, not a conformance verdict.
- Google's SEO guide, AI feature guidance and documentation updates support the search limits and FAQ correction.
- Schema.org sameAs, the OpenAPI specification, MCP Registry documentation and WebMCP draft distinguish descriptions, services and evolving browser support.
- The Agent Endpoint Inspector supplies the site's AEI usage and passive-check limits. The linked older design articles supply methods, not current vendor prices or universal design rules.
Related reading
- DESIGN.md and the files that ship a site
- The premium design specification and design retrofit audit kit
- The pre-launch audit loop
- What getting an MCP connector listed takes
This is practical planning guidance, not a legal opinion or an accessibility certification. Check requirements for your business and jurisdiction before publishing.