[PLACEHOLDER]
The pack, downloaded
For people who want the material.
£10
Immediately from your payment
Every file in the vault, downloaded by you.
exists and runsDesign specimen · short name awaits owner wording.DESIGN BRIEF V1 · 16 SEPTEMBER 2026
The store’s own palette, visible evidence and a shorter path to a decision. Phone first, with the same component shown at both requested widths.
Component sheet only. Buy controls are demonstrations. No order is created.
Primary · secondary · disabled with a reason · destructive
buttonPrimary buy action is drawn for the next release. The disabled state preserves today’s reason. Destructive actions require an explicit second confirmation; the demonstration opens one. Targets are at least 44px high.
Single · deposit split · free · from £N
priceAll prices are 42px at both widths. Deposit amounts are exact arithmetic from the brief: one fifth now and four fifths on delivery. “From £500” keeps the qualifying level and clock visible.
Levels 01–04 · free · leading · quieted · add-on
offer-cardShort product names remain [PLACEHOLDER], as requested; precise subtitles use the brief. Quiet cards retain full text contrast and clickable actions. The add-on has no invented price. Sign-off on both upper levels follows the brief; the live comparison currently differs at level 03.
All ten states · links to source records
claim-chipOnly “exists and runs” uses a solid green fill. Other states combine labels, symbols and border patterns. “Specified, not built” is dashed with a diamond; “part exists” has a split circle and double edge. Specimen links point to real records demonstrating each state, not to fabricated claims.
Five audiences · current · compact phone arrangement
persona-doorFive across on desktop. On a phone, two columns plus a full-width fifth button reduce the navigation to three rows. The role remains visible; the supporting sentence moves into a selected-role line. No offers are hidden.
Fifteen applications · catch-all · from £500 · selected
app-chipThe catch-all is always the sixth chip, never buried in the expanded catalogue. Names come from the live catalogue. Buttons demonstrate selection; the catch-all links to the existing tailored route.
Linked claims · four across · two by two
trust-itemEvery item links to the ledger. The four-level item opens the contiguous ledger records for the templates, vault build, correction and sessions, starting at the template record. The evidence for that item spans those four records.
Real screenshot + caption · labelled empty · carousel · expanded
media-frameOne real capture is embedded in this file. The three-slot carousel is a component specimen, not a replacement for the seven-slot product page. Empty frames name the work still needed. Expanded is shown inline and also opens through the carousel control. No imagery is generated or substituted.
Plain · with claim chip · phone layout
spec-rowLabel and value stay together. On phones long values wrap beneath their label rather than forcing a narrow column. Product facts are from the live prototype; no capacity or file count is invented.
Desktop two lines · phone one line + link
disclosureThe actual sheet also places its model-assistance strip before main. On the phone, the disclosure remains one line at normal text size with a visible expansion link; at enlarged text it may wrap. No claim of human review is made for this new design.
Current site build · console
version-badgeSource version is distinguished from design revision. The badge stays in the header or console, at readable metadata size. Production should insert its build value, not keep this captured version forever.
Right action · centred · phone · long/short hero copy
section-headBoth candidate headlines use the same anatomy; neither is declared the chosen copy. The action drops below the text on phones. The headline is 72px desktop and 40px phone, using the supplied serif family. Smaller section headings use the same structure at 32px and 28px.
Loading · open · example · labelled · failed
vault-embedAll frames are deliberately inert HTML specimens: no external iframe request and no guessed read key. The example warning is the first sentence, above the vault. Integration needs the supplied vault reader and real routing data; this sheet does not simulate access to a buyer’s vault.
No reviews yet · one review · several
review-emptyNo stars, invented names or testimonial wording. Future populated states show field labels only and are marked as layout samples on their face.
Five audiences · selected · same SKU · phone
edition-switchA small inline script changes only the audience heading and argument. Five wrapping buttons work without a select field. SKU, price and delivery sit outside the changing region. This is an explicit extension of “HTML and CSS” for demonstrable interaction; no framework is used.
Ruling · caveat · hold · example
calloutEach type uses a visible label, a symbol and a different edge treatment. Colour reinforces meaning; it is not the only signal.
Five offer columns · row groups · yes / no / qualified · phone
tableDesktop retains all fourteen rows in four groups, plus the feature-label column. Phone keeps two selected offers side by side under shared row labels; all five remain available through buttons, free first. No horizontal scroll is required for the phone table. Print uses all five offer columns. Level 03 sign-off follows the brief and is marked accordingly.
All supplied tokens. No extra colour or font tokens.
| Token | Value used |
|---|---|
--bg | #faf9f5 |
--panel | #ffffff |
--panel2 | #f2f0e9 |
--line | #e5e1d5 |
--line2 | #d5d0c2 |
--fg | #1c1d21 |
--dim | #5c5f66 |
--dim2 | #8a8d94 |
--ink | #34363c |
--accent | #0f766e |
--accent-dk | #115e59 |
--warm | #b45309 |
--green | #15803d |
--blue | #0369a1 |
--red | #b91c1c |
--sans | ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif |
--serif | ui-serif,Georgia,"Times New Roman",serif |
--mono | ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace |
The brief supplies colours and font stacks, not a spacing scale. These values are literal CSS dimensions, not new tokens.
The source screenshot retains its original pixels. It is content, not an added interface palette. Muted token --dim2 is reserved for decorative marks; ordinary text uses --dim or stronger.
Plain HTML, CSS and a small, explicit interaction layer.
All eighteen components and requested states, twice: actual 390px and 1200px layout containers. Inspect opens a specimen at its native width. No framework, dependencies or build step. The catalogue image is embedded, so the downloaded HTML opens offline.
Download the single HTML file ↓Inline JavaScript supports specimen scaling, button feedback, the edition switch, application and persona selection, carousel expansion, and pairwise comparison. It sends no requests and stores no data. Source links only leave the page when clicked. Vaults are inert frames.
The brief is authoritative for prices, delivery clocks and both upper levels being signed off. The live comparison only marks level 04 as signed off. The live disclosures also discourage a named individual beside a price, while the brief requests a professional’s name and face on upper-level screens; that needs an owner ruling when those screens are drawn.
Short offer names, add-on terms, current build value at implementation time, missing media, real reviews and vault routing data. The four-level trust item cites the four adjacent offer records, starting at the template claim. A dedicated summary claim would make that join more direct.
Phone comparison uses two chosen columns with every option reachable. Phone personas occupy three compact rows. Interactions use inline JavaScript. No other screens have been drawn: this is the component-first handoff. The top-level strip says model assisted without claiming a human has reviewed this new work.
Source checks cover component/state inventory, the supplied tokens, price arithmetic, forbidden fields, disclosure order and external request code. Browser rendering and assistive-technology testing remain implementation checks; no live conversion result is claimed.