Website craft skill

#Read first

Brief.md for the product, the audience, the pages and the voice; the design reference, hero image and any logo wired in.

#Story

• The hero says what it is and who it's for in under ten words, with one primary button.
• Then proof (numbers, logos or a quote), then three to five sections that each answer one question, then a closing call to action and a footer.
• Real copy from the brief, never lorem ipsum; short sentences, specific nouns.

#Look

• Follow the wired reference's layout, spacing and mood without copying its brand.
• Two typefaces at most, a clear scale (e.g. 64 / 40 / 24 / 16), line length under 70 characters.
• One accent colour from the brief, used for buttons and highlights only.
• Wired images where they belong: the hero image large in the hero, every other wired picture in the section its name says, never stretched or cropped awkwardly. No section that wants a picture is left as an empty box.
• Responsive from 360 px wide, with focus styles and alt text. On phones the nav becomes a menu button, and words over a photo sit on a scrim or a calm part of it.
• Every pricing plan has its button; contact details are a form or a link, never a placeholder address (example.com).

#Avoid

Generic gradients, emoji as icons, centred walls of text, fake testimonials with stock names, and more than one primary button per screen.