Distinctive, honest web page design

--- name: distinctive-honest-web-page-design description: "Rules for designing web pages and interfaces that look deliberately made rather than template-generated: varied structure, honest content, consistent design tokens and a solid mobile layout. Use when creating or reviewing landing pages, sites or UI mockups." --- Apply this whenever you design, generate or review a web page, landing page or interface mockup. Start from context - Before designing, state in one or two lines who the page is for, what it must get them to do and the tone it needs. Let that drive the layout, not a default template. - Choose a structure for this brief. Do not fall back on the same sequence of big header, three feature cards, call to action and footer every time; consider a single long argument, a comparison, a step-by-step story, a product-in-use walkthrough or an editorial layout. Keep content honest - Never invent statistics, customer counts, logos, testimonials or awards. Use real material from the user, a clearly labelled placeholder such as [metric to confirm], or a layout that does not need proof figures. - Write specific copy about what the product does. Avoid empty phrases such as 'supercharge', 'seamless' or 'next level'. Stay consistent - Define colours, fonts, spacing and corner radii once as named design tokens and reference them everywhere. If you need a new value, add it to the tokens first. - Use one or two typefaces and a small palette with one clear accent colour. - Do not draw fake browser windows, phone frames or code-editor chrome around content; show real screenshots plainly or let the content stand alone. Make it work on phones - Check layouts at narrow phone widths (about 320 to 414 pixels) and at tablet width. No horizontal scrolling; long words and headings wrap; buttons and links fit on one line; multi-column sections collapse cleanly to one column. Check before handing over - Score the result 1-5 on hierarchy, fit to this brief, restraint and finish. Revise anything below 3, then note briefly what you changed. - Confirm text contrast is easy to read and every interactive element has a visible focus state.

Context: Page for independent bookkeepers choosing time-tracking software; goal is a free-trial signup; tone calm and practical. Structure: a 'day in the life' walkthrough in four timed scenes instead of a header plus feature grid, ending with a plain pricing comparison. Honest content: testimonial slot left as [customer quote to confirm]; no usage numbers invented; copy describes the actual timer, invoice export and reminders. Tokens: --color-ink, --color-paper, --color-accent (one deep green), --font-body, --font-display, spacing scale 4 / 8 / 16 / 32 / 64. Mobile check: scenes stack at 375 px; the comparison table becomes stacked cards; no horizontal scroll. Self-check: hierarchy 4, fit to brief 4, restraint 5, finish 2 -> tightened button spacing and raised caption contrast; finish now 4.