distinctive-by-design

name	distinctive-by-design
description	Use when a UI, website, dashboard, deck, or rendered artefact needs one defensible visual signature before high-fidelity build. Do not use for detailed token production or final QA; route those to the relevant design-system or audit skill after direction is chosen.
metadata	{"portable":true,"category":"04-web-and-ui-design","compatible_with":["claude-code","codex"]}

Distinctive By Design

Acknowledgement: Shared by Peter Bamuhigire, techguypeter.com.

The engine's soul skill. The Mission is blunt: the moat is looking human-made. Sameness is free and worthless; deliberate, crafted distinctiveness is what sells. This skill is the master designer's pre-flight — the moves you make before the first line of markup so the finished thing could not have fallen out of a template.

Use When

• You are about to build, theme, or restyle any rendered surface: a website, landing page, web/app UI screen, dashboard, marketing page, or a slide/document with a visual identity.
• A new project is starting and the "default look" hasn't been decided — the moment of maximum leverage, before the convergent mean sets in.
• You catch yourself reaching for the safe, generic version "just to get something on screen."
• A draft already exists but reads as templated and you need to author a real point of view into it.

Do Not Use When

• The task is auditing an already-built artifact for slop tells — use visual-product-slop-audit (this skill is the proactive twin; that one is the retrospective).
• The only decision in front of you is the typeface pairing — go straight to 01-typography-and-fonts/font-selection-and-pairing (then return here to set the layout idea).
• A binding client brand system already dictates type, colour, and layout — honour it, record it, and apply only the craft-detail and focal-point steps that don't conflict.

Required Inputs

Input	Source	Evidence
Audience, brand position, and desired response	Approved brief and brand owner	Specific positioning words and exclusions
Content and functional constraints	Product/content owners	Representative real content and critical tasks
Existing brand assets and licence limits	Asset library and licence records	Available type, image, and motif rights

• Artifact + context + audience. What is it, who reads it, and what is the one feeling it should leave? ("authoritative editorial," "developer tool that respects my time," "a product that feels confident and a little daring.")
• The real content. At least the genuine headline, the genuine first paragraph, and the genuine primary action. You cannot design distinctiveness around lorem ipsum — placeholder text produces placeholder design.
• One reference of human authority you will pair against (a foundry specimen, a named designer's system, a page from the design literature) — never an AI tool's recommendation.

Workflow

Establish the specific product context and identify the default-looking decisions before choosing the smallest authored intervention that changes the product's visual signature.

1. Commit to ONE strong distinctive idea — then subordinate everything to it

Pick a single organising decision and let it govern the whole artifact. Exactly one of:

• A signature typeface carrying the personality (display face that means something here), paired per doctrine/references/pairing-principles.md — cross categories, contrast weight extremes, match x-heights, never one font for everything.
• An unexpected layout — break the symmetric centre. An off-centre hero, a deliberate diagonal, an asymmetric two-column split where the content column is the narrow one, a grid the eye can't predict.
• A custom motif — a repeating shape, rule, marker, or graphic device that recurs and becomes the artifact's fingerprint (a hand-considered divider, a bracket system, a numbering style).
• A real photographic or illustrative point of view — one consistent, authored image language with a stated rule, never stock-grab + AI-fill collage. (Reject every visual tell in doctrine/references/ai-slop-taxonomy.md: waxy skin, melted backgrounds, gibberish signage, warped logos, uncanny faces.)

Restraint plus this one strong choice beats five hedged safe ones. The doctrine is explicit: when two options are equally clean, prefer the one that looks authored.

2. Use real extremes — weight, size, space

Timidity is the slop signature. The mid-weight, near-uniform, evenly-padded page reads as machine-default.

• Weight: push extremes — 100/200 against 800/900, never 400 against 600 (doctrine/references/pairing-principles.md §5).
• Size: make hierarchy obvious. A real jump from heading to body (ratio ≥ 1.25, often far more for a hero), not three sizes that are almost the same.
• Space: let one thing breathe and pack another. Generous, intentional whitespace around the focal point; deliberate density where it earns attention. Uniform padding everywhere is a tell.

3. Compose tension — asymmetry, a focal point, a path for the eye

• Establish one clear focal point. If everything shouts, nothing is heard.
• Introduce intentional asymmetry — balance by weight and contrast, not by centring everything. Vignelli's grids are rigorous because they place tension deliberately, not because they centre by default (doctrine/references/pairing-principles.md sources: Vignelli).
• Give the eye a path: where it lands, where it goes second, where the action sits. Design the sequence, don't leave it to a default flow.

4. Add the craft details that only a human bothers with

These are the fingerprints of skilled hands. Do at least three:

• Custom bullets / markers — not the browser disc; a considered glyph, rule, or numbered system tied to the motif.
• Considered empty, loading, and error states — real copy, in voice, not "No data."
• Micro-interactions with intent — a hover, a focus ring, a transition that has a reason and a consistent easing/duration (route motion through 08-motion-and-interaction/motion-design).
• Real content, never lorem — genuine headlines, genuine labels, genuine numbers.
• Optical adjustments — align to the eye, not the bounding box; correct the gaps the machine leaves equal but the eye reads as unequal.

5. State your ONE distinctive decision and WHY — before building

Write it down, out loud, before any markup:

"This artifact's distinctive decision is ___, because ___ (tied to THIS context/audience), grounded in ___ (named human design authority)."

The why must trace to human design authority — a foundry, a named designer, the design literature (Bonneville, Vignelli, Segall; doctrine/references/pairing-principles.md). The asymmetry rule is absolute: you may never justify a choice with "an AI tool recommends it." An AI tool's picks are exactly what the next wave of AI output converges on — adopting them launders slop one step removed. AI-vendor sources are admissible only as evidence of what to avoid (doctrine/design-doctrine.md §2). If a human-justified choice happens to coincide with an AI recommend-list, note the convergence risk — never treat the AI nod as endorsement.

6. Run the human-craft signature checklist, then build

Only after every box is checked do you write markup.

Human-Craft Signature Checklist (run every time, before building)

1. One distinctive idea named and committed — signature type / unexpected layout / custom motif / authored image POV — not a hedge of several half-decisions.
2. Decision stated with a contextual reason, grounded in named human design authority; zero reliance on "an AI tool suggests it."
3. Real weight extremes (100/200 vs 800/900), real size jumps, intentional space — no timid mid-weights, no near-uniform sizes, no uniform padding.
4. Intentional asymmetry and a single clear focal point with a designed eye-path — not centred-everything, not an even card grid.
5. At least three craft details present — custom markers, considered empty/error states, purposeful micro-interactions, optical alignment.
6. Real content throughout — no lorem ipsum, no "No data," no placeholder labels.
7. No convergent default present (see Anti-Patterns) — type, colour, layout, and badges all pass.
8. No slop visual tell from doctrine/references/ai-slop-taxonomy.md in any image or icon.

If any item cannot be satisfied (no real content yet, no authority to cite, no time to author a real choice), say so and ask — never silently ship the convergent default.

Decision Rules

Condition	Choice	Wrong-choice failure
Brand has a strong authentic asset	Make it the singular signature	Adding unrelated novelty dilutes recognition
Category demands trust and restraint	Distinguish through typography, proportion, and detail	Decorative spectacle undermines credibility
No premium asset is licensed	Use the named OFL baseline plus authored layout/motif	Unlicensed embedding creates legal and delivery risk

Capability Contract

• Must inspect brand/content/assets and compare at least two genuinely different directions; critique is read-only unless production is requested.
• May create in-scope concepts, but may not purchase, embed, publish, or claim brand approval without authority and licence evidence.

Degraded Mode

• If positioning or licence status is missing, stop final direction selection and return bounded options with open decisions.
• Without rendering, provide a written art-direction board marked unverified. Recover a generic result by removing defaults, strengthening one signature, and rerunning the comparison with real content.

Quality Standards

• One named idea, not a collage of novelties, survives across representative artefacts and accessibility constraints.
• Decision evidence records rejected directions, rationale, asset licences, and approval status.

Anti-Patterns

• Type: Inter, Geist, Roboto, or the "safe distinctive" escapes (Poppins, Montserrat, Space Grotesk) reached for reflexively; one font for headings, body, labels, and buttons.
• Colour: the indigo / purple-to-blue gradient, the same teal-on-dark SaaS palette, neon-on- near-black as a personality substitute.
• Surface: glassmorphism, frosted blur panels, and soft drop-shadows used as decoration with no information purpose.
• Layout: uniform rounded card grids, everything centred, hero-with-two-buttons, the three-feature-icon row — symmetry as a default rather than a choice.
• "AI" theatre: sparkle/AI badges, gradients, and chatbot bolt-ons used as decoration with no user benefit (doctrine/references/ai-slop-taxonomy.md §Product/interface tells).
• Process: designing around lorem ipsum; picking a look "to start" and never stating it; justifying any choice by an AI tool's recommendation (forbidden by the asymmetry rule).
• Timidity: hedging five safe choices instead of committing one strong one; mid-weights and near-identical sizes that erase hierarchy.

Outputs

Output	Consumer	Evidence and acceptance
Distinctive direction statement	Brand owner and design team	One signature, supporting type/layout/image choices, and explicit exclusions
Comparative concept evidence	Approver	Real-content variants show why the selected direction is recognisable and viable

• A written one-line distinctive-decision statement (what + why + human authority), produced before any markup.
• A completed human-craft signature checklist.
• A clear handoff to the build with the focal point, asymmetry, type pairing, motif/image rule, and the three+ craft details specified — so what gets built is authored, not defaulted.

Examples

• examples/before-after-distinctive.md — one real screen (the Cadence SaaS landing hero) taken from the convergent AI-slop default (Inter everywhere, indigo→blue gradient, centred uniform card grid, ✨ AI badge) to an authored version built on one stated distinctive decision + why (an asymmetric editorial split hero that shows the draft writing itself, set in Bricolage Grotesque, grounded in Vignelli), with the full human-craft signature checklist run against it. Read it to see the discipline applied end to end.

References

• doctrine/design-doctrine.md — the Mission ("the moat is looking human-made"), the five non-negotiables, and the sourcing-authority asymmetry rule (§2).
• doctrine/references/ai-slop-taxonomy.md — the visual, product, and interface slop tells to push away from.
• doctrine/references/pairing-principles.md — the human design authority (Bonneville, Vignelli, Segall) grounding type, weight extremes, contrast, and deliberate composition.
• Sibling skills: 01-typography-and-fonts/font-selection-and-pairing (the type decision), 00-cross-cutting-ops-qa-a11y/visual-product-slop-audit (the retrospective twin), 08-motion-and-interaction/motion-design (purposeful micro-interactions).