Web · the page you are reading

You are looking at it.
That is the whole demonstration.

A studio that builds websites should not need to describe how it builds websites. The page you are on is the artefact — including the parts that are inconvenient to admit.

Our own site, built by us. Every figure below can be checked by viewing source.

How it works Book a 15-minute call Your numbers, on the call
Four partials, fifteen pages The head, nav, intro and footer live in four partials. One tool rewrites only the regions between marker pairs, fanning out to the home page, the offer pages and the case studies. A check mode fails the build if any page has drifted. ONE SOURCE FOR THE CHROMEpartials — head · nav · intro · footsyncrewrites only what is between the markersHome1 pageOffers4 pagesWork9 pagesA check mode fails the build if a page has drifted.
One source for the chrome, and a check that fails when a page drifts from it.

Every figure here is a build fact — counted, not claimed. No outcome numbers appear on this site until a client’s system produces one.

  • 0JavaScript dependencies shipped
  • 15pages
  • 4partials the chrome is edited in
  • 716lines of hand-written JavaScript
  • 47 KBthe font, self-hosted
  • 2videos, both held back until after load
  • 4.5:1minimum text contrast, both themes
  • 1command that fails the build on drift

No framework, and the cost of that choice.

There is no build step, no bundler and no runtime dependency. The files in the site directory are the real, hand-editable, deployed files — there is no source tree that generates them and no build that can silently overwrite an edit. The cost of that choice is that shared markup has to be kept in sync deliberately, which is what the one small tool below does.

The nav, footer, head and intro live in four partials. A tool rewrites only the text between marker pairs on every page, and a check mode fails the build if any page has drifted. Never running it leaves the chrome stale, which is a degraded state — it can never be a broken one, and that distinction is the reason the tool is allowed to exist at all.

How it works

What the browser actually receives.

Every decision here is a weight decision, because the person reading this is on a phone between appointments.

  1. 01

    The deployed files no build step

    What is in the repository is what is served. An edit to a page is an edit to the page, which means nobody has to know a build system to fix a typo.

  2. 02

    Four partials, one sync check mode fails on drift

    The chrome is edited in one place and pushed into every page. The check mode is what makes that a guarantee rather than a habit.

  3. 03

    The three-dimensional parts CSS transforms only

    The mark revolves, leans toward the cursor and can be spun by hand. Cards tilt with a glare that implies a light source, which is what stops a tilt reading as a gimmick. A canvas renderer would have cost around 150 KB and a second render loop to do less.

  4. 04

    The videos held back

    Both attach their source only after the page has loaded, only on a wide screen, never on a metered or slow connection, and only when scrolled near. Moved into the hero, they would make the page slower for exactly the person we are trying to reach.

  5. 05

    Motion has an off switch

    Every animation sits behind the reduced-motion preference and gets none of it rather than a reduced version. Pointer effects are gated to devices that actually have a pointer, because a tilt that fires on tap is a bug that feels like a broken link.

What ships, and what is held back The deployed files are the source files: four stylesheets, hand-written JavaScript with no dependencies, and a self-hosted variable font preloaded at 47 KB. Below a refusal line, the two videos, which attach their source only after load, on wide screens, and never on a metered connection. WHAT THE BROWSER ACTUALLY RECEIVESThe files in site/ are the deployed filesno bundler, no build stepFour stylesheetsevery colour a token, no stray hexJavaScript, no dependencieshand-written, ~716 linesOne variable font, self-hosted47 KB, preloadedHELD BACK UNTIL AFTER LOADTwo videoswide screens only, never on a metered line
The heavy things are below the line, and the line is enforced in code.

What you get

Why any of this matters to a buyer.

Loads fast

Nothing ships that is not used

No framework, no dependency, one preloaded font. The page is fast because of what is absent from it, which is the only kind of fast that survives the next feature.

Yours to edit

A page is a page

No build to learn and no toolchain to install. Whoever maintains it next can open the file and change the sentence.

Readable by everyone

Keyboard, screen reader, reduced motion

Focus is visible, the first tab reaches the skip link, decorative layers are hidden from assistive technology, and nothing scrolls sideways on a small phone.

Every one of these is verifiable from the page you are on right now, which is the only reason it is worth saying.

Want this one walked through against your own numbers? Email info@adapton.io and we will show you the parts that transfer and the parts that do not.

The limits

The parts that are inconvenient to admit.

A page that claims honesty and hides its own bugs has told you the more interesting thing by accident.

  • The wordmark is navy type with an orange mark. On the dark background the navy needed lifting, and a brightness filter lifted the orange with it — pushing a clipped channel until the brand orange came out yellow. The fix was two artworks rather than one filter, and it was wrong on the live site for a fortnight.
  • Opening a page from the filesystem no longer works. The chrome uses root-absolute URLs, so it needs a server — the dev server in the repository is one command, and this was a deliberate trade to catch routing bugs before deploy rather than after.
  • Neither video is compressed. A real encoder pass would cut both by roughly half, and it has not been done yet.
  • The clinic named in the hero thread is fictional and is labelled as an illustration. It is not a client, and it will be swapped the day a real one gives written permission.
  • There are no testimonials and no client logos on this site. Deliberately — there are no clients yet, and invented proof is the fastest way to lose a deal when somebody checks.
Motion has an off switch Under the reduced-motion preference the intro is removed entirely, the card tilt is gated to pointer devices and the ribbon stops. Below the refusal line, a safety timer in the document head unlocks scrolling even if the stylesheet or script never loads. prefers-reduced-motionThe intro curtainremoved entirely, not shortenedThe card tiltpointer devices onlyThe ribbonstoppedA SAFETY TIMER IN THE HEADunlocks the page even if the script never runs.Scroll is never left locked
None of it is a reduced version. It is removed.

Next step

Show us the thing you do every morning.

Fifteen minutes. We ask three questions and do the arithmetic with your real numbers. If it is not worth automating we will say so on the call.

Send us the details

All case studies · info@adapton.io