Prototype style guide

“Make it look like mine.”

Note to any humans reading this page: I link this style guide to AI agents to quickly show how I like my prototypes, tools, and interactive HTML docs to look. I can’t stand that Tailwind-y slop they currently make. You do not need to read further. You should do something similar though. Your colleagues will thank you (especially me).

My prototype style guide for agents, collaborators and Future Me 🌿

This page is both the brief and an example of the brief. If I send you this link, treat it as the source of truth for the visual direction and content design of whatever we are making.

The result might be a website, a work prototype, a private tool or a strange little experiment. Keep the requirements that make it useful. Keep the brand rules that already apply. Then make the whole thing feel at home beside this page.

Plain, warm, readable, fast and personal. The design should get out of the way without disappearing completely.

Hey robot, start here 🤖

Read this full page before you make visual decisions. Use its hierarchy, spacing, control style, colour logic, writing tone and restraint. Adapt the rules to the job instead of copying the page as a fixed template.

If I give you only the link and no other design direction, this is the instruction I mean:

Use https://valentinewatkins.com/prototyping/ as the full visual and content design guide for this prototype. Keep the prototype’s functional requirements, but make its hierarchy, layout, controls, colours, copy and small details feel like they belong to Valentine. Before you finish, remove generic Tailwind and AI-generated design patterns.

Start with a document

I like websites that feel like documents. Give me a clear heading, normal paragraphs, useful links and enough structure to find my place again.

Start with semantic HTML and let the browser do its job. Add CSS when it improves readability, mobile fit or a real interaction. Add JavaScript when something genuinely needs to change or respond.

If a heading, paragraph, list, link, table or button can do the job, use it. A <div> in a costume is usually not an improvement.

Let hierarchy do most of the work

Use one big page title. Break the page into sections with clear headings. Use smaller headings only when a section truly needs another level.

Body copy should sound like a person

Keep paragraphs short enough to scan, but do not chop every thought into a slogan. Use bold text for useful scan points and italics for emphasis, titles or a quieter aside. Use lists for things that are actually lists.

Small notes can stay small

Not every thought needs a banner, card or coloured box. Sometimes a short heading and one sentence are exactly enough.

Use a small, earthy palette

The active palette is deliberately limited:

These colours should feel calm, warm and a little bit eucalyptus. Keep normal link underlines and visible visited states. Do not add gradients, glowing edges, glass panels or decorative shadows because the page looks “too simple”. Simple is the point.

Leave room, but not a void

For reading, use a column about 720 pixels wide and text that is larger than the browser default. On a small screen, use the full width with 10 pixels of breathing room.

A tool can be wider when its data or controls need the space. Do not stretch prose with it. Give dense tables, timelines and work areas the width they need, while keeping explanations in a readable column.

Keep text left-aligned. Use the browser’s natural spacing as the starting point. Avoid giant empty hero sections, tiny grey copy and layouts that make one paragraph cross an entire desktop screen.

Use emoji like punctuation 🌱

Emoji can add warmth, humour or one small spark of surprise. One beside a heading is often enough. A relevant emoji in a sentence can also be nice. 📚

Do not turn every heading, button and bullet into an emoji display cabinet. Emoji should feel like a human added it because they were delighted, not like a substitute for an icon system.

Keep the interface honest

Links should look like links. Buttons should look like buttons. Form fields can look like form fields. Images and video should sit inside the reading flow, centred when useful, with a simple one-pixel border and a proper caption when they need one.

Prefer familiar browser behaviour. Do not add a sticky navigation bar, a grid of rounded cards, floating panels, pill-shaped labels or animated entrances unless the content gives you a clear reason.

A page does not need to arrive in pieces.

Tools can still look like tools

A useful tool can have navigation, filters, forms, tables, status messages and several actions. Give each one a clear job and an obvious place in the hierarchy.

Use real labels. Put help and errors near the thing they explain. Use a table when people need to compare rows and columns. Let one primary action be easy to find without turning every other action into a coloured lozenge.

Group related things with a heading, spacing or a simple rule before reaching for a container. One well-structured surface is usually better than six cards nested inside a panel.

Tailwind is not the problem

Tailwind can be a useful way to write CSS. The problem is the unedited Tailwind look that appears when a prototype inherits the same fashionable defaults as every other prototype.

Please remove these tells:

Also avoid a permanent sidebar for a handful of links, excessive grey-on-grey surfaces, pill-shaped labels for ordinary text and dashboards full of fake metrics. Do not solve flat hierarchy by adding more containers.

Use spacing, type, headings, rules and alignment first. Use a border when a real boundary helps. Use colour when it communicates meaning or supplies a small amount of character.

Make the words carry the personality

Use concrete language and real content. Warmth can come from a contraction, a parenthetical aside, a precise joke or one unexpectedly specific example. It does not need a layer of marketing copy.

Write Read my notes, not Unlock insights. Write Subscribe, not Join the journey. Avoid inflated claims, fake urgency and sentences that could belong to any product.

The tone can be clever, but the meaning must stay clear. A person should not need to decode the joke before they can use the page.

Before you show me a prototype

  1. Check that the page has one clear job and one main heading.
  2. Read it on a small screen and confirm that nothing feels cramped or fragile.
  3. Remove decoration that does not help the content, hierarchy or interaction.
  4. Check links, focus states, labels, alt text and keyboard use.
  5. Replace placeholder copy, fake metrics and generic card layouts with things that belong to this project.

The final test

Remove most of the CSS in your imagination. Does the page still make sense? Good.

Now put the eucalyptus colours, generous type and small human details back. Does it feel more like me, without becoming louder or harder to use? Also good.

If it feels slightly too plain, pause before adding anything. Ask whether it is unfinished or simply unthemed. Those are not the same thing.

Make it useful first. Make it unmistakably mine second. Then stop. ✨