Paste a URL.Get a rebrand.

Non-negotiables

Each rule comes from rework on a past project.

• Content:
  • Design only the offers in content/OFFERS.md; never invent services, media, stats or reviews.
  • References come from the same industry only.
• Concepts:
  • Concepts differ in premise, structure, signature and imagery.
  • Keep REJECTED.md current. Never bring back a rejected idea in a new form.
• Photos:
  • No design starts until the photos to design with are in assets/.
  • Photos lead every first screen; type or numbers used as a signature sit on a photo as a small device.
  • One crop rule and one colour grade across the set.
  • Type sits in front of photos, never behind.
  • The client's portrait appears once.
  • Owner photos are never "placeholders". Assume no shoot.
• First screen:
  • headline at least 7vw on desktop and 12vw on phones;
  • supporting copy at least 1.25rem;
  • the signature move visible on a phone.
• Fonts: Google Fonts or self-hosted, so they load in the canvas, the preview and production.
• Checking:
  • Check by looking: few screenshots, at reduced scale.
  • Bump ?v= after CSS edits.
  • Reduced motion shows the finished page.
• At each stop: show the work, one committed direction (one alternate at most) and one question. Add the round's lessons to LESSONS.md.

The process

Paste this box into Claude, filled in, with a link to this page. The form at the top builds it for you.

Rebrand this site: [URL]
Client name:
Real client or practice:
Industry examples I like (name at least one live site, SAME industry only):
The one whose use of photography I like:
Anything I already dislike:
Other pages about this business (brokerage profile, Google, LinkedIn):
Photos to design with (attach them or say where they are; required before design) / shoot possible (yes or no) / any video:
Logos that must appear (own, brokerage, parent company):
Must-keeps from the current site:

Run rebrand-kit/PROMPT.md, phases 1 to 4.

Before anything

1. Read rebrand-kit/LESSONS.md. It overrides habit.
2. Create the project from rebrand-kit/templates/: clients/<client-slug>/ with CLAUDE.md, BRIEF.md, DECISIONS.md and REJECTED.md, plus the folders research/, content/, assets/ and site/.
3. Add a preview entry for the client to .claude/launch.json, on a new port.
4. If anything in the intake box is blank, ask for all of it in one message. Then work without asking until Stop 1.
5. Two answers block Phase 2, not Phase 1: the photos to design with, and one named site in the same industry. If either is still missing at Stop 1, ask again there.

Phase 1: Research

Goal: know the business, what it really offers, and what good looks like in its industry. Nothing is designed yet.

1.1 Audit the live site.

• Capture every page in the main navigation at 1440px and 375px, into research/audit/.
• Write research/AUDIT.md: pages, facts, what works, and the ten worst problems.
• Write content/OFFERS.md: the exact list of what the business offers on its site (listings feed, search, free valuation, testimonials, phone or text, and so on). Only these get designed.

1.2 Look beyond the site.

• Open the brokerage or employer profile, the Google listing and LinkedIn.
• Record the facts, credentials and portrait sources.
• Read the reviews for who the clients are, not for praise.

1.3 Assets.

• Write content/ASSETS.md: every photo, logo and video that exists, with its size and source.
• Owner-supplied photos are real assets, never placeholders.
• Look for the client's own photography before anything else: their listings or product feed, the brokerage or employer site, the portals. Download full-size originals into assets/.
• Note any photo already used on another site in clients/.

1.4 Industry research (same industry only).

• Sources: the owner's examples, Awwwards and Dribbble filtered to the industry, and two or three leaders in the category.
• For each, read the computed styles: headline face, size in vw, case and weight; body size; colours.
• Also record the hero's make-up, image count, how images are framed, words per section, nav items, where the main action sits, and what moves.
• Measure the owner's photography example in detail (see WOW-PLAYBOOK, "Using photography").
• Write research/RESEARCH.md: the table, the patterns, and what to take.

1.5 Write BRIEF.md:

• audience and positioning in one sentence;
• the offers (from OFFERS.md);
• the page list, with one primary action each;
• voice;
• constraints (assets, no shoot);
• assumptions to confirm.

1.6 Three concepts in words (research/CONCEPTS.md).

• They must differ in premise, structure, signature and imagery.
• Each comes from what the client sells and to whom.
• Each has a one-sentence signature move (WOW-PLAYBOOK).
• Check them against REJECTED.md and against the last three sites in clients/.
• Recommend one.

STOP 1. Show:

• the positioning sentence;
• the offers list;
• the research summary in five lines;
• the three concepts and your recommendation.

The owner picks one. Log the reasons for anything they rule out in REJECTED.md.

Before leaving Stop 1, confirm the two things Phase 2 cannot start without: the photos to design with, and one named reference site (or the owner's word to go without one).

Phase 2: Design (in a Design canvas)

Goal: a reviewable design the owner approves before any code. It is made as a Design canvas artifact on claude.ai, so it has a link that can be shared and commented on.

2.0 Check you can see your own work. Open any claude.ai artifact in the browser pane. If it asks for a sign-in, ask the owner to sign in there before you design. Do not show work you have not looked at; if you truly cannot look, say so in the first line.

2.1 Create the canvas, titled "<Client>: design", from templates/canvas-starter/. Upload the client's real photos and logos as canvas assets.

2.2 Hero frame first. Draw one artboard only, the desktop first screen: the photo and its treatment, the headline on it, the colour and the type. Commit to one direction and give the reason in a line. Share it and get a yes before drawing anything else. This is a quick check inside Phase 2, not a stop.

2.3 Then the artboards, in this order:

2.4 Design rules (also in LESSONS):

• Photos lead every first screen. A signature made of type or numbers sits on a photo as a small device; it never replaces the photo.
• One crop rule and one colour grade across every photo, so the set reads as one shoot.
• Type sits in front of photos, never behind or masked.
• The client's portrait appears once.
• First-screen headline at least 7vw on desktop and 12vw on phones; supporting copy at least 1.25rem.
• Only real offers, real facts and real assets. Missing facts are marked [COPY NEEDED].
• Fonts: Google Fonts, or files we can self-host. They must load in the canvas, the artifact preview and production alike.
• Every text pair passes WCAG AA contrast.

2.5 Art director's review, before the owner sees anything. Look at every artboard at reduced scale and run the checklist in WOW-PLAYBOOK ("The art director's checklist"). Fix what fails, then show.

STOP 2. Share the canvas link.

• Say that the canvas is Claude Design: the owner can open it, edit anything by hand and comment on it.
• Re-read the canvas before every later edit, so the owner's own changes are kept.
• The owner reviews and comments on the canvas.
• Revise on the same canvas until approved.
• Each round, add rejected ideas and "keep this" to REJECTED.md.
• Note the approved canvas link in DECISIONS.md.

Phase 3: Code

Goal: the approved canvas, built as a fast, accessible static site in clients/<slug>/site/.

3.1 Tokens first.

• Write site/styles/tokens.css from the approved design system artboard: raw colours, semantic colours per surface, a type scale of five or six sizes, and spacing.
• Components read only the semantic tokens.

3.2 Build section by section in the canvas order.

• Plain HTML, CSS and JS; no framework unless the brief needs one.
• All paths relative, so the same folder works in preview and production.

3.3 After each section, screenshot it at 1440px and 375px on the local preview and compare it with its artboard. Fix the differences before moving on.

• Bump ?v= on stylesheets after each CSS edit.
• Use few screenshots, at reduced scale.

3.4 Whole-site check:

• widths 375, 768, 1024 and 1440 with no horizontal scroll;
• keyboard and visible focus;
• reduced motion shows the finished page;
• every image has width and height and modern formats, and is lazy below the fold;
• meta title and description, favicon, share image, 404;
• Lighthouse 90+ on performance and accessibility.

STOP 3. Show:

• the local link;
• screenshots beside their artboards;
• Lighthouse scores;
• anything that differs from the canvas, and why.

Phase 4: Deploy

4.1 Preview link.

• Publish site/ as a private claude.ai Artifact: the page, plus its CSS, JS and images as supporting files.
• Give the owner the link; it is shareable with the client when they choose.
• External stylesheets must be Google Fonts. Self-host any other font.

4.2 Production, only when the owner says so.

• Ask which host. Recommend Netlify: npx netlify-cli deploy --dir site for a draft URL, then --prod. The owner logs in themselves.
• Never point the live domain without an explicit yes.
• Hand over a redirect map from every old URL.

4.3 Lessons. Lessons are added at every stop, not only here. Check none is missing, then add one row per remaining lesson to rebrand-kit/LESSONS.md: what cost time, and the rule that would have avoided it. Record process only, never this client's fonts or colours.

STOP 4. Show the preview link, the production link if one exists, Lighthouse scores and the known limits.

Always

• Never use:
  • purple, blue or pink gradients, or gradient text;
  • glowing orbs or glass blur;
  • a three-card icon grid by default, or emoji as icons;
  • stock photos of people at laptops;
  • every section centred, or identical padding everywhere;
  • Inter, Poppins or Montserrat by default;
  • motion on every element, auto-playing carousels, or pop-ups on arrival.
• Never write: elevate, seamless, unlock, empower, revolutionize, cutting-edge, game-changer, supercharge. No exclamation marks in headlines.
• No invented stats, reviews, awards, services or media.
• Commit. At every stop show one direction with its reason, and one alternate at most.
• Lessons at every stop. When a round is rejected, add the row to LESSONS.md then, not at the end.
• Inspiration wins. If the owner's inspiration uses something on these lists, it wins; say so once.

Lessons

What went wrong on past rebrands, and the rule that prevents it. Claude reads this before starting a rebrand and adds to it at the end.

What belongs here: process. What cost time, what had to be redone, what was checked too late. What does not: any client's fonts, colours, copy or positioning. Those are chosen fresh each time from research and the owner's inspiration.

Intake

Research

Design system

Working method

Wow playbook

Studied from Awwwards Sites of the Day. Read this before designing any rebrand. It sits on top of the research, design system and UI fundamentals; it does not replace them.

What was studied

The pattern behind the wow

1. One signature move, taken from the subject's own world. Belgrade Arbor's mask shape is its facade. Agrumea's wheel is its jars. Delta's floating room is its archive. Nothing is decoration borrowed from elsewhere. Ask: what object, shape or process belongs only to this client? Make that the hero and repeat it.
2. The signature repeats as a system. Belgrade Arbor uses the canopy mask on every image, not just the first. One idea, applied consistently, reads as a brand.
3. Scroll is the storyteller. All seven use smooth scrolling. Content arrives as chapters: pinned sections, images that grow or unmask, lines of type that rise into place.
4. Type at poster scale. Headlines of 77 to 151px, usually a light or regular serif, often split into lines that reveal one by one.
5. Photography is cinematic and art-directed. Full-bleed, strong light, one subject per frame. No generic stock.
6. Restraint everywhere else. Navigation is a pill or a corner menu; body copy is short; colour is limited.

What to avoid, also seen

• Cookie banners covering the hero on arrival (four of seven).
• Long loading screens before anything appears.
• Pages of 10 to 20 screens where the content is thin.
• Motion with no reduced-motion fallback, and text that cannot be selected or read by screen readers.

Rules for using this in a rebrand

1. Start from the business, not the biography. Name what the client sells, to whom, and why people choose them. A past career or hobby can support the story; it is rarely the signature.
2. Find the signature before designing anything. Write one sentence: "The signature move is X, because X belongs to this client's world in this way." If it could belong to another business, it is not the signature.
3. Design the signature into three places: the hero, one middle section, and the close. Same idea, three scales.
4. Use the motion kit, in this order of cost:
   • Smooth scrolling (Lenis).
   • Headline lines that rise into place on load.
   • Images that unmask (clip-path) as they enter.
   • One pinned section where the signature develops in steps.
   • SVG line drawing that draws itself.
   • WebGL or video only when the client has the footage or the budget.
5. Every motion has a still state. With reduced motion turned on, the page shows the finished composition with nothing moving. Content is never hidden behind animation. Build it so: put hidden starting states only in from keyframes with animation-fill-mode: both, never as the element's resting style. Then, if animation is blocked or fails, the finished page still shows. Test by injecting *{animation:none!important}.
6. Put the signature where it is seen. On phones the hero often stacks text first, pushing the signature below the fold. Move it first, or it will never be seen.
7. Real photography first. Photos lead the first screen. If the client has no strong photos, stop and agree a source with the owner before designing. A first screen of type, drawing or shape alone needs the owner's yes in advance.
8. Performance stays on budget. Lighthouse performance 90 or above still applies. Load motion libraries from a CDN, lazy-load everything below the first screen.
9. Uniqueness check: put the new hero beside the last three sites built with this kit. If any two share a signature move, layout or type treatment, change it.

Using photography

Studied from an image-led real estate site the owner chose.

1. One full-bleed moment. The hero photo runs edge to edge. After it, photos are framed rectangles on a plain ground with wide space around them, until perhaps the close.
2. Type in front of the photo. The hero word sits over the image, light serif, at poster size (22vw on the site studied). Never behind, never masked by the subject.
3. Pairs, offset. Where two views help (outside and inside), a small photo overlaps a larger one, offset, never aligned to the same edges. Use the device once or twice, not in every section.
4. Few words per image. One short heading and under 40 words.
5. Count with intent. Decide the number of photos per page before designing. If the client has a listing or product feed, that feed is the imagery; do not add stock galleries on top of it.
6. The person once. A portrait of the client appears in one place only.

The art director's checklist

Run this on every artboard, at reduced scale, before the owner sees it. It is what a creative director would ask at a review.

1. Squint. With the artboard small, is there one focal point, and is it the right one?
2. Picture first. Does a photograph lead the first screen? Would the screen still interest someone who read none of the words?
3. One idea. Can the screen be described in one sentence without "and"?
4. The crop. Is each photo cropped on purpose: a clear subject, a level horizon, nothing important cut at the edge?
5. One set. Do the photos share a grade, so they read as one shoot?
6. Type on image. Is every word on a photo readable without a heavy dark layer? If the fade is the first thing noticed, change the crop or move the type.
7. Hierarchy. Three levels at most on a screen: headline, support, action.
8. Less. What can be removed? Cut copy until one line and one action remain on the first screen.
9. The signature. Is it visible here, at this size, and on the phone?
10. Not a statistic. Do numbers read as part of a home's story, or as a dashboard? If a dashboard, shrink them and put them on a photo.
11. Unlike the last three. Beside the last three sites in clients/, does it share a layout, a type treatment or photos? Change it, or tell the owner.
12. Committed. Is this one direction, or a menu? Decide.

Cost notes

Smooth scroll, line reveals, clip-path reveals and SVG drawing need no assets and can be built in a day. WebGL scenes, 3D models and video need a budget and source material; propose them, do not fake them.

Templates

Copy these into each new client folder. Claude creates them for you in step 4.

# Rules for this project

This project follows `../../rebrand-kit/PROMPT.md` (research, design, code, deploy). Read `../../rebrand-kit/LESSONS.md`, then `BRIEF.md`, `DECISIONS.md` and `REJECTED.md` before doing anything. To resume, carry on from the last entry in `DECISIONS.md`.

## How we work

1. **Phases in order.** Research, then design in a Design canvas, then code, then deploy. No code before the canvas is approved.
2. **Only the system.** Colours, sizes, spacing and radii come from the approved design system. Propose any new value before using it.
3. **Only what is real.**
   - The offers in `content/OFFERS.md`, the facts in `content/`, the assets in `content/ASSETS.md`.
   - Missing copy gets a visible `[COPY NEEDED: …]`.
   - Never invent stats, reviews, services or media.
4. **Respect REJECTED.md.** Check every concept and design against it. Add to it after every round of feedback.
5. **Explain choices.** Give one line per decision in `DECISIONS.md`, tied to the brief or the research. "It looks modern" is not a reason.

## Design rules

- References come from the same industry only.
- Photos lead every first screen. Type or numbers used as a signature sit on a photo as a small device.
- One crop rule and one colour grade across every photo.
- One committed direction at each stop, one alternate at most.
- Type sits in front of photos, never behind or masked.
- The client's portrait appears once.
- First-screen headline at least 7vw on desktop and 12vw on phones; supporting copy at least 1.25rem.
- One signature move from the client's own world, in the hero, one middle section and the close.
- Motion:
  - one orchestrated moment;
  - hidden start states only in `from` keyframes;
  - reduced motion shows the finished page.

## Bans

- **Visual:**
  - purple, blue or pink gradients, gradient text or glowing orbs;
  - glassmorphism;
  - the default three-card icon grid, or emoji icons;
  - stock people at laptops;
  - every section centred, or identical padding everywhere;
  - Inter, Poppins or Montserrat by default;
  - large rounded corners with heavy shadows on everything;
  - auto-playing carousels.
- **Copy:**
  - elevate, seamless, unlock, empower, revolutionize, cutting-edge, game-changer, supercharge;
  - fake stats or testimonials;
  - exclamation marks in headlines.

## Quality bar

- Semantic HTML, keyboard navigable, visible focus.
- WCAG AA contrast on every pair.
- Images in modern formats with explicit sizes, lazy below the fold.
- Works at 375, 768, 1024 and 1440px.
- Lighthouse 90+ for performance and accessibility.

## Before showing any section, answer

1. Could this appear on 1,000 other sites? If so, what makes ours different?
2. Did anything fall outside the system?
3. What would a skeptical designer criticise?
4. Does it work on a phone?

## Folders

```
research/   audit screenshots, AUDIT.md, RESEARCH.md, CONCEPTS.md
content/    OFFERS.md, ASSETS.md, copy per section
assets/     the client's photos and logos (originals)
site/       the built site (deployed as is)
BRIEF.md  DECISIONS.md  REJECTED.md  CLAUDE.md
```

# Brief: [Client]

## Intake

- **Site:**
- **Real client or practice:**
- **Industry examples the owner likes:**
- **Photography example:**
- **Dislikes:**
- **Other pages about the business:**
- **Photos / shoot possible / video:**
- **Logos that must appear:**
- **Must-keeps:**

## The business

- **What they sell, to whom:**
- **Why clients choose them (from reviews):**
- **Positioning, one sentence:**

## Offers (from content/OFFERS.md; nothing else gets designed)

-

## Pages and the one primary action on each

| Page | Primary action |
|---|---|
| Home | |

## Voice

## Constraints

## Chosen concept and signature move

## Design canvas (approved link)

## Assumptions to confirm

# Decisions

One line per decision, newest last, with the reason tied to the brief or the research. Note each stop and what the owner decided.

| Date | Phase | Decision | Reason |
|---|---|---|---|

# Rejected and kept

Check every new concept and design against this list before showing it. Nothing rejected comes back, in any form, unless the owner asks.

## Rejected

| Idea | Owner's reason |
|---|---|

## Kept

| Idea | Owner's words |
|---|---|