This Website

SEO website · design system · 20 pages

The pricing page now answers the question it is named after, the form sends, and every figure below came out of a script in the repository rather than a copywriter.

Problem

Our previous site was competent and completely anonymous. It used the same centred hero, the same three feature cards, and the same rounded surfaces as every other studio site, and a visitor could not have told you who made it. Underneath, the borders failed contrast, the pricing page had no comparison, and the contact form cleared itself without sending anything.

Approach

We rebuilt it as a datasheet, because that is what the content honestly is: scopes, part numbers, delivery windows, and verified thresholds. Every device on the page reports something real: the meta strip carries the part number and the year, the dimension line captions a measured claim, the specification table is the pricing comparison. Both themes were designed as a pair and every colour combination was checked against WCAG thresholds before a component was written.

Outcome

The pricing page now answers the question it is named after, the form sends, and every figure below came out of a script in the repository rather than a copywriter.

Measured: CS-03

141 kB Worst-case first load, gzipped

12.7 kB All CSS and JavaScript, gzipped

48/48 Contrast pairs passing, both themes

0 Third-party requests at runtime

Worst case means the heaviest page plus every stylesheet, script, and font the site can ask for. 118 kB of that 141 kB is three self-hosted font files; the markup, CSS, and JavaScript together are 23 kB.
The contrast figure counts every foreground-and-background pair the design actually produces, checked in both themes against the 4.5:1 text and 3:1 non-text thresholds. Three pairs have failed so far. Two were fixed by changing the tokens; the third missed by two hundredths, so that combination was removed from the design instead of being argued down. Six more pairs are checked in CIE L* rather than contrast ratio, because ratio cannot tell you whether one surface reads as sitting above another.
The two scripts are tools/verify-build.cjs and tools/check-contrast.cjs, and they run against the built output, so these numbers move when the site does. Reflow at 320px and keyboard traversal are checked in a browser before launch, not by either script.

Stack

AstroDesign tokensLight + darkWCAG 2.2 AASelf-hosted fonts

Same problem, different sector?

Tell us who has to be convinced and what they need to see. We will come back with the page structure that does it.

Start a project See what it costs