Design system · wireframes

Contrast factors, then freeze

Enough options to see which variables matter. Not a beauty contest. Not a one-shot mockup.

Method owner: ux-shape-experience factor contrast. Live loop specimen for design-system work.

Frozen brief

Same person, job, and copy in every option

Change factors only. Do not rewrite the claim to make an option look clever.

Person

Designer or engineer choosing how to start a public page

Job

Compare enough composition options to freeze the factors that matter

Appetite

One focused session; no new tokens or components

No-gos

Do not invent a second visual identity
Do not pick a winner by taste alone
Do not change the claim or primary action copy between options

Factor matrix

Which option changes which variable

Baseline A holds all factors. B–D each vary one or two named factors.

Option
Option A
Primary-action placement
baseline
Evidence beside claim vs below
baseline
Density (compact vs airy)
baseline
Navigation scent (list vs grouped)
baseline
Option
Option B
Primary-action placement
varies
Evidence beside claim vs below
fixed
Density (compact vs airy)
fixed
Navigation scent (list vs grouped)
fixed
Option
Option C
Primary-action placement
fixed
Evidence beside claim vs below
varies
Density (compact vs airy)
fixed
Navigation scent (list vs grouped)
fixed
Option
Option D
Primary-action placement
fixed
Evidence beside claim vs below
fixed
Density (compact vs airy)
varies
Navigation scent (list vs grouped)
varies

Factor contrast matrix for the four wireframe options.
Option	Primary-action placement	Evidence beside claim vs below	Density (compact vs airy)	Navigation scent (list vs grouped)
Option A	baseline	baseline	baseline	baseline
Option B	varies	fixed	fixed	fixed
Option C	fixed	varies	fixed	fixed
Option D	fixed	fixed	varies	varies

Options A–D

Same claim, different factors

Built from local design-system primitives only.

Option A

Baseline — claim, evidence below, airy list

Varies: none (baseline)

Option A

Reuse an existing page pattern before inventing a new layout.

Open template catalogue

Related routes

Reference: action after claim, evidence below, airy, list scent

Option B

Action top-right (placement factor)

Varies: Primary-action placement

Open template catalogue

Option B

Reuse an existing page pattern before inventing a new layout.

Related routes

Same evidence-below, airy, list as A

Option C

Evidence beside claim (evidence factor)

Varies: Evidence beside claim vs below

Option C

Reuse an existing page pattern before inventing a new layout.

Open template catalogue

Related routes

Same after-claim action, airy, list as A

Option D

Compact + grouped scent (density + nav)

Varies: Density (compact vs airy); Navigation scent (list vs grouped)

Option D

Reuse an existing page pattern before inventing a new layout.

Open template catalogue

Related routes

Same after-claim action and evidence-below as A

Human decision

Freeze what mattered, then tighten

Fill this after comparing the options. Agents must not invent the answer.

Factor that changed judgment

(human fills: e.g. evidence beside claim reduced search cost)

Freeze for next round

(human fills: locked factor values)

Still open

(human fills: remaining factors for the tighter prompt)

Next move

Return to ux-shape-experience with the freeze list, then ux-write-interface → ux-compose-interface → craft only if hierarchy still needs work.