What you are doing
Choose a visual style
Give the agent a look and feel to work to.
Fills the background part
Place one or two soft colour glows near the edge of the opening section, keeping each behind the content and away from body text. Let the brightest area sit near the main action, with the rest of the page returning to a plain dark surface. Do not animate the glow or use more than two competing colours.
PatternFills the tone part
Write as if explaining the offer to a helpful neighbour. Use contractions, keep most sentences under 20 words, and address the reader as "you". Never use "utilise", "leverage", or "seamless", and say what the thing does before saying why it is good.
PatternDifficulty: beginner
How to describe a look without using words that mean nothing.
GuideFills the background part
Blend 3 related colour areas across the opening section, keeping the centre behind the heading calm enough for readable text. Let one colour be noticeably quieter than the others so the page still has a visual resting place. Do not use a rainbow, sharp colour boundaries, or more than three dominant hues.
PatternFills the tone part
Lead each section with one confident claim, then support it with no more than three short points. Use active verbs and concrete outcomes, keeping headings under 8 words so the page has a strong rhythm. Do not stack several exclamation marks, promises, or calls to action in the same paragraph.
PatternFills the style part
Use a near-black base with two slightly lighter surface levels for cards and controls, then set primary text in off-white. Reserve one bright accent for links, key numbers, and the main action, with body text meeting at least 4.5 to 1 contrast. Do not place grey text on grey panels or fill every area with glowing effects.
PatternFills the tone part
Use short, steady sentences and verbs that describe the next step without urgency. Explain one idea at a time, leave out exclamation marks, and give the reader enough information to choose without being pushed. Do not use countdowns, alarm words, or claims that imply a decision must happen immediately.
PatternFills the tone part
Choose precise nouns, complete sentences, and one carefully chosen detail instead of a pile of adjectives. Keep headings below 7 words and let each paragraph make one point before moving on. Do not use slang, hype, or ornate phrases that hide a simple meaning.
PatternFills the tone part
State the benefit first, then support it with a specific result, example, or limitation. Prefer "we do" and "you can" over "we hope" and "you might", while keeping claims tied to facts the team can verify. Do not use absolute words such as "always", "never", or "best" without evidence.
PatternFills the motion part
Every click or tap must produce a visible change within 100ms, even when the real work takes longer. Press the button in slightly, then show a spinner or a disabled state while it waits. Never leave a control looking untouched after the visitor has used it.
PatternFills the tone part
Use one original image or comparison where it makes an idea easier to remember, then explain the literal meaning in the next sentence. Vary sentence openings and choose specific sensory details instead of generic praise. Do not use a metaphor for every feature or let playful wording hide what the visitor can actually do.
PatternFills the motion part
When a chart first scrolls into view, animate the bars or the line to their final values over about 600ms, staggering series by 80ms. Show the axis labels and the final numbers immediately so the data is readable before the animation ends. Run it once per visit.
PatternFills the tone part
Start sentences with active verbs and alternate short lines with longer explanations so the copy feels in motion. Keep headings under 6 words and use one exclamation mark at most on the whole page. Do not confuse energy with urgency, repeated superlatives, or a pile of short fragments that makes the page tiring to read.
PatternFills the motion part
When the visitor moves between pages, crossfade the content over about 200ms rather than cutting to the new page. Keep the header and navigation fixed so only the body changes. Never delay the first paint waiting for the animation, and skip it entirely under reduced motion.
PatternFills the background part
Place 2 or 3 large abstract forms at the outer edges of a section, with no more than 10 percent opacity where text sits above them. Use one shape family and two related colours so they feel intentional. Do not place shapes behind small text, buttons, or form fields, and do not let them drift around the page.
PatternFills the background part
Apply a fine paper or grain texture at no more than 5 percent opacity over a plain base colour. Keep the texture uniform behind the whole section and use flat panels where forms or dense text need extra clarity. Do not use a photographed texture with visible stains, folds, or words.
PatternFills the motion part
Do not animate anything on load or on scroll. The only movement allowed is immediate feedback to a visitor action, such as a button pressing in or a menu opening. No carousels that advance on their own, no counters that tick up, no floating shapes.
PatternFills the style part
Use a calm navy, charcoal, or deep green base with one restrained action colour, and keep headings consistently aligned to the grid. Set body text at 16 to 18 pixels with clear labels, figures, and section headings that make scanning easy. Do not use gimmicky illustrations, crowded colour palettes, or vague claims without supporting evidence.
PatternFills the style part
Use rounded corners, 2 or 3 cheerful colours, and simple illustrations or photos with visible personality. Keep headings short, buttons obvious, and spacing consistent so the energy does not become clutter. Do not use novelty type for body copy or make every element bounce, spin, or compete for attention.
PatternFills the style part
Pair one expressive display typeface for headlines with a highly readable text face, keeping the article column between 65 and 75 characters wide. Use a large lead image, clear bylines, pull quotes, and subheadings every few paragraphs to guide the eye. Do not turn every block into a card or interrupt the reading rhythm with unnecessary controls.
PatternFills the style part
Use a warm off-white base, one earthy accent colour, and photographs that show people or places in natural light. Keep headings direct and body copy in short paragraphs, with rounded details used only on buttons and small panels. Do not use childish illustrations, excessive exclamation marks, or so many colours that the page loses calm.
PatternFills the tone part
Remove filler and keep each paragraph to 2 or 3 sentences, but add one useful human detail such as who is behind the work or what happens next. Use contractions and direct verbs, with no more than one adjective before a noun. Do not reduce every message to a slogan or remove the context someone needs to feel welcome.
PatternFills the style part
Use a minimalist visual style. Plenty of white space, a single accent colour, no decorative graphics, and no more than two typefaces.
PatternFills the tone part
Lead with the useful answer, then add the detail a reader needs to act, using headings under 8 words and paragraphs under 3 lines where possible. Prefer plain verbs such as "start", "choose", and "see" over trend words such as "unlock" or "supercharge". Do not use startup jargon, fake informality, or references that will date the page quickly.
PatternFills the motion part
Move the background image at roughly 70 percent of the scroll speed of the text above it, so the page feels layered. Keep the offset under 100px across the whole section, never move text this way, and switch it off under reduced motion or on touch devices.
PatternFills the background part
Blend two neighbouring colours across one opening or callout section, with the lightest area positioned behind the main text. Keep the change gradual over the whole section and use a solid colour behind any small text or form control. Do not use high-saturation colour pairings that make the words vibrate.
PatternFills the tone part
Read every sentence aloud and choose the version you would actually say, keeping contractions and a mix of sentence lengths. Use ordinary words, name the subject early, and allow one small human aside where it helps the reader. Do not force jokes, perfect symmetry, or the same sentence pattern through every section.
PatternFills the tone part
Use one or two concrete sensory details, familiar objects, or time markers to place the reader in a remembered moment. Keep the main message and actions in present-day language so the page remains easy to use. Do not invent a history, overuse old-fashioned phrases, or make every sentence sound like a story from the past.
PatternFills the style part
Choose one reference period, then use 2 or 3 matching cues such as a muted palette, period-style type, or grainy photography. Keep modern navigation, readable text, and current accessibility expectations beneath the visual treatment. Do not combine unrelated decades or make the interface harder to use for the sake of nostalgia.
PatternFills the tone part
Choose the most precise word, remove repeated qualifiers, and keep each sentence focused on one idea. Describe quality through a material, action, or result instead of a string of superlatives. Do not use "luxurious", "elevated", or "world-class" unless the sentence proves what those words mean.
PatternFills the background part
Repeat one geometric motif, such as a circle, triangle, or square, at a spacing of 48 to 80 pixels across one section. Use only two low-contrast colours and leave clear space behind headings and buttons. Do not mix several unrelated shapes or make the pattern so dense that it reads as noise.
PatternAsks for a concise design concept, structure, direction, interaction, and risks before implementation.
PromptFills the motion part
As the visitor scrolls, fade each section in and lift it about 15px into place. Around 250ms per element, with a 60ms stagger between items in the same group. Play it once, do not replay when scrolling back up, and disable it completely for anyone who prefers reduced motion.
PatternFills the background part
Use a cream, sand, or warm grey base across the page, then pair it with dark charcoal text and one earthy action colour. Separate major content areas with a slightly lighter or darker version of the same family rather than stark white. Do not combine it with cold blue-grey panels that make the palette feel accidental.
PatternFills the motion part
When the cursor is over a button, link, or card, change it visibly within 150ms. Darken the background or shift the border, and change the cursor to a pointer. Keep the element the same size so the layout does not move. Give keyboard focus the same visible treatment.
PatternFills the style part
Use real photographs of materials, hands, tools, or the making process alongside a warm base palette and slightly irregular illustration details. Keep labels and buttons clean enough to read at a glance, with 2 or 3 tactile details per page rather than decoration everywhere. Do not fake handmade character with unreadable script type or stock workshop scenes.
PatternFills the style part
Use no more than two typefaces, a quiet neutral palette, and large areas of breathing room around products or images. Let one refined detail, such as a thin rule, embossed texture, or close-up photograph, carry the character of each section. Do not use flashy discounts, multiple bright accents, or oversized badges that make the page feel cheap.
PatternFills the background part
Draw thin grid lines about 32 pixels apart behind a product, data, or technical section, with one stronger line every fourth interval. Keep labels and actions on solid surfaces above the grid so they remain readable. Do not use the grid behind every section or make it look like a chart that carries real data.
PatternFills the tone part
Name the system, input, output, and relevant limit for each technical claim, using units and version numbers when they matter. Put the plain result first, then give the implementation detail in a short list of no more than 5 points. Do not use unexplained acronyms, hide uncertainty, or call a component secure, fast, or compatible without defining the condition.
PatternFills the tone part
Write the plain-language result first, then introduce one technical term and define it the first time it appears. Keep each sentence to one concept, use a short example after an unfamiliar idea, and expand every acronym on first use. Do not remove useful detail or assume the reader already knows the team's internal vocabulary.
PatternFills the tone part
Support important claims with a source, date, named customer, or clear explanation of how the result was measured. Say what is known, what is estimated, and what the visitor should expect next, using the same terms throughout the page. Do not invent testimonials, hide caveats, or create urgency from information the reader cannot verify.
PatternFills the background part
Set a fine dot or line grid at roughly 24 pixel intervals behind an opening or data-focused section. Keep the marks at under 8 percent contrast from the base surface so headings and controls remain dominant. Do not run the grid behind long body copy or combine it with another strong pattern.
PatternFills the background part
Set the page on one near-black or deep navy surface, then use off-white text and one bright action colour. Keep body text at least 4.5 to 1 against the background and reserve lighter panels for content that needs separation. Do not mix several dark shades just to make the page look busy.
PatternFills the background part
Set the whole page on one soft grey, stone, or cream surface, then use white panels only for content that needs to be separated. Keep the background consistent across at least 3 adjacent sections so the reading flow feels settled. Do not add gradients, textures, or shadows merely to fill empty space.
PatternFills the style part
Set one oversized headline style at 48 to 72 pixels for key messages, then pair it with short body copy and generous empty space. Use one saturated accent against a restrained base, with simple rectangular panels and crisp images. Do not add several typefaces, gradients, and decorative effects all at once.
PatternFills the tone part
Address the reader as "you", use contractions, and acknowledge the practical concern behind the request before explaining the solution. Keep headings direct, paragraphs under 3 sentences, and promises tied to a concrete next step. Do not use emojis, overfamiliar jokes, or corporate phrases such as "moving forward" and "best in class".
PatternUnfilled space around content that makes a page easier to read.
Word