How the Kindling Family Day Care page was made.

The concept

One educator, four places, and the two numbers a parent actually wants.

Kindling is a fictional family day care educator working out of her own house in Hamilton Hill, taking families from Spearwood, Coolbellup, Beaconsfield, White Gum Valley, South Fremantle, Bibra Lake and Yangebup. She is not a centre. Four children, one adult, one back garden.

The parent arriving on this page has usually just come off a childcare listing site where every educator’s fee line reads contact educator for fees. They cannot compare anybody, and they are trying to work out whether they can afford to go back to work. The page answers with a published hourly rate, a week they can build in ten seconds, and — this is the part that matters — their own gap, computed from a percentage they read off their own myGov and slide in themselves.

The single conversion is a booked orientation visit, not a form fill. Family day care is the one kind of care a parent can genuinely inspect before committing, because it is somebody’s house and they are allowed in it. So the form asks the five things a visit needs and nothing else, and the page says three separate times that the visit costs nothing.

The drawn subject

A week strip, and one day drawn on the hours the house is open.

Five day cards, Monday to Friday, the booked ones filled and banded; underneath them, one booked day drawn as a bar across a fixed axis running 7:00am to 6:00pm — the hours the house is actually open. Because the axis is fixed, the long day fills it exactly, the standard day stops an hour short, and the short day is visibly a good deal shorter at both ends. That is the comparison the page exists to let a parent make, and it is made by the drawing rather than claimed in a caption.

Underneath the selected day sit the two lengths the parent did not pick, drawn to the same axis, each carrying its own day price inside the bar. That was added in Pass 2 and it is the single best change of the build: the $26.40 argument stops being a sentence and becomes a picture. The week total is printed inside the plate too, bottom right, so the drawing carries the commercial answer wherever it is screenshotted.

Everything is procedural SVG built as one synchronous string and handed to the DOM in a single write; the entrance choreography is then driven from the animation loop rather than by inserting nodes or toggling classes afterwards. Every vertical in the drawing — card height, bar height, ghost-row height, the whole viewBox — is a function of the measured CSS width, because the type size is too: laying a fixed geometry under a scaled font is exactly how a label ends up five pixels tall on a phone.

Motion is wall clock only. The reveal reads performance.now() deltas against a cold-load start stamp, never a per-frame accumulator, so it finishes in 1.15 real seconds whether the renderer is managing 60 frames a second or five. The loop pauses on document.hidden and resumes on visibilitychange. After the reveal the only thing still moving is the pick-up pip on the end of the hour bar, breathing between 0.72 and 1.0 opacity — a floor, not a fade, so the drawing is alive at any capture instant and never mid-disappearance. Under prefers-reduced-motion: reduce the loop never starts and the scene is drawn settled on the first frame.

Type

Fraunces and Karla — the one face in the wave with any sweetness in it.

Fraunces 600/700 carries every heading and every figure. It is soft, a little hand-cut, and it has warmth without being cute — which is the exact register a parent needs from an educator who is not a chain. Karla 400/500/600/700 carries the body at 17 px on a phone, because it is plain, wide-apertured and quietly friendly next to the display face.

The typographic move is the pair of figures: the full weekly fee and the parent’s gap set in Fraunces 700 at exactly the same clamp, side by side across a hairline, because the whole argument of the page is that a parent gets to see both. Everything else in the type system defers to that one moment — the services-grid prices are 27 px, the slider readout is 26, and nothing else on the page competes.

Honesty

What this page declined to publish.

Family day care sits inside a real Australian scheme whose numbers move, and this collection’s standing rule is blunt about the consequence: a figure about a real standard, scheme, regulator or price guide that cannot be verified does not get published, and does not get softened either. You decline, and you say that you declined. This page has the longest decline list in its wave, and the proof element exists in the shape it does precisely because of it — it consumes the reader’s own figure instead of the scheme’s.

The other honesty rules, applied

• The phone number is the reserved (08) 9000 0423 pattern; a positive sweep over both pages asserts every (08) 9xxx occurrence is the reserved exchange.
• The address is suburb-level only — Hamilton Hill, WA 6163 — and the footer says why: it is a home.
• Live structured data is WebPage, CreativeWork, WebSite and BreadcrumbList only, each naming the page a demonstration. There is no LocalBusiness, ChildCare, Organization, Service, Offer, Review or AggregateRating markup anywhere on either page, and the harness parses every block and checks its @type values against that allowlist recursively.
• The three reviews are demonstration copy, labelled as such under the reviews, and are not marked up.
• The build is presented as Sapience Analytics’ own work throughout, on both pages. No other author, of any kind, is named or implied anywhere.

The build

Three passes, each one driving the form and the estimate.

Pass 1 — Craft

• The screenshot review was photographing a scrolled page. The 1200×750 capture was taken after the keyboard drive, and calling .focus() on a chip scrolls it into view — so the “thumbnail” being reviewed was the middle of the estimate panel, not the top of the page. Fixed in the harness: the thumbnail is captured before anything drives, clicks or focuses.
• Two tokens were used outside their declared class. The how-it-works step numbers were set in the teal mark token rather than the teal text token, and the Sapience band’s body copy was paper at 88 % on the band — a blend the sweep does not declare. Both fixed to declared values; hierarchy on the band now comes from size and weight rather than from an unmeasured alpha.
• The map named a suburb the copy beside it did not. Fremantle was drawn as a landmark inside the service ring while the list beside the map names eight suburbs and Fremantle is not one of them. Dropped, so the drawing and the copy name exactly the same eight places.
• Bibra Lake’s lake was drawn where its label is suppressed. At phone width the map hides its secondary labels, leaving an unexplained blue blob. The lake is now drawn only where the label is.
• The day cards carried about 22 px of dead space at 375. Card height, bar height and the whole viewBox are now functions of the measured CSS width, not constants.
• The map’s label threshold was measured against the wrong thing. It hid secondary labels below 520 px of SVG width, which is the 900–1150 px desktop band, so five of eight suburbs showed on a wide screen. Lowered to 420.
• The hero lead ran three and a half lines at 375 and pushed the trust line toward the fold; cut to two.
• The honesty check was the defect, not the page — twice. A source-level regex looking for an educator-to-child ratio matched a JavaScript ternary that happens to contain a digit, a colon and a digit; every honesty text check now runs against rendered innerText, never HTML source. Then the same probe failed this guide, because a page that quotes measured contrast ratios is full of digit-colon-digit. The check now looks for a ratio claim — a count of adults against a count of children, or a number sitting beside the word itself — rather than for punctuation.

Pass 2 — Depth

• The drawing now makes the comparison the copy was claiming. The two day lengths the parent did not pick are drawn under the selected one, on the same fixed axis, each carrying its own day price inside the bar. The $26.40 argument became a picture. This is the single best change of the build.
• The axis was re-cut to the opening hours. It ran 6:30am–6:30pm, which is a scale nothing on the page uses. It now runs 7:00am–6:00pm, so the ticks are the hours the house is open and the long day fills the axis exactly — the fixed axis was checked against the extent of every reachable state, and the long day is the extent.
• The week total moved into the artwork. The plate’s footer line now reads “three days a week” against “$396.00 a week”, so the commercial answer survives being screenshotted without the result card.
• The selected bar’s inside label became “10 hours · $132.00 a day”, so all three rows read the same way and the day price is legible at a glance.
• Driven again after every change: 27 control vectors — three day counts × three session lengths × three subsidy values — each compared against an oracle reimplemented from the concept rather than read off the page, plus both range extremes and a rapid-fire drive with no settle between clicks.

Pass 3 — Hardening

• Every breakpoint rule was asserted for a non-zero match count. Twenty-two selectors whose job is to hide, move or re-column something at 375 — the masthead CTA, the brand tag, the sticky bar, the chip grids, the services grid, the form pairs — are checked with querySelectorAll(sel).length > 0. A compound selector that matches nothing is syntactically perfect, semantically dead, and invisible to every state probe.
• The phone pattern was compiled with the v flag, not eyeballed. [0-9 \(\)\+\-]{8,20} escapes every literal special inside the class; the check compiles it the way Chrome does, then proves it accepts a real number and rejects junk, and the form is driven three ways — empty, junk in the phone field, and good data. Empty flags all five fields and does not confirm; junk flags the phone field only and does not confirm; good data clears everything, hides the form and shows a personalised confirmation.
• Both pages were scanned for typographic quotes inside attributes — the defect class where a class attribute written with curly quotes parses as a class name nobody ever styles, and every state assert stays green while the pixels are wrong. Zero on both.
• The above-the-fold contract was re-tested at 375×667, a real phone rather than the harness’s comfortable 780. Headline, both CTAs and the trust line all clear the sticky bar without scrolling.
• 1000 px, the exact desktop grid breakpoint, got its own check: the proof element sits beside the hero headline, the services grid follows underneath, no scene label falls below 9.5 CSS px, and there is no horizontal overflow.
• The overflow probe at 375 checks every element’s box against the viewport rather than trusting scrollWidth, skipping SVG descendants, off-canvas skip links and anything inside a deliberately scrolling ancestor. Zero offenders on both pages.
• The thumbnail was proved to be at rest and in frame. Every numeric probe field is re-read 1.5 seconds after the 7-second capture instant and must be unchanged; the week strip’s box is measured at 515–738 px, fully inside the top 750; and every day card is asserted opaque, so the page comes to rest visible rather than mid-reveal.
• The reduced-motion path is driven as its own page load: the loop never starts, the cards and the bar are drawn settled on the first frame, and the pip sits static at full opacity.
• The harness ends at 158 assertions across 1200, 1000, 768, 1440, 375×780 and 375×667, plus the reduced-motion load and the guide page, with zero console errors at every width.