--- name: quiet-marketing description: Rebuild a marketing or product page as a quieter version of itself, on-brand. Use when reviewing a landing page, email, onboarding screen, pricing page or app view and you want to see it de-noised — same logo, palette, typefaces and voice, but with the extraction patterns removed and the hierarchy restored. Produces a side-by-side rendered redesign plus a reversible change log. --- # Quiet Marketing A UX guide for de-scaling noise — that shows you the result instead of describing it. Point it at a page. It returns **that same page, quieter**: a rendered HTML redesign you can open next to the original, built from the brand's own colours, typefaces, logo and voice. Nothing invented, nothing rebranded. Every change is listed and every change is reversible. Run it on your own brand first. Then on your customers'. --- ## The premise Attention is not a free input. Every element you add spends some of it, and the person notices the total even when they can't name the parts. A page that spends heavily converts fine on Tuesday and erodes trust by the quarter. Two lenses govern every change this skill makes: **Lens 01 — Giving the senses rest.** Let the person's senses stand down: fewer competing signals, no manufactured urgency, room to breathe. Design for calm and clarity. **Lens 02 — Giving attention its edge back.** Hand intent back to the person: let them choose, go deep, finish, and leave. Attention isn't only something to protect — it's a faculty that gets sharper when a product stops blunting it. Design for depth and completion. A good change serves one. A great one serves both. --- ## The brand contract This is the part that makes the output usable. **Quiet is a density and hierarchy treatment, not a rebrand.** The redesign must be something the brand team could ship without a single identity argument. ### Never change — carry through exactly - **Logo** — same asset, same lockup, same clear space - **Palette** — the same hex values. Not "a calmer version of their blue." Their blue. - **Typefaces** — the same families and weights they already load - **Voice and terminology** — their words for their things. Product names, feature names, the way they capitalise, the way they address the reader. - **Legal and required content** — disclaimers, compliance text, consent mechanisms, pricing, claims, attributions - **Substance** — every real fact, feature, price and proof point on the original page survives somewhere in the quiet version If a supplied brand guideline conflicts with a change you want to make, the guideline wins. Note the conflict in the change log rather than overriding it. ### Fair game — this is where quiet comes from - **How much of the palette runs at once.** Same colours, fewer of them competing. An accent that appears eleven times is no longer an accent. - **Where colour sits.** Their red can stay their red and stop being a full-bleed background. - **Type scale and contrast.** Same fonts, restored hierarchy — one clear largest thing, real steps between levels. - **Density and whitespace.** Line length, section spacing, how much lands above the fold. - **Element count.** What gets removed, merged, or moved behind a click. - **Order.** What the person meets first. - **Motion.** What moves, and whether it was asked for. - **Defaults.** What's opted in, expanded, autoplaying, or pre-selected. - **Copy length.** Trim to their voice — never rewrite into yours. --- ## How to run it ### Step 1 — Get the page Accept a URL, an HTML file, a screenshot, or pasted markup. For a URL, fetch the rendered page. If only a screenshot is available, reconstruct the layout faithfully before changing anything — the redesign is worthless if the "before" is a straw man. Ask for brand guidelines if they weren't supplied, but don't block on them: a brand system can be extracted from the page itself. Say which route you took. ### Step 2 — Extract the brand system Before touching anything, write the brand's own system down. This block goes into the output and becomes the constraint for everything after. ``` BRAND SYSTEM — extracted from [source] Palette: #hex (role) × n uses … list every colour actually rendered Typefaces: family / weights / current scale steps Logo: asset, placement, clear space Voice: 3–5 observed traits, with a quoted example of each Terminology: their words for their things Constraints: anything supplied in guidelines that limits the redesign ``` If the palette has more than five roles in active use, that is already a finding. ### Step 3 — Diagnose **State the person's intent** in one sentence — why *they* are here, in their words. Not the business goal. Every later judgment is measured against this sentence. If it can't be stated in one sentence, the page is serving more than one job and the person is paying for the ambiguity. **Count the asks.** Every element that asks something: read, click, decide, dismiss, remember, hurry. Include the ones that don't look like asks — badges, autoplay, chat bubbles that open themselves, second CTAs of equal weight, countdowns, copy that restates the headline. Then note how many serve the intent. **Name the extraction patterns.** Be specific — the value is that "it feels busy" becomes a thing someone can delete on Monday. Manufactured urgency · false scarcity · social pressure ("27 people viewing") · badge and count pressure · autoplay and forced motion · interstitials before value · loop mechanics (infinite scroll, autoplay-next, recommendations where the exit should be) · confirmshaming · asymmetric exits · attention-taxed defaults · density-as-authority (logo walls, badge walls) · vague-then-clarify headlines. **Score the attention cost**, 0–5 each, one line of reasoning apiece. No composite score — it hides which dimension is broken. | Dimension | Question | 0 | 5 | |---|---|---|---| | **Signal load** | How many things compete for the eye at once? | One clear path | Nothing is quiet | | **Urgency pressure** | How much manufactured time pressure is applied? | None | Constant | | **Intent respect** | Can the person do what they came for, directly? | Immediately | Only after a toll | | **Exit dignity** | Can they finish and leave cleanly? | One obvious ending | Designed not to end | ### Step 4 — Build the quiet version Produce a **single self-contained HTML file** that renders the redesigned page. Inline the CSS. Reference the brand's real logo and image URLs where they're reachable; use a neutral placeholder at correct dimensions where they aren't, and label it. Work these transformations in order: **1. Re-role the palette.** Keep every hex. Reduce how many run simultaneously. Move the accent off backgrounds and onto the one thing that should be clicked. Let the neutral carry the surface area. **2. Restore type hierarchy.** One largest thing. Real steps between levels — if the headline and the subhead are two points apart, the page has no hierarchy, only text. Cap body line length around 60–70 characters. **3. Remove the named patterns.** Delete outright where possible. Where a pattern carries something real — a genuine deadline, a genuine limit — keep the fact and drop the theatre. **4. Collapse, don't delete, secondary substance.** Everything true on the original survives. Detail moves below, or behind a plainly-labelled expander that is closed by default and opens in one click. "Learn more" is not a label; say what's behind it. **5. Reduce to one primary action.** One CTA at full weight, matched to the intent from Step 3. Everything else demoted to a text link. Make the exit as easy as the entrance. **6. Still the page.** Nothing moves unless asked. No autoplay, no carousels advancing themselves, no self-opening chat. Honour `prefers-reduced-motion`. **7. Quiet the defaults.** Notifications off, options collapsed, nothing pre-ticked, consent asked once and plainly. **8. Give it air.** Increase section spacing before you consider adding anything. Whitespace is the cheapest change on this list and usually the largest effect. **Quiet is not empty.** Removing everything is as thoughtless as adding everything. The test is only whether what remains serves the intent from Step 3. ### Step 5 — Deliver Three artefacts: 1. **`quiet-[page].html`** — the rendered redesign, self-contained, openable in a browser 2. **A side-by-side note** — how to view it against the original, and the three differences to look at first 3. **The change log** — every change, reversible --- ## Output format ```markdown ## Quiet Marketing — [page] **They came here to:** [one sentence, the person's words] **Brand system carried through:** [palette / typefaces / logo / voice — one line confirming nothing identity-level moved] **Attention cost — before → after** - Signal load: n → n - Urgency pressure: n → n - Intent respect: n → n - Exit dignity: n → n **Patterns removed:** [named list, or "none found" — say so when true] ### The quiet version → `quiet-[page].html` Open it beside the original. Look first at: [three things] ### Change log **1. [What changed]** Was: [original state] Now: [new state] Costs them today: [the human sentence, about the original] Lens: [senses rest / attention's edge / both] You'd likely lose: [honest business cost] Effort to ship: [trivial / moderate / structural] To revert: [one line] **2. …** ### Held back [Changes you'd have made but didn't — brand guideline conflicts, legal requirements, things needing data you don't have. Say why.] ### Already quiet [1–3 things genuinely well done. Say nothing if there is nothing.] ``` Cap the change log at the seven that matter. A thirty-item list is itself noise, and nothing on it gets done. --- ## Rules **Show, don't describe.** The redesign is the deliverable. Prose about the redesign is not. **Be specific or say nothing.** "Reduce clutter" is not a change. "Removed the 27-people-viewing ticker in the right rail" is. **Don't invent findings, and don't invent design.** A clean page should come back barely changed. Padding to look thorough is the same failure this skill exists to name. **Don't rebrand.** The most common way this goes wrong is producing something quiet and beautiful that is no longer them. If the output would need brand approval, it has failed. **Don't moralise.** Every pattern here exists because it worked on some dashboard. Name the trade; don't lecture. The reader is usually the person who has to defend the removal internally — arm them with the trade, not with disapproval. **Rank by cost to the customer, not cost to the funnel.** Business cost is disclosed so the trade is made with open eyes. It is not the sort key. **Apply it to yourself.** If your output is dense, urgent and hard to leave, you have demonstrated the problem rather than solved it. --- ## Also useful for - **Pre-launch review** — run before shipping, not after the funnel report comes in - **Onboarding** — the highest-value place to run this, and the most commonly over-asked - **Lifecycle audit** — run across an entire email sequence and count the asks cumulatively; sequences always score worse than any single email in them - **Competitive read** — run on a competitor's page to find where the quiet position is open - **Design review ammunition** — a rendered alternative ends an argument that a written critique only starts --- *Quiet Marketing is part of the attention-systems work at [nielsrossipaul.com](https://nielsrossipaul.com/platform-flows) — designing products so a session ends when the user's intent does.*