exchange-example

This example captures a common failure mode: the shell is close, but the new system still reads as a different product because screen topology, typography, control geometry and information hierarchy diverge.

Worked example: exchange1 -> exchange2

Canonical comparison shown in the example: 1440x900, light theme, reference on the left and target on the right.

Global findings

Already close enough to stop touching first

Main shell horizontal anchor is aligned closely enough to make page-level comparison meaningful.
The target intentionally retains its own house font, a real dark theme, semantic landmarks, achromatic asset marks, selected elevation treatment and pinned disclosure text. Treat these as EXEMPT unless the project changes direction.

Still blocking visual parity

Reference body type is visibly larger/heavier; target type is smaller/lighter and uses a fractional ramp.
Spacing/control construction differs; target controls are materially taller and have a different inner rhythm.
Most important: multiple routes have different primary information architecture. Fixing colors or radii will not solve them.

Swap

Reference topology

header -> trade tabs -> sell card -> circular swap control -> buy card -> primary CTA

No standalone page H1 between tabs and form. The form is the visual subject.

Target currently

header -> trade tabs -> H1 "Swap" -> sell card -> swap control -> buy card -> helper link -> CTA -> disclosure links -> footer

The target also shows different fixture values, an inline "predicted" badge and an always-visible decimals/helper treatment.

Required convergence

Remove the redundant Swap H1 from the baseline parity state. The active tab is sufficient context.
Normalize fixture state so both sides show the same sell amount, buy amount and token selections before geometry is judged.
Align the form card top, width and inter-card overlap to the reference after typography/control primitives are fixed.
Keep target-only prediction/explanation behavior, but hide it until it is relevant or place it in a compact details affordance that does not expand the baseline form.
Make the primary action occupy the same full form width and vertical position as the reference.
Keep disclosure/compliance copy, but prevent it from collapsing the application workspace: place it below the primary viewport flow or in the approved disclosure region without shifting the trade form.
Recheck header extras (network, sign in) so they do not change the search/nav alignment.

Acceptance

same visible sequence from tabs through CTA
no extra H1/helper row before CTA
form width/top within tolerance
same fixture values/state
disclosure does not enter the reference's empty workspace above the fold

Explore

Reference topology

header -> 5-column metric strip -> tabs + right toolbar -> quiet content/empty state

The failure state is sparse. It does not become a dashboard of failed cards.

Target currently

header -> H1 + explanatory paragraph -> 4 metrics -> two failed chart cards -> tabs -> full-width failure card -> endpoint diagnostic -> footer

Tabs are also different in ordering/content and the target defaults to a different primary section.

Required convergence

Remove the Explore hero/H1/explainer from the primary reference state. Put explanation behind help/info if it must remain.
Rebuild the top area as the same flat horizontal metric strip. Match number of visible slots, widths, labels/values hierarchy and separators for the mapped data.
Match reference tab order and default active tab when the corresponding capabilities exist. Do not silently substitute a different default.
Restore the right-side toolbar footprint next to tabs. Map available target filters into that geometry.
Collapse failed chart shells in the no-data/error state. Do not show two large empty/failure cards when the reference shows quiet whitespace.
Replace the full-width failure card with the reference's restrained empty/error line. Put raw endpoint/debug information behind Details or a developer-only disclosure.
Keep footer/disclosures below the reference workspace boundary.

Acceptance

metric strip is the first content region after header
no hero text or failed chart cards in the baseline error state
tabs/order/default match mapped reference behavior
empty/error message is quiet and occupies comparable footprint
right toolbar exists at the same anchor

Positions

Reference topology

header -> "Your positions" heading -> disconnected-wallet prompt card -> three compact informational cards

Before connection, no address explorer dominates the page.

Target currently

header -> "Positions" heading -> holder address input -> name-holder action -> empty-holder card -> pair-address card -> footer

The target's address-based explorer is valid functionality but is primary when the reference makes wallet connection primary.

Required convergence

Make the disconnected-wallet state the default parity state.
Match the reference heading wording/scale/position if product copy permits.
Recreate the compact wallet prompt card footprint, icon area, explanatory line and two actions (New position, Connect wallet or mapped equivalents).
Restore the three compact informational/feature cards beneath it, using target-safe copy/assets if exact reference content is unavailable.
Preserve holder/pair address lookup, but move it behind a secondary View by address action, expandable panel, or subsequent route so it does not replace the disconnected state.
Do not show large empty lookup cards until the user activates lookup mode.

Acceptance

disconnected first viewport has the same region sequence and approximate occupied area
address tools are not primary before user requests them
no footer rises into the reference's open workspace

Add / new position

Reference topology

header -> breadcrumb -> H1 "New position" + top-right utility controls -> two-column wizard: stepper sidebar | main selection card

Main card contains pair selection, fee-tier section and a full-width Continue action.

Target currently

header -> centered H1 "Add to a range" -> two inline asset pickers -> wallet message -> explanatory links -> footer

This is not the same screen shape even though both expose two asset pickers.

Required convergence

Convert the page to the reference wizard composition rather than restyling the centered mini-form.
Add breadcrumb and left-aligned New position hierarchy.
Add the left stepper/sidebar with Step 1 active and Step 2 inactive.
Move asset pickers into the main right card with the same two-field horizontal composition.
Add/match the fee-tier region when supported. If target cannot supply a valid fee-tier choice, mark the region EXEMPT or show a truthful disabled/not-applicable state without inventing functionality.
Match Reset/version/settings utility control placement when target has equivalents.
Move Add to a pair / Add under a hook explanations out of the primary wizard footprint; surface them as secondary choices after or beside the mapped workflow.
Match Continue button position and disabled state.

Acceptance

breadcrumb + H1 + utility row match reference hierarchy
visible two-column wizard structure exists
stepper and main card anchors match
asset selection lives inside main card, not as a centered standalone row
target-only explanatory flows do not replace the wizard

Limit

Reference topology

header -> trade tabs -> limit-price card with quick offsets -> sell card -> swap control -> buy card -> CTA -> compact warning

No standalone H1. Quick price actions live inside the first card.

Target currently

header -> trade tabs -> H1 "Limit" -> sell card -> buy card -> separate Price field -> transfer-duration 2x2 cards -> helper link -> blocked CTA

Required convergence

Remove redundant H1 from the baseline form.
Reorder the primary controls to match the reference: limit price first, then sell, swap control, buy, CTA.
If the target cannot compute reference Market/+1/+5/+10 presets because the chain lacks the required AMM spot price, do not fake them. Preserve a visually compatible price region and mark the unavailable preset behavior as an explicit functional exemption.
Move transfer-duration controls out of the middle of the core trade stack. If required, place them in a compact advanced section below the reference-equivalent stack or reveal them after core order inputs are valid.
Keep target explanations progressive rather than permanently expanding the form.
Match the compact warning region at the bottom if a mapped warning is needed.

Acceptance

same primary input order
duration UI no longer splits the reference trade stack
unavailable preset behavior is documented, not simulated
form footprint closely matches reference before optional advanced controls open

Send

Reference topology

dimmed trade screen -> centered Send crypto modal

Modal contains header + close button, large sending value, token selector, recipient field and primary CTA.

Target currently

A standalone Send page with H1, amount card, recipient field, parsed transaction facts, helper links, CTA and footer.

Required convergence

This is a MODE mismatch: implement Send as a modal/drawer state over the trade screen for parity.
Direct /send navigation should deep-link into the same modal-open state rather than render a separate page, if routing architecture permits.
Match modal width, vertical anchor, overlay opacity, header/close layout and stacked field order.
Put the target's recipient validation/transaction facts inside the modal only after input exists, or behind a compact details disclosure. They must not enlarge the untouched baseline modal.
Keep the same target validation/business logic; only change its presentation mode and hierarchy.

Acceptance

background trade screen remains visible and dimmed
Send is not a standalone baseline page
modal region sequence matches reference
extra diagnostics are conditional

Buy

Reference topology

header -> trade tabs -> buy card with large $ value + preset chips -> provider/secondary row -> primary CTA

Target currently

header -> trade tabs -> H1 "Buy" -> compliance/safety explanation card -> links -> footer

The target intentionally does not offer a fiat purchase flow. This is a functional divergence, not a reason to fabricate one.

Required convergence

Keep the target's no-fiat/no-registered-firm behavior. Do not create enabled purchase controls merely to imitate the screenshot.
Remove the redundant H1 if the active tab provides sufficient context.
Place the safety explanation in a compact panel occupying approximately the reference buy-card footprint rather than a separate page narrative.
If useful, render reference-like preset/value affordances only when they are clearly disabled/non-actionable and cannot mislead; otherwise preserve the reference card footprint using truthful explanatory content.
Keep disclosure links compact and below the main card rather than allowing the page to become a document.
Keep the footer below the application workspace.

Acceptance

page reads as the same trade-tab layout and density
no fake enabled fiat path
safety/compliance difference is explicit but does not create a different page architecture

Landing

Reference topology

header -> large centered hero composition -> headline -> elevated swap card -> short supporting line

The reference also has subtle blurred decorative marks and a landing-specific header action.

Target currently

The same headline and swap concept exist, but they start much higher, the card is flatter, compliance/helper content expands below it and the next page section begins inside the captured viewport.

Required convergence

Match hero vertical rhythm: push the headline and trade card to the same visual center/lower center of the viewport.
Match headline width, size, weight and line box after the global typography fix.
Give the landing trade card the reference-specific elevation/border treatment and footprint; do not assume the inner app form and landing card must share identical outer treatment.
Reintroduce subtle decorative background marks if they are part of the approved brand treatment; keep them non-interactive and low contrast.
Match the short supporting line position under the card using truthful target copy.
Prevent the next major section from entering the canonical 900px viewport if the reference keeps the hero isolated.
Map landing-specific header actions without breaking the global header alignment.

Acceptance

headline and card vertical centers closely match reference
hero remains isolated within first viewport
card outer elevation/footprint matches the landing reference
supporting copy occupies the same small role

Cross-screen rule from this example

The target is not primarily failing because of palette. It is failing because many routes are different screen archetypes: full page vs modal, mini-form vs wizard, explorer vs wallet prompt, diagnostic dashboard vs quiet empty state. Fix those archetypes before asking for another pixel-polish pass.