reference_driven_art_direction v1.0.0

---

name: "reference_driven_art_direction" description: "Design a page or screen from real references instead of defaults: brief first, gather references per section, view each one, keep 5 to 8, write a specimen sheet stating what each reference gives, what it leaves, and what it becomes, derive type, palette, grid, and one signature detail, build, then screenshot the build at desktop and mobile widths and fix it against the references without copying any layout, image, or copy wholesale. Use when designing or redesigning a page, screen, or landing surface and the result must look intentional rather than templated."

---

Purpose

Give a page a real visual direction by working from references you have actually looked at, section by section, and writing down what each one contributes before any building starts. The method works from any reference source: live sites, screenshots, print, photos, app screens, or a design library if one happens to be available. No single library, tool, or account is required.

The deliverable that holds the work together is a specimen sheet. It records, for every kept reference, what it gives, what it leaves behind, and what it becomes on your page. If that sheet is thin, the build will drift back to defaults no matter how good the references were.

Workflow

1. Write the brief before looking at anything

• State the job of the page in one sentence, who lands there, what they need in the first ten seconds, and the one action the page must make easy.

• Pick three tone words and define each in plain terms a visitor could point at, such as sturdy meaning strong edges and no wispy type.

• List hard limits up front: brand colors or logo that stay, fixed prices or legal copy, components that already exist, and any deadline that affects scope.

• Copy templates/specimen-sheet.md and fill the brief section. Do not gather references until the brief exists, because without it every attractive image looks relevant.

2. Gather references per section, not per page

• Split the page into sections first: hero, navigation, cards or listings, detail area, form, pricing, footer, or the equivalents on a screen.

• Collect two or three candidates per section from mixed sources. A printed report can teach table alignment, a timetable can teach grid discipline, and a photo can teach color restraint. Limiting yourself to other websites in the same category produces a page that looks like that category.

• Record the source for each candidate as you collect it: URL, publication, or file name, plus where it came from. A reference you cannot trace later cannot be checked for rights or revisited at full size.

• Collect more than you need. Twelve candidates for a normal page is a workable starting point, because the next step cuts roughly a third to a half of them.

3. View each reference, then keep 5 to 8

• Open every candidate at full size and look at it properly. Thumbnails hide weak type, low contrast, and layouts that only work at one width.

• Ask of each candidate: what single principle does this teach, and does any kept reference already teach it better? Cut duplicates of the same principle, however pretty they are.

• Cut anything whose effect depends on an asset you cannot match honestly, such as a celebrity photo, a huge print size, or contrast that fails when you test it.

• Cut anything you would be embarrassed to show side by side with the finished page. That is usually a sign the plan was to copy it.

• Keep 5 to 8 references total, one or two per section, and log every cut with a one line reason in the specimen sheet. Nielsen Norman Group describes mood boards as collages that show the feelings a product should create and help a team decide visual direction early. This step is that idea with a stricter rule: a kept reference must teach a named principle, not just a mood.

4. Write the specimen sheet

• For each kept reference, fill three fields exactly: Gives (the principle, stated as a rule you could apply without the image), Leaves (the typeface, image, layout, color scheme, or wording you will not take), and Becomes (what the principle turns into on your page, with your content).

• Reject vague entries. "Clean and modern" gives nothing. "Headline left, image right, and the gap between them does the grouping, with no box around either" gives a rule a builder can follow and a reviewer can check.

• Treat the sheet as a close relative of a style tile. Style tiles, as defined by Samantha Warren, are a deliverable of fonts, colors, and interface elements that communicate the essence of a visual brand without defining layout. Your specimen sheet adds the per reference Gives, Leaves, and Becomes rows that a style tile alone does not require.

• Stop and review the sheet before building. If two references give conflicting rules for the same section, resolve the conflict on the sheet, in words, rather than letting the build average them out.

5. Derive the system

• Type: choose a display face and a text face, then write a scale for headline, subhead, body, and caption as sizes or ratios. Note which reference each choice traces to, or mark it as your own choice.

• Palette: name background, surface, ink, muted ink, accent, and danger as hex values, and state where the accent is allowed to appear. An accent with no stated limit spreads until it means nothing.

• Check every text and background pair with python3 scripts/check_contrast.py "#foreground" "#background". WCAG 2.2 criterion 1.4.3 requires 4.5 to 1 for normal text and 3 to 1 for large text at level AA, and criterion 1.4.11 requires 3 to 1 for interface components and meaningful graphics. Large text means at least 24px, or at least 18.5px bold. Ratios do not round up, so 4.48 to 1 fails.

• Grid: state column count at desktop and mobile, gutter, maximum content width, and one spacing step that all margins and gaps derive from.

• Signature detail: pick one repeatable detail a visitor could recognise with the logo covered, such as a rule shape, a corner treatment, a label style, or a numbering habit. One only. Write where it repeats, and check later that it survives at mobile width.

• Hierarchy check on paper: rank the elements on the page from first seen to last, using size, contrast, type weight, spacing, and alignment as the levers. If the ranking on paper does not match the brief's priorities, fix the system now, while it is still words.

6. Build to the sheet

• Build section by section, with the specimen sheet open, and use your own content, images, and wording throughout.

• When a build decision has no row on the sheet, decide it from the derived system (scale, palette, grid, spacing step) rather than from taste in the moment. If the system cannot answer it, add the answer to the sheet first, then build.

• Resist adding a second signature detail, a new accent color, or a display face for one section. Each addition dilutes the ones already chosen.

7. Screenshot the build and fix it against the references

• Capture the finished page at 1440px, 1024px, 768px, 375px, and 320px. Those widths follow the Chrome DevTools device presets, and 320px is also the WCAG reflow test width, where content must fit without scrolling in two directions.

• Work through references/screenshot-comparison-checklist.md at each width: hierarchy under a blur or squint test, type ratios, sampled colors against the sheet, grid and spacing, the signature detail, and the difference test.

• Apply the difference test to every section: name two concrete ways the section differs from its reference in layout, image, or wording. If you cannot name two, the section is too close to its source. Change it.

• Fix in this order: hierarchy, grid and spacing, type, color, then detail. Re-capture the changed widths plus 320px and repeat the pass for changed sections.

• Allow two full loops. After that, write down each remaining difference from the references and why you accept it, so the record shows a decision rather than a miss.

8. Worked example

• Read references/worked-redesign.md for a complete run on a pricing page: brief, twelve candidates cut to seven, a derived system with measured contrast values, and a screenshot pass that found and fixed four faults, including a button label that failed contrast and a mobile stacking order that broke the principle the reference was kept for.

Output Contract

Deliver all of the following:

1. The completed specimen sheet, with 5 to 8 kept references, a Gives, Leaves, and Becomes row for each, a cut log, the derived type scale, palette with hex values and contrast results, grid, and the one signature detail.
2. The built page or screen, or the design files for it, matching the sheet.
3. Screenshots at 1440px, 1024px, 768px, 375px, and 320px, with the comparison checklist filled in per width.
4. A fix list showing what each screenshot pass found, what changed, and any accepted differences with their reasons.
5. An asset list naming the source or license for every photo, illustration, font, and icon used.

Operating Rules

1. Never copy a layout, image, headline, or color scheme wholesale from a reference. Take principles, stated as rules, and apply them to original content. Under United States copyright law, reproducing a work or making a derivative work from it without permission is infringement, and crediting the source does not change that. This is a working rule for staying original, not legal advice.
2. Never cite a reference you did not view at full size in this run. If a source cannot be opened, it cannot be kept.
3. Never invent numbers. Contrast ratios come from the checker, widths from the capture tool, and type sizes from the build. If a value was not measured, say so or leave it out.
4. Never let a default decide. Framework blue, library gray, stock spacing, and template shadows are decisions made by someone else. If one survives, it survives because the specimen sheet chose it.
5. Keep the accent and the signature detail scarce. Their value comes from repetition in a few places, not coverage everywhere.
6. Check rights before building, not after. Every asset in the build is owned, licensed, public domain, or made for the page, and the specimen sheet says which.
7. If the references cannot support the brief, say so and gather better references rather than building a weaker page on schedule.