store.sgit.aiDESIGN SYSTEM / 01
Produced with model assistance. Source disclosure ↗

DESIGN BRIEF V1 · 16 SEPTEMBER 2026

One vocabulary.
Every state.

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.

390 / 1200Exact layout widths · scaled previews

Component sheet only. Buy controls are demonstrations. No order is created.

01

Button

Primary · secondary · disabled with a reason · destructive

button
390pxPhone · first

PRIMARY

SECONDARY

DISABLED

The payment link has not been issued yet.

DESTRUCTIVE

Actions are component demonstrations. No order or payment is created.

1200pxDesktop · scaled to fit

PRIMARY

SECONDARY

DISABLED

The payment link has not been issued yet.

DESTRUCTIVE

Actions are component demonstrations. No order or payment is created.

Implementation note

Primary 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.

02

Price block

Single · deposit split · free · from £N

price
390pxPhone · first

SINGLE

£50

1 to 2 days from your payment

DEPOSIT · LEVEL 03

£500

£100 now · £400 on delivery

1 to 3 days from your reply

DEPOSIT · LEVEL 04

£1,500

£300 now · £1,200 on delivery

1 to 5 days from your reply

FREE

Free

Public templates, ready to read.

FROM

From £500

1 to 3 days from your reply at level 03.

1200pxDesktop · scaled to fit

SINGLE

£50

1 to 2 days from your payment

DEPOSIT · LEVEL 03

£500

£100 now · £400 on delivery

1 to 3 days from your reply

DEPOSIT · LEVEL 04

£1,500

£300 now · £1,200 on delivery

1 to 5 days from your reply

FREE

Free

Public templates, ready to read.

FROM

From £500

1 to 3 days from your reply at level 03.

Implementation note

All 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.

03

Offer card

Levels 01–04 · free · leading · quieted · add-on

offer-card
390pxPhone · first
LEVEL 01Immediately

[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.
LEVEL 021 to 2 days

[PLACEHOLDER]

A working vault

For people who want their own working copy.

£50

1 to 2 days from your payment

Clone, change and version the material in a vault you hold the keys to.

exists and runsDesign specimen · short name awaits owner wording.
LEVEL 031 to 3 days

[PLACEHOLDER]

Corrected for your situation

For people who want the correcting done for them.

£500

£100 now · £400 on delivery

1 to 3 days from your reply

A named security professional corrects the mandate against your details and signs it off.

delivered by a personDesign specimen · short name awaits owner wording.
LEVEL 041 to 5 days

[PLACEHOLDER]

Two sessions and a custom vault

For people who need to discuss the work.

£1,500

£300 now · £1,200 on delivery

1 to 5 days from your reply

Two half-hour sessions, a custom vault, and professional sign-off.

delivered by a personDesign specimen · short name awaits owner wording.

AUDIENCE EMPHASIS · SAME ANATOMY, SAME PRICES

LEVEL 031 to 3 days

LEADING IN THIS AUDIENCE VIEW

[PLACEHOLDER]

Corrected for your situation

For people who want the correcting done for them.

£500

£100 now · £400 on delivery

1 to 3 days from your reply

A named security professional corrects the mandate against your details and signs it off.

delivered by a personDesign specimen · short name awaits owner wording.
LEVEL 01Immediately

[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.

FREE AND ADD-ON

Public templates

Read the starting material before buying.

Free

exists and runsRead a template ↗

ADD-ON

[PLACEHOLDER]

[PLACEHOLDER] Add-on name and precise deliverable.

[PLACEHOLDER]

[PLACEHOLDER] Delivery estimate and clock.

does not exist yet

Offer terms and price must be supplied.

1200pxDesktop · scaled to fit
LEVEL 01Immediately

[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.
LEVEL 021 to 2 days

[PLACEHOLDER]

A working vault

For people who want their own working copy.

£50

1 to 2 days from your payment

Clone, change and version the material in a vault you hold the keys to.

exists and runsDesign specimen · short name awaits owner wording.
LEVEL 031 to 3 days

[PLACEHOLDER]

Corrected for your situation

For people who want the correcting done for them.

£500

£100 now · £400 on delivery

1 to 3 days from your reply

A named security professional corrects the mandate against your details and signs it off.

delivered by a personDesign specimen · short name awaits owner wording.
LEVEL 041 to 5 days

[PLACEHOLDER]

Two sessions and a custom vault

For people who need to discuss the work.

£1,500

£300 now · £1,200 on delivery

1 to 5 days from your reply

Two half-hour sessions, a custom vault, and professional sign-off.

delivered by a personDesign specimen · short name awaits owner wording.

AUDIENCE EMPHASIS · SAME ANATOMY, SAME PRICES

LEVEL 031 to 3 days

LEADING IN THIS AUDIENCE VIEW

[PLACEHOLDER]

Corrected for your situation

For people who want the correcting done for them.

£500

£100 now · £400 on delivery

1 to 3 days from your reply

A named security professional corrects the mandate against your details and signs it off.

delivered by a personDesign specimen · short name awaits owner wording.
LEVEL 01Immediately

[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.

FREE AND ADD-ON

Public templates

Read the starting material before buying.

Free

exists and runsRead a template ↗

ADD-ON

[PLACEHOLDER]

[PLACEHOLDER] Add-on name and precise deliverable.

[PLACEHOLDER]

[PLACEHOLDER] Delivery estimate and clock.

does not exist yet

Offer terms and price must be supplied.

Implementation note

Short 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.

04

Claim chip

All ten states · links to source records

claim-chip
390pxPhone · first
exists and runs

Built, and it runs today.

exists
measured

Measured by our own pipeline on a named workload and date.

measured
read, not run

Read from a published source on this date. Never executed by us.

docs
projected

Arithmetic, not an invoice. The workings are shown.

projected
specified, not built

A specification. The thing it specifies does not exist yet.

spec
delivered by a person

A named security professional does this work and signs it off.

person
built, not located

It was built. It has not been found since; nothing here promises it.

unlocated
a booking, not a download

What is bought is a person’s time, not a file.

booking
part exists

One half runs. The half carrying the guarantee does not.

partial
does not exist yet

It does not exist. It is listed so nobody proposes it as new.

absent
1200pxDesktop · scaled to fit
exists and runs

Built, and it runs today.

exists
measured

Measured by our own pipeline on a named workload and date.

measured
read, not run

Read from a published source on this date. Never executed by us.

docs
projected

Arithmetic, not an invoice. The workings are shown.

projected
specified, not built

A specification. The thing it specifies does not exist yet.

spec
delivered by a person

A named security professional does this work and signs it off.

person
built, not located

It was built. It has not been found since; nothing here promises it.

unlocated
a booking, not a download

What is bought is a person’s time, not a file.

booking
part exists

One half runs. The half carrying the guarantee does not.

partial
does not exist yet

It does not exist. It is listed so nobody proposes it as new.

absent
Implementation note

Only “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.

05

Persona door

Five audiences · current · compact phone arrangement

persona-door
390pxPhone · first

Selected: Founder. All four levels remain available.

1200pxDesktop · scaled to fit

Selected: Founder. All four levels remain available.

Implementation note

Five 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.

06

Application chip

Fifteen applications · catch-all · from £500 · selected

app-chip
390pxPhone · first
Something else — from £500 ↗
Show the other application shapes

Selected: Claude Code on the web

1200pxDesktop · scaled to fit
Something else — from £500 ↗
Show the other application shapes

Selected: Claude Code on the web

Implementation note

The 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.

07

Trust strip item

Linked claims · four across · two by two

trust-item
Implementation note

Every 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.

08

Media frame

Real screenshot + caption · labelled empty · carousel · expanded

media-frame
390pxPhone · first

REAL SOURCE CAPTURE

Existing store catalogue screenshot, supplied by the live product prototype
Existing catalogue capture from the product prototype. Historical source image, not a new product screenshot.

EMPTY FRAME

[PLACEHOLDER]Screenshot not taken yet

The vault open in its own app — grant, mandate and delta.

CAROUSEL · BUTTONS AND NUMBERED POSITION

Expanded state specimen
Existing store catalogue screenshot, supplied by the live product prototype
Existing catalogue capture from the product prototype. Historical source image, not a new product screenshot.
1200pxDesktop · scaled to fit

REAL SOURCE CAPTURE

Existing store catalogue screenshot, supplied by the live product prototype
Existing catalogue capture from the product prototype. Historical source image, not a new product screenshot.

EMPTY FRAME

[PLACEHOLDER]Screenshot not taken yet

The vault open in its own app — grant, mandate and delta.

CAROUSEL · BUTTONS AND NUMBERED POSITION

Expanded state specimen
Existing store catalogue screenshot, supplied by the live product prototype
Existing catalogue capture from the product prototype. Historical source image, not a new product screenshot.
Implementation note

One 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.

09

Specification row

Plain · with claim chip · phone layout

spec-row
390pxPhone · first
Product code
ABP-T2
What it is
One vault, licensed to you
Delivery estimate
1 to 2 days from your payment
Formats
Markdown and JSON
Availability of templates
Fifteen published application shapes exists and runs
1200pxDesktop · scaled to fit
Product code
ABP-T2
What it is
One vault, licensed to you
Delivery estimate
1 to 2 days from your payment
Formats
Markdown and JSON
Availability of templates
Fifteen published application shapes exists and runs
Implementation note

Label 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.

10

Disclosure strip

Desktop two lines · phone one line + link

disclosure
390pxPhone · first
Produced with model assistance. Outputs are model generated and marked as such.Produced with model assistance.Read more ↗
MAIN CONTENT BEGINS BELOW THE DISCLOSURE
1200pxDesktop · scaled to fit
Produced with model assistance. Outputs are model generated and marked as such.Produced with model assistance.Read more ↗
MAIN CONTENT BEGINS BELOW THE DISCLOSURE
Implementation note

The 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.

11

Version badge

Current site build · console

version-badge
390pxPhone · first

CURRENT SOURCE BUILD

v0.3.11

Source site version observed while preparing this sheet.

CONSOLE

Store consolev0.3.11

Design revision 01 · not a new store release.

1200pxDesktop · scaled to fit

CURRENT SOURCE BUILD

v0.3.11

Source site version observed while preparing this sheet.

CONSOLE

Store consolev0.3.11

Design revision 01 · not a new store release.

Implementation note

Source 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.

12

Section header

Right action · centred · phone · long/short hero copy

section-head
390pxPhone · first

SHORT HEADLINE / ACTION RIGHT

AGENT BEHAVIOUR POLICIES

Powerful agents.
Clear boundaries.

What it can do, what you authorised, and the gap between them.

Compare levels ↗

LONG HEADLINE / CENTRED

AGENT BEHAVIOUR POLICIES

Every agent needs a licence to operate

What it can do, what you authorised, and the gap between them.

1200pxDesktop · scaled to fit

SHORT HEADLINE / ACTION RIGHT

AGENT BEHAVIOUR POLICIES

Powerful agents.
Clear boundaries.

What it can do, what you authorised, and the gap between them.

Compare levels ↗

LONG HEADLINE / CENTRED

AGENT BEHAVIOUR POLICIES

Every agent needs a licence to operate

What it can do, what you authorised, and the gap between them.

Implementation note

Both 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.

13

Vault frame

Loading · open · example · labelled · failed

vault-embed
390pxPhone · first

LOADING

Opening vault…

Loading-state specimen. No connection is opened.

Vault Read view
Loading…

OPEN

Your vault

[PLACEHOLDER] The buyer’s vault, using their actual read key.

Vault Read view
[PLACEHOLDER] Embedded vault surface

EXAMPLE

Published example — this is not your vault.

Your own vault is not ready yet. This example shows the material while yours is prepared.

Vault Read view
[PLACEHOLDER] Embedded vault surface

LABELLED

Example: [PLACEHOLDER]

[PLACEHOLDER] Application name and published source of this example.

Vault Read view
[PLACEHOLDER] Embedded vault surface

FAILED

The vault could not be opened.

[PLACEHOLDER] An actionable error from the vault reader. Keep next steps and the receipt accessible.

Vault Read view
Could not load
1200pxDesktop · scaled to fit

LOADING

Opening vault…

Loading-state specimen. No connection is opened.

Vault Read view
Loading…

OPEN

Your vault

[PLACEHOLDER] The buyer’s vault, using their actual read key.

Vault Read view
[PLACEHOLDER] Embedded vault surface

EXAMPLE

Published example — this is not your vault.

Your own vault is not ready yet. This example shows the material while yours is prepared.

Vault Read view
[PLACEHOLDER] Embedded vault surface

LABELLED

Example: [PLACEHOLDER]

[PLACEHOLDER] Application name and published source of this example.

Vault Read view
[PLACEHOLDER] Embedded vault surface

FAILED

The vault could not be opened.

[PLACEHOLDER] An actionable error from the vault reader. Keep next steps and the receipt accessible.

Vault Read view
Could not load
Implementation note

All 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.

14

Reviews

No reviews yet · one review · several

review-empty
390pxPhone · first

REVIEWS

No reviews yet.

When reviews are available, they will appear here with a date and an attributable source.

ONE REVIEW · STRUCTURAL SAMPLE ONLY

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

SEVERAL · STRUCTURAL SAMPLE ONLY

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

1200pxDesktop · scaled to fit

REVIEWS

No reviews yet.

When reviews are available, they will appear here with a date and an attributable source.

ONE REVIEW · STRUCTURAL SAMPLE ONLY

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

SEVERAL · STRUCTURAL SAMPLE ONLY

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

LAYOUT SAMPLE · NOT A CUSTOMER REVIEW

[PLACEHOLDER] Review heading

[PLACEHOLDER] Actual reviewer text.

[PLACEHOLDER] Attributable name · date · source link

Implementation note

No stars, invented names or testimonial wording. Future populated states show field labels only and are marked as layout samples on their face.

15

Edition switcher

Five audiences · selected · same SKU · phone

edition-switch
390pxPhone · first

For a founder

You need the material ready for the conversation about your deployment.

ABP-T2£501 to 2 days from your payment

Editorial sample. Switching the argument never changes the product, price or delivery.

1200pxDesktop · scaled to fit

For a founder

You need the material ready for the conversation about your deployment.

ABP-T2£501 to 2 days from your payment

Editorial sample. Switching the argument never changes the product, price or delivery.

Implementation note

A 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.

16

Callout

Ruling · caveat · hold · example

callout
390pxPhone · first
1200pxDesktop · scaled to fit
Implementation note

Each type uses a visible label, a symbol and a different edge treatment. Colour reinforces meaning; it is not the only signal.

18

Comparison table

Five offer columns · row groups · yes / no / qualified · phone

table
390pxPhone · first
Five options · every paid level beside the free starting point
What changesFreeFreeLevel 01£10Level 02£50Level 03£500Level 04£1,500
What you get
Behaviour policy, grant, mandate and delta✓ Yes✓ Yes✓ Yes✓ Yes✓ Yes
Packaged downloadTake the files yourself✓ Yes✓ Yes✓ Yes✓ Yes
A vault you hold the keys to— No— No✓ Yes✓ Yes✓ Yes
Your own history and a read key— No— No✓ Yes✓ Yes✓ Yes
Public key removed— No— No✓ Yes✓ Yes✓ Yes
Whose work it is
Mandate corrected for your situation— No— No— No✓ Yes✓ Yes
Named professional does the work— No— No— No✓ Yes✓ Yes
Professional sign-off— No— No— NoYes — per brief✓ Yes
Time together on a call— No— No— No— NoTwo half hours
What you may do with it
LicenceCC BY · attributeCommercial, to youCommercial, to youCommercial, to youCommercial, to you
Client work without attribution— No✓ Yes✓ Yes✓ Yes✓ Yes
Name on the licence— No— No✓ Yes✓ Yes✓ Yes
When it arrives
DeliveryNowImmediately from payment1 to 2 days from payment1 to 3 days from your reply1 to 5 days from your reply
PaymentNothing to payIn fullIn fullA fifth now; rest on deliveryA fifth now; rest on delivery

FIRST OPTION

SECOND OPTION

Free · FreeLevel 02 · £50

What you get

Behaviour policy, grant, mandate and delta

✓ Yes✓ Yes

Packaged download

Take the files yourself✓ Yes

A vault you hold the keys to

— No✓ Yes

Your own history and a read key

— No✓ Yes

Public key removed

— No✓ Yes

Whose work it is

Mandate corrected for your situation

— No— No

Named professional does the work

— No— No

Professional sign-off

— No— No

Time together on a call

— No— No

What you may do with it

Licence

CC BY · attributeCommercial, to you

Client work without attribution

— No✓ Yes

Name on the licence

— No✓ Yes

When it arrives

Delivery

Now1 to 2 days from payment

Payment

Nothing to payIn full
1200pxDesktop · scaled to fit
Five options · every paid level beside the free starting point
What changesFreeFreeLevel 01£10Level 02£50Level 03£500Level 04£1,500
What you get
Behaviour policy, grant, mandate and delta✓ Yes✓ Yes✓ Yes✓ Yes✓ Yes
Packaged downloadTake the files yourself✓ Yes✓ Yes✓ Yes✓ Yes
A vault you hold the keys to— No— No✓ Yes✓ Yes✓ Yes
Your own history and a read key— No— No✓ Yes✓ Yes✓ Yes
Public key removed— No— No✓ Yes✓ Yes✓ Yes
Whose work it is
Mandate corrected for your situation— No— No— No✓ Yes✓ Yes
Named professional does the work— No— No— No✓ Yes✓ Yes
Professional sign-off— No— No— NoYes — per brief✓ Yes
Time together on a call— No— No— No— NoTwo half hours
What you may do with it
LicenceCC BY · attributeCommercial, to youCommercial, to youCommercial, to youCommercial, to you
Client work without attribution— No✓ Yes✓ Yes✓ Yes✓ Yes
Name on the licence— No— No✓ Yes✓ Yes✓ Yes
When it arrives
DeliveryNowImmediately from payment1 to 2 days from payment1 to 3 days from your reply1 to 5 days from your reply
PaymentNothing to payIn fullIn fullA fifth now; rest on deliveryA fifth now; rest on delivery

FIRST OPTION

SECOND OPTION

Free · FreeLevel 02 · £50

What you get

Behaviour policy, grant, mandate and delta

✓ Yes✓ Yes

Packaged download

Take the files yourself✓ Yes

A vault you hold the keys to

— No✓ Yes

Your own history and a read key

— No✓ Yes

Public key removed

— No✓ Yes

Whose work it is

Mandate corrected for your situation

— No— No

Named professional does the work

— No— No

Professional sign-off

— No— No

Time together on a call

— No— No

What you may do with it

Licence

CC BY · attributeCommercial, to you

Client work without attribution

— No✓ Yes

Name on the licence

— No✓ Yes

When it arrives

Delivery

Now1 to 2 days from payment

Payment

Nothing to payIn full
Implementation note

Desktop 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.

A

Token inventory

All supplied tokens. No extra colour or font tokens.

TokenValue 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
--sansui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
--serifui-serif,Georgia,"Times New Roman",serif
--monoui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace

Literal layout values

The brief supplies colours and font stacks, not a spacing scale. These values are literal CSS dimensions, not new tokens.

  • Viewport widths: 390px and 1200px. Component breakpoint: 600px.
  • Prices: 42px. Hero specimens: 40px phone / 72px desktop.
  • Body: 16px. Component labels and ordinary controls: 14px minimum. Quiet metadata: 12–13px.
  • Minimum control height: 44px. Borders: 1px, 2px, or 3px. Radii: 4px, 6px, 8px, 12px, and pill.
  • Spacing uses 4, 6, 8, 10, 12, 14, 16, 18, 20, 24, 28, 32, 40, 48 and 64px. The full HTML is the definitive value inventory.

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.

B

Handoff & decisions

Plain HTML, CSS and a small, explicit interaction layer.

What is included

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 ↓

Behaviour

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.

Source differences

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.

Still to supply

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.

Changes from the brief

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.

Checks and limits

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.

Component inspection

Design specimen