` fixed at `top: 62px`. ### Content - Header: "TESSEL" and "Secure checkout" with a lock icon. - Items: "Ridge stoneware bowl, set of 4" · "Oat glaze · 18 cm" · £96.00 (tan gradient thumb); "Fjord serving platter" · "Slate · 32 cm" · £48.00 (slate gradient thumb). - Totals: Subtotal £144.00 · Delivery (tracked, 2–3 days) £4.00 · Total £148.00. - Legends: "Contact", "Delivery address", "Payment". - Fields in order: Email · First name · Last name · Address ("House number and street") · Town or city · Postcode (UK pattern `[A-Za-z]{1,2}\d[A-Za-z\d]? ?\d[A-Za-z]{2}`) · Country (United Kingdom, Ireland, Netherlands, Denmark) · Phone "(for the courier)" optional. - Payment cards: "Debit or credit card — Visa, Mastercard, Amex" (chip CARD, default) · "Device wallet — Confirm with your fingerprint or face" (chip PAY) · "Pay by bank — Approve in your banking app" (chip BANK). - Card fields: Card number (`[\d ]{16,19}`), Expiry ("MM / YY", `(0[1-9]|1[0-2]) ?/ ?\d{2}`), Security code (`\d{3,4}`, maxlength 4). - Error messages: "Enter a valid email address", "Required", "Enter your street address", "Enter a UK postcode", "Enter the 16-digit card number", "MM / YY", "3 or 4 digits". - Bar: "Pay now" + "£148.00"; note "By paying you agree to Tessel's terms. Returns within 30 days." - Button states: "Processing", "Order placed · tap to reset". Toast: "n field(s) need(s) attention". ## Tokens ```css :root { /* colour — cool paper neutrals, terracotta accent, one error red */ --bg: #fafaf9; --surface: #ffffff; /* header, inputs, cards, bar */ --surface-2: #f4f4f2; /* scheme chips */ --line: #e4e3df; /* hairlines */ --line-strong: #c8c6bf; /* input + card borders */ --ink: #18181b; --ink-2: #5b5b60; /* labels, totals */ --ink-3: #8a8a90; /* meta, placeholders */ --accent: #c2410c; /* selected card, pay button */ --accent-2: #a3360a; /* pay hover */ --accent-ink: #ffffff; --accent-soft: #fdeee6; /* selected card fill */ --error: #b42318; --error-soft: #fdecea; --ok: #1f7a4d; /* valid border, done button */ /* type */ --font: "Public Sans", system-ui, sans-serif; /* layout */ --safe-top: 54px; --safe-bottom: 80px; --gutter: 16px; --input-h: 48px; --card-h: 56px; --r: 10px; /* inputs, cards, toast */ --r-sm: 6px; /* thumbnails */ --r-pill: 999px; /* pay button */ --shadow-bar: 0 -6px 20px rgba(24, 24, 27, .08); --ring-focus: 0 0 0 3px rgba(24, 24, 27, .10); --ring-error: 0 0 0 3px rgba(180, 35, 24, .15); /* motion */ --t-fast: 160ms; --t-layout: 280ms; --t-process: 1200ms; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |-------------------|-------------|-----:|-------:|------------:|---------:|-----------| | Body / inputs | Public Sans | 15px | 400 | 1.45 | 0 | sentence | | Brand | Public Sans | 14px | 700 | 1 | +0.14em | UPPERCASE | | Legend | Public Sans | 17px | 600 | 1.3 | −0.01em | sentence | | Field label | Public Sans | 13px | 500 | 1.3 | 0 | sentence | | Error message | Public Sans | 12px | 400 | 1.3 | 0 | sentence | | Summary row | Public Sans | 15px | 500 (total 600) | 1.3 | 0 | sentence | | Item name | Public Sans | 14px | 500 | 1.35 | 0 | sentence | | Item meta, note | Public Sans | 12px / 11px | 400 | 1.4 | 0 | sentence | | Scheme chip | Public Sans | 9px | 700 | 1 | +0.06em | UPPERCASE | | Pay button | Public Sans | 16px | 600 | 1 | 0 | sentence | All prices use `font-variant-numeric: tabular-nums`. ## Motion | Element | Trigger | Property | From → To | Duration | Easing | Notes | |----------------------|----------------------|-----------------------|---------------------------------|---------:|--------------|-------| | summary chevron | details toggle | rotate | 0 → 180° | 280ms | `--ease-out` | | | summary `.body` | open | opacity, translateY | 0, −4px → 1, 0 | 280ms | `--ease-out` | `@keyframes fade` | | input border/ring | focus | border-color, box-shadow | `--line-strong` → `--ink`, ring | 160ms | linear (colour) | | | `.msg` | field becomes invalid | opacity, translateY | 0, −4px → 1, 0 | 160ms | `--ease` | | | radio dot `::after` | checked | scale | 0 → 1 | 160ms | `--ease-out` | | | card border/fill | checked | border, background | `--line-strong` → `--accent`, white → `--accent-soft` | 160ms | linear | | | `#cardfields` | scheme = card | opacity, translateY | 0, −4px → 1, 0 | 280ms | `--ease-out` | display toggles first | | pay button | submit valid | background | `--accent` → `--ink` → `--ok` | 160ms each, 1200ms apart | linear | | | pay button | active | scale | 1 → .985 | 160ms | `--ease` | | | toast | invalid submit | opacity, translateY | 0, −12px → 1, 0 | 280ms | `--ease-out` | auto-hides after 2600ms | Reduced motion: all durations 1ms; the 1200ms processing delay stays (it is feedback, not decoration). ## States - **Input default:** 48px tall, 1px `--line-strong` border, `--surface` background, radius 10px. - **Input focus:** border `--ink`, `box-shadow: var(--ring-focus)`, no outline. - **Input invalid** (`.f.invalid`, `aria-invalid="true"`): border `--error`, background `--error-soft`, message shown; focus ring becomes `--ring-error`. - **Input valid with content** (`.f.valid`): border `--ok`. - **Radio card default / checked:** see Motion; checked adds `box-shadow: inset 0 0 0 1px var(--accent)` so the border reads as 2px without layout shift. - **Radio card focus-visible:** 2px `--accent` outline, 2px offset, applied to the label via `input:focus-visible + label`. - **Pay button:** default `--accent`; hover `--accent-2`; `.busy` → `--ink` and `pointer-events: none`; `.done` → `--ok`. - **Summary collapsed:** body removed from flow (native `

`), total still in the summary row. ## Accessibility - Every input has a visible ``; `placeholder` is never the only label. Fieldsets have `

`s. - Input attributes: email → `type=email inputmode=email autocomplete=email`; names → `autocomplete="shipping given-name" / "shipping family-name"`; address → `shipping address-line1`, `shipping address-level2`, `shipping postal-code`, `shipping country`; phone → `type=tel inputmode=tel autocomplete=tel`; card → `cc-number`, `cc-exp`, `cc-csc` with `inputmode=numeric`. - `novalidate` on the form so the native bubbles do not fire; validity is still read with `checkValidity()` and mirrored to `aria-invalid`. - Error messages are `role="alert"` spans that become visible when the field is invalid; they sit directly after the input in DOM order. - Payment radios are real `` in a `role="radiogroup"`; arrow keys move selection natively. - Toast uses `role="status" aria-live="polite"`. - The Pay button is `type="submit"` with `form="form"` so Enter in any field submits. - Hit targets: inputs 48px, radio cards 56px, Pay 52px, summary row 56px. - Contrast: `--ink-2` on white 6.9:1; `--ink-3` 3.9:1 used only for 11–12px meta and placeholders; `--accent-ink` on `--accent` 5.4:1; `--error` on `--error-soft` 6.2:1. ## Responsive rules - 390 (reference): two-column grid for name, city/postcode and expiry/CVC. - 360 wide: same grid; legend 16px; scheme chips shrink to 32×22. - ≥ 600: centre a 560px column; the bar keeps a full-width background but its button is capped at 560px and centred; `--safe-bottom: 0`. - Landscape (height < 500): the bar's note is hidden so the button plus 12px padding is the whole bar. ## Acceptance checklist - [ ] Order summary is a native `

`; its chevron rotates 180° over 280ms and the total stays visible when collapsed. - [ ] Every input carries the listed `type`, `inputmode` and `autocomplete` values; browser autofill populates the whole address. - [ ] Inputs are 48px tall with a 10px radius and show a 3px focus ring without an outline. - [ ] Blurring an empty required field marks it invalid (red border, soft red fill, 12px message with icon); typing a valid value clears it and turns the border green. - [ ] Selecting a payment card animates its radio dot (scale 0 → 1, 160ms) and fills the card with `#fdeee6` + accent border. - [ ] Card-number fields are shown only for the card scheme and lose `required` when hidden. - [ ] Submitting with errors shows a toast naming the count, focuses the first invalid field and scrolls it to centre. - [ ] Submitting valid data shows "Processing" on a `--ink` button for 1200ms, then "Order placed" on `--ok`. - [ ] Tapping the done button resets the form to its initial state. - [ ] The Pay bar is fixed at `bottom: 80px`, the main content has enough bottom padding (`80px + 92px`) that the last field can scroll clear of it. - [ ] Nothing fixed sits in the top 54px or bottom 80px; the toast starts at 62px. - [ ] Keyboard-only: Tab reaches every field, radio and the Pay button; focus is visible everywhere. ## Implementation notes **Validate only visible required fields** (hidden card fields must not block wallet or bank payments), and mark invalid only after blur or submit, never on first keystroke: ```js const fields = () => [...form.querySelectorAll('input[required]')].filter(i => i.offsetParent !== null); function check(i, show) { const ok = i.checkValidity(), f = i.closest('.f'); if (show || f.classList.contains('invalid')) f.classList.toggle('invalid', !ok); f.classList.toggle('valid', ok && i.value.length > 0); i.setAttribute('aria-invalid', String(!ok)); return ok; } form.addEventListener('focusout', e => { if (e.target.matches('input[required]')) check(e.target, true); }); form.addEventListener('input', e => { if (e.target.matches('input[required]')) check(e.target, false); }); ``` **Radio cards without extra JS.** Hide the input but keep it focusable, then style the sibling label from `:checked` and `:focus-visible`: ```css .card input { position: absolute; opacity: 0; width: 1px; height: 1px; } .card input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .card input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; } .card .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--t-fast) var(--ease-out); } .card input:checked + label .radio::after { transform: scale(1); } ``` **Toggle card fields' `required`** when the scheme changes, otherwise `checkValidity()` fails on hidden inputs: ```js form.addEventListener('change', e => { if (e.target.name !== 'pay') return; const on = e.target.value === 'card'; cardfields.classList.toggle('on', on); cardfields.querySelectorAll('input').forEach(i => i.required = on); }); ``` Common mistakes: using a `data:` SVG for the select chevron (blocked in strict CSP sandboxes; use an absolutely positioned inline SVG); `display:none` on the radio input (removes it from the tab order); forgetting `novalidate` so the browser's own bubbles appear over your inline messages; putting the Pay button outside the form without the `form` attribute. --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/mobile-one-page-checkout. Free to use in your products. Credit line: Designed using Design Lounge.*