Build one page called "Pattern lab" that demonstrates three interface
patterns, each in its own section with a short heading. Desktop width,
centred column, max 960px.
1. Forgiving format. Two date fields side by side, both labelled
"Departure date". The left one, captioned "Forgiving", accepts dashes,
dots or slashes and on blur rewrites the value as MM/DD/YYYY with a
small green check. The right one, captioned "Strict", only accepts
MM/DD/YYYY and shows a red error message for anything else. Prefill
both with 12-15-2026 so the difference shows on load, as if the user
had just left each field.
2. Honest checkout. Two order summaries side by side for the same $40
purchase. The left one, captioned "Dark pattern", has a pre-ticked
"Add protection plan $6.99" checkbox, a "Service fee $4.50" line that
looks like an afterthought, and a tiny grey "No thanks" link. The
right one, captioned "Honest", shows the full price up front, the
protection plan unticked, and no surprise fee.
3. One primary action. Two versions of the same "Invite teammates" card
side by side. The left one, captioned "Three equal buttons", has Send
invites, Copy link and Skip all styled the same. The right one,
captioned "One primary", has Send invites as the only filled button
and the other two quiet.
Style: editorial and light. Warm paper background, near-black ink, a
serif for headings, one cobalt blue accent, hairline borders, generous
white space.