Generative Assets · Industry demonstration 427
A fixed-scope security assessment practice in West Perth, invented for this demonstration. Its audience is an operations manager holding a supplier security questionnaire or an insurance renewal form, and the page has one job: tell them what it costs and how long it takes to find out where they stand. The whole build turns on publishing a fee in a trade that never publishes one, and refusing — in writing, beside that fee — to answer the three questions that are not ours to answer.
Eight tiles carrying the eight ASD Essential Eight control names. Each cycles in place → not sure → no, and each carries its state three ways at once — a ground colour, a glyph, and the word itself — so nobody has to see colour to read it. Two number fields, staff and sites, drive a fixed fee and a turnaround. A drawn band above the controls repeats the eight as columns whose height, fill, glyph and outline all move together; an unknown is drawn with a broken outline, which is the detail most people only notice on a second visit.
Money is held in whole cents and divided once at display. The base covers 20 people at one site; every person over 20 adds $45; every site after the first adds a flat $650; priority multiplies by 1.30 and halves the turnaround. Every figure the page prints at rest is an enumerated cell of check-w54.mjs, which runs 62/62 green.
| Scope | Fee | Turnaround |
|---|---|---|
| 20 staff, 1 site, standard — the floor | $1,850 | 10 working days |
| 12 staff, 1 site — the floor holds | $1,850 | 10 working days |
| 35 staff, 1 site | $2,525 | 10 working days |
| 35 staff, 2 sites — the rest state | $3,175 | 10 working days |
| the same job at priority | $4,127.50 | 5 working days |
| what priority actually costs | +$952.50 | — |
| 80 staff, 3 sites | $5,850 | 10 working days |
The priority tier is drawn at the same size, the same weight and the same width as the standard tier, with its own fee and its own turnaround, and the premium printed as a figure rather than a percentage. Underneath, the card prices the second site you might not need (a flat $650), the one-site version of the same job ($2,525), and the floor the fee stops falling to ($1,850). Then it argues against its own dearer product in one line: priority costs $952.50 to halve a wait we do not think you need.
Set seven or eight of the eight to in place and the card changes its own advice: we would not book you an assessment on these answers, with a button that ticks the “ring me, do not sell me” box on the enquiry form and scrolls you to it. Three unknowns or more and it says a not-sure is a question rather than a gap. Otherwise it counts the gaps and the unknowns separately and says the report prices both. Three states, three glyphs, three grounds — never colour alone.
This is the hardest site in the wave for it. Cyber security marketing runs on other people’s rules — an insurer’s underwriting terms, a maturity model, an Act of Parliament — and none of those are ours to state. The only externally-owned facts anywhere on the page are the eight ASD Essential Eight control names. Everything else is Keystone’s own fee, its own turnaround and its own method.
The spec was written so none of these figures were needed, which is the point: if a page needs an unverifiable number to work, the page is wrong, not the rule. What replaced the fear copy is arithmetic the business owns.
Cool graphite and navy, one pass green and one gap ochre. Deliberately not terminal-green-on-black — the hero has no padlock, no hooded figure and no threat counter, because the buyer is an operations manager doing paperwork, not a hacker. Every hex and every ratio below is quoted from the same row of the same contrast run; the light green and light ochre are dark-ground marks only and never appear on paper.
#F4F5F7Page ground. Body ink measures 16.32:1 on it.#E3E7ECCard ground. Body ink 14.34:1, secondary ink 6.27:1.#1B2733Buttons, sticky bar, footer. Paper reversed on it 13.9:1.#15181CBody. 13.67:1 on the done tile, 13.31:1 on the pending tile.#4B535DSecondary ink, 7.14:1 on paper. Paper, panel and the pending tile only.#0E5A3F“In place”. 7.54:1 on paper, 6.32:1 on the done tile.#7E4409“Gap”. 7.08:1 on paper, 6.06:1 on the gap tile.#D3E6DCMarks on it: green 4.09:1, ink 13.67:1.#F3E1CEMarks on it: ochre 4.29:1, ink 13.97:1.#DBDFE5The unknown. Note ink at 80 per cent blends to #3D4044, 7.79:1.#4FD1A07.92:1 on the band. A dark-ground mark only — 1.76:1 on paper.#E5A94A7.3:1 on the band. Dark-ground only — 1.9:1 on paper.#E8EBEFMap labels on it 14.89:1; the coast mark 6.12:1.#C9D6DEMap labels on it 12:1; the coast mark 4.94:1.No colour was minted during the build. Every token on both pages comes from the wave’s declared set, and every token is painted only on the grounds that set declares for it — which is why the tile hairline never touches the panel and the light green never touches paper.
Space Grotesk for headings, figures and buttons: technical without being a stencil, and its slightly mechanical digits suit a page whose whole argument is a number. Inter for body copy and form fields, at 16px minimum on mobile. Every price, count and turnaround is set with tabular numerals so the fee does not jitter as the visitor drags the staff count. The headline runs to 50px at desktop and clamps to 29px at 375, where it takes six lines and still finishes 300px above the sticky bar.
(performance.now() − start) / 620, cubic-eased, never a per-frame accumulator, and the loop stops requesting frames when the document is hidden. A headless renderer that services ten frames in seven seconds still lands on the settled state, which is what the thumbnail depends on.window.__cybersecurity carries the staff count, site count, tier, the four readiness counts and every fee as plain numbers, so the passes and the QA sweep read state rather than parsing text.<form>. Wrapping controls in a second form breaks every check that resolves “the page’s form” by first match, and it would make the enquiry CTA point at the wrong target..steps li is a two-column grid; the step title and its body were both auto-placed, so the body landed in the 34px number column. Both got grid-column:2 and the 12px gap was split into 12 column / 2 row. Mobile page height fell from 11,013px to 9,519px.align-items:end.Driven: form submitted empty (5 fields marked, confirmation stayed hidden), with junk in the phone field, and with good data (confirmation replaced the form and echoed 4 of 8 in place, $3,175). All eight tiles cycled through all three states; staff and sites driven to 20/1, 12/1, 35/1, 35/2 and 80/3.
Driven: the recommendation exercised through all three keys — gaps at rest, unknowns with three not-sures, stand-down at seven in place — and the stand-down button asserted to tick the form checkbox. The eight drawn columns asserted to carry a dashed outline for exactly the unknown ones.
document.styleSheets at runtime; a rule whose job is to hide or move things at 375 and matches nothing is the most expensive kind of silence.v flag before it ships. The shipped pattern escapes its brackets and its hyphen, is asserted to accept (08) 9000 0212, to reject ring me!!, and to throw nothing on checkValidity(). Worth recording: probing the browser directly, this Chrome (152) does not compile the pattern attribute with the v flag — the unescaped form that killed a previous build still validated here. The escaped form is correct under both readings, so it is the one that ships, but the failure is version-dependent rather than universal and the note is here so nobody re-derives it.Driven: the form three ways again after every change; the check at 375, 768, 1200 and 1440; reduced motion asserted to land on the settled drawing with the figures unchanged; 162 asserts green. Then every check that could plausibly be dead was negative-tested in the same sitting — the sticky bar grown to 300px, the refusal moved into the FAQ, a counter planted in the state probe, a breakpoint class stripped off its elements, an unlicensed price and a set of legal-obligation claims planted in the copy. Seven of seven fired. A check that has never failed is not evidence.
The call button and the quote button sit above the fold on a phone and again in a bar that never leaves the screen, because a buyer holding a supplier questionnaire acts in the ten seconds before something else interrupts them.
The form asks six things — name, business, phone, suburb, what prompted this, and one optional line — because every extra field costs completions and none of the ones we dropped would have changed what happens on the call.
The Readiness Check is the whole argument: it answers “what will this cost me” in about fifteen seconds without a form, it prices the tier you did not choose beside the one you did, and it is willing to tell seven-of-eight visitors not to book.
The trust strip names the deliverable rather than the fear — a written finding on each of the eight, no managed-service contract at the end — because in this trade the credible signal is what you refuse to sell, not how frightening you can make the problem sound.
And the refusal sits beside the fee rather than in the small print, which is what turns a disclaimer into a demonstration of how the business quotes: a prospect who reads it stops wondering what else is being left out.
The live page emits only WebPage, CreativeWork and BreadcrumbList, each naming it a demonstration. Publishing LocalBusiness or Review markup for a business that does not exist would put fictional data into a real index, so the schema below is shown as an escaped sample and is deliberately not live anywhere on either page. For a real practice, with real reviews and a real address, this is what would ship.
<!-- NOT LIVE. Sample only. --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "ProfessionalService", "name": "<the practice>", "description": "Fixed-scope security assessments for WA businesses.", "telephone": "+61 8 <real number>", "address": { "@type": "PostalAddress", "streetAddress": "<their real address>", "addressLocality": "West Perth", "addressRegion": "WA", "postalCode": "6005", "addressCountry": "AU" }, "areaServed": [ { "@type": "City", "name": "Perth" }, { "@type": "State", "name": "Western Australia" } ], "openingHoursSpecification": [{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "08:00", "closes": "17:30" }], "makesOffer": [{ "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Essential Eight readiness assessment" }, "priceCurrency": "AUD", "price": "<their real from-price>" }], "aggregateRating": { "@type": "AggregateRating", "ratingValue": "<from the live review feed>", "reviewCount": "<from the live review feed>" } } </script>
Alongside it: a Google Business Profile with the assessment as a named service, suburb landing pages only where the practice genuinely travels, and the review feed wired to the profile so aggregateRating is generated rather than typed.
aggregateRating above honest.