A bare GET of b2bdev.pathpep.com/ redirects to /sign-in. That page
is the homepage for every logged-out distributor — the first and often only thing a prospective
B2B customer sees from Path. Reviewed against the live site, not a mockup.
“Sign in below to access our B2B platform.” at 28px.
Fails WCAG AA (4.5:1). Regulatory claims, unreadable.
And the cream fill beats the blue one on black.
Primary, secondary link, and catalog band.
Split into broken (works against the page's job) and brand-wrong (works, but isn't Path). Measurements are CSS px from 2x captures at a 1440 viewport.
The replacement sign-in gate is not strictly better. Three things the incumbent does that it drops:
Also fair: a perpetual light loop is the same crime as their rotating sphere at lower volume, and “Secured by Clerk” advertises our auth vendor to our own customers.
Black and white. One frame, four section rows, hairline rails running the full page height with crosshair ticks at every rail intersection.
72px. Outlined tilde 22px left; CATALOG · CONTACT right at 13px/600
uppercase. No theme toggle — a public front door doesn't ask a stranger to configure it.
min-height: calc(100svh - 72px - 56px). Grid 1.15fr / 480px, 96px gap.
Left: the proposition and the certification register. Right: the sign-in panel. The right column is a
fixed 480px, not a fraction, so the field measure is pinned at 400px at every viewport and
never stretches to 546.
Four flush cells sharing the frame's hairlines, no gaps:
120+ SKUs · SAME DAY BEFORE 12:00 ET · COA ON FILE, EVERY LOT ·
APPLY IN 2 MINUTES →. The fourth cell is a gatelink — the whole cell is the hit target.
That is how the apply route gets promoted out of a 13px link without becoming a second button
competing with sign-in. Replaces the “Browse Our Product Catalog” band.
Three flush cells (SHIPPING / CONTACT / LEGAL) plus a sub-row: the ~path wordmark
horizontal at 18px, copyright, REV stamp.
The real mark as the connector. Clerk's background is two static constructions — a hairline that
steps over the card, and flanking panels. We take the identical structural move and make the tilde
be the connector, stretched preserveAspectRatio="none" into a 100vw × 460px band
with vector-effect: non-scaling-stroke (non-negotiable pairing — without it the curve is
wrong in a way you feel before you can name). One shared vertical gradient fades both ends to zero, so
a contour can never clip a section rule. Three echo bands, six survey nodes, one benchmark crosshair
where the contour passes nearest the panel edge — so the panel reads as surveyed onto the terrain
rather than floating on it.
Two animations, zero loops. A single light runs the contour left→right once, 1800ms, then stops — and as its head passes each survey node, that node flips hollow to filled. The light isn't sweeping, it's taking readings. Never below 1100px, never twice in a session. Plus the standard blur-up entrance, capped at four children. After that the page is completely still. Clerk's page is a beautiful still; this is a beautiful still that arrives.
The H1 must be a claim, not an instruction — “Research-grade peptides, shipped the same day.” — with a deck that absorbs all three trust claims into readable 17px prose. Both lines route through the approved-copy library before shipping; “research-grade” and any FDA phrasing are compliance surface.
The floating scatter dies; the content survives as a certification register on the frame's own
hairlines — 01 / index, DM Mono label with a filled 8px square, 14px body at
--ink-2. Fix the missing period on U.S., hyphenate FDA-LISTED,
and drop “Green List” unless legal has cleared that exact phrase.
Zero blue. Primary is ink — white on #0c0c0c is 21:1, the highest-contrast object
obtainable, and it beats blue on raw attention. On an external surface the sanctioned brand
blue is indistinguishable from the incumbent blue being retired, so it can't read as an exception.
| Risk | Antidote |
|---|---|
| Clinical, not premium | All three antidotes are textural, never chromatic. Never
#000 — page #0c0c0c, panel #141414, so the black has depth.
Grain at 0.03 is the whole difference between “monochrome” and “unstyled”. The light ladder's
#f8f5ef is paper, not white. |
| Cold reads as untrustworthy for a health-adjacent buyer | Counter with specificity, not colour. A page that tells you exactly when it ships is warmer than a page with a gradient on it. |
| “Where did the design go?” | Demo the traverse. The one-shot light is the answer — the thing five decorations can't do and Clerk's static page doesn't do. |
| The traverse must land perfectly | CSS animation inside an SVG <mask>
does not repaint in Chromium; it must be SMIL. If it can't be flawless, ship fully static. A perfect
still beats a broken animation. |
| The apply-path move is a revenue risk | Instrument before and after. This is the one item where data outranks taste. |
| The AA trap in a greyscale ladder | Everything looks tasteful at low opacity, so it's
easier to fail by accident. Every claim, label, link and value rides --ink-2
or above. |