Request a discovery call

The build record

How this siteis built.

The stack, the accessibility target and how it is tested, the fourteen launch checks by name, what is made by a system, what is decided by a person, and what is not finished. Written to be argued with.

Every number on this page carries the method that produced it. Where a measurement has not been taken, the page says so rather than showing a figure, and there is no score of any kind anywhere on it. The rule this page is written under

Start with the stack

The stack

Next.js and plain CSS,rendered on the server.

The site runs on Next.js with the App Router. Every marketing, service and legal page is rendered to HTML on the server before it is sent, most of them once at build time, so the words you are reading are in the document itself rather than drawn in afterwards by a script. Links are ordinary links, and each one loads a full page.

  • Next.js App Router, on the server

    Pages that never change between visits are built once. Pages that the admin can change, such as the insights, are cached and refreshed the moment something is published, so a new article reaches the site without a rebuild. The pages you read ship no React at all: each form is plain HTML that posts to the server, helped by a small script, and the cookie controls are a small plain script. Only HUREAL's admin uses React.

  • hureal.css

    The whole visual system, in plain CSS. Fifteen colour tokens, one type scale, one spacing scale, one corner, one grid, every component, every responsive rule. No page carries a style block, and if a rule would ever appear on a second page it is moved in here instead.

  • assets/hureal.js

    Every shared behaviour. Each module feature detects its own component and returns without touching anything when that component is absent, so a page that uses none of it loads the file and nothing happens.

  • assets/schema.js

    One diagram renderer and the service diagrams as data, loaded only on pages that carry a diagram. Every diagram is 64 world units wide, so a plate in the first drawing is physically the same size as a plate in the last. Only the height varies.

  • The bar, the menu and the footer

    Server components, rendered into the page before it is sent. A nav change is one edit and it reaches every page, so a page built next month cannot quietly ship last month's nav.

  • HUREAL's own database

    A Supabase Postgres database in the ca-central-1 region, in Canada, holds form requests, contacts, consent records and the insights. Database rules decide who can read every table: a visitor's browser can read published insights and public site settings, and nothing else. An insight reaches the site only after a person approves it.

  • Two typefaces

    Inter Tight and IBM Plex Mono, four weights and two, served from hureal.ca itself with a swap so text is readable before the file arrives. No request goes to a font host. There is no third face. Form controls are forced to inherit the document font by a reset line, because they do not inherit it by default.

  • Structured data

    One JSON-LD graph per page, declaring what the page is rather than what we would like it to rank for. No offers, no price, and no rating: there is no published build price and there are no reviews, and marking up either would assert something the company has not got.

What is deliberately not here

  1. No page whose words only appear after a script runs, and no client side router between one page and the next.
  2. No measurement script before you allow it, and no advertising pixel or social embed at all.
  3. No carousel, no modal on arrival, and no scroll jacking.
  4. No content that exists only inside an image or only inside a PDF.

Third party requests, named rather than buried. The typefaces used to come from Google's font hosts; they are now served from this domain, so that request is gone. Forms are protected against spam by a timing check, a hidden field that people never fill in, and a limit on how many requests one connection can send, all run by hureal.ca itself. A separate bot-check service is not switched on yet.

PostHog and Google Analytics load only after you allow measurement, in the banner or on the cookie preferences page, and not one request goes to either before that. The privacy page lists every one of these in the same words.

Where it is served from. The site is a Next.js application on Vercel, running in its Montreal region (yul1), with Vercel's network in front of it. The database that holds form requests and consent records is Supabase Postgres in the ca-central-1 region, in Canada. Measurement is switched off: today this site loads no analytics. When it is switched on, the tools are PostHog and Google Analytics, behind consent.

Accessibility

The target is WCAG 2.2 AA, and here is how it is tested.

A conformance target is a claim until somebody says how it is checked. These are the checks, and four of the six are running in the page you are on right now rather than in a report.

  • Contrast on flat groundComputed once, written beside the rule

    What the build doesEvery colour pairing on the site was computed before it was used, and the ratio is written in the stylesheet next to the declaration that produced it. The table below is that arithmetic, published.

    How you check itPick any two colours on any page and measure them. The published figure is the one you should get.

  • Contrast over a photographRead back in the browser, at runtime

    What the build doesNothing about contrast over artwork is asserted on this site. Every frame that composites type over a photograph is measured in the browser, at the real viewport, against the real composited pixels, after the crop has decided which part of the file is on screen.

    If the worst pixel under the copy box comes in under 5:1, a full point above the standard's floor, the veil is darkened and it reads again.

    How you check itResize any page with an artwork band and watch the copy stay on the opaque part of the veil. Below 980 pixels the frames stop compositing entirely and stack, because a crop that has not been measured is a crop nobody can make a promise about.

  • KeyboardEvery path, no mouse

    What the build doesFocus is visible on a two pixel outline offset from the control, the menu moves focus in on open and back to the button on close, Escape closes it, and every interactive element is a real button or a real link rather than a div listening for a click.

    How you check itPut the mouse down and tab through this page from the top.

  • MotionAdditive, transform only, removable

    What the build doesNothing readable on this site is tied to scroll position by opacity, anywhere. Everything readable is visible at rest on load. The only things that move on scroll are transforms, and a reduced motion preference removes every animation and every transition on the page.

    How you check itTurn reduced motion on in your system settings and reload. Nothing disappears, because nothing was hiding.

  • Drawings and imagesThe content exists as text

    What the build doesEvery diagram carries its content as a numbered walkthrough in the page body, not only in an alt attribute, and every alt attribute describes the picture rather than the point the picture illustrates. Content trapped in an image is content a screen reader, a search engine and an assistant all fail to reach.

    How you check itTurn images off. The argument is still there.

  • Assistive technologyRead end to end by a person

    What the build doesThe launch checklist requires every path to be completed with no mouse and the page to be read aloud end to end before a build goes live. It is check two of fourteen.

    Not published yetThe record of that pass on this site, with the software, the version and the date, is published here once it is taken.

HUREAL designs to a standard, tests against it, and documents what was built. It does not certify anything, on this site or on a client's, and neither does anyone else who is being careful. How to report a barrier on this site, and what happens when you do, is on the accessibility page.

The arithmetic

Every pairing, and where it is legal.

Fifteen colour tokens, declared once. These are the pairings the site actually uses, the ratio each one measures, and the rule that follows from it.

Measured contrast, and the rule each measurement produced
The pairing Measured Where it is allowed
Text on the page groundThe canvas, everywhere
Strong ink on the canvas 10.34 to 1 Anything, at any size. It is the default for every heading and every sentence that carries a fact.
Muted ink on the canvas 6.64 to 1 Supporting copy at any size. The second step down, and it is still comfortably over the standard's floor for small text.
Soft ink on the canvas 5.57 to 1 The quietest step on the site, at any size. On the warmer alternating ground it is dropped rather than carried under the floor.
Things you can act onOne button, one link
Action teal on the canvas 6.05 to 1 Every link, every arrow, every button label, every interactive thing on the site. There is one interactive colour and this is it.
Pale ink on the action teal 5.67 to 1 The one button. Solid or outlined, large or small, it is the same two colours every time.
The brand colour, and its limitsThe two rules that cost the most
Brand teal on the canvas 3.95 to 1 Display sizes only, which on this site means the loud second line of a heading and nothing else. A guard rule in the stylesheet demotes it to the action teal anywhere it lands on smaller type, so the limit is mechanical rather than remembered.
Accent teal on a light ground 2.40 to 1 Never as small text. It is a fill, a rule, a wash, a very large headline, or text on a dark plate. It is the prettiest colour in the palette and it is the one that carries the least.
Brand teal with dark ink on it 2.59 to 1 Never, anywhere. It is published here because it is the one pairing on this palette that looks entirely plausible and is not, and it is the mistake this table exists to prevent.

Scroll the table sideways to read it.

Why the numbers are here rather than in a report. A contrast figure in a slide deck is a claim about a moment. A contrast figure written next to the declaration that produces it is a thing the next person to change that colour has to argue with.

All eight of these are in the stylesheet, beside the rule, in the file you already downloaded.

Speed

The measurement, not a score.

Three metrics, the published threshold for each, what this build does about it, and the reading. Where the reading has not been taken the page says so, because a number here that nobody measured would undo every other number on the page.

  • Largest Contentful PaintGood is 2.5 seconds or under

    What the build does for itEvery image carries its real width and height so nothing has to be guessed, and every photograph is cut to a ladder of widths and offered as WebP beside JPEG, so a phone downloads the file it asked for rather than the one a desktop would want.

    The picture at the top of the page is preloaded and fetched at high priority, everything below the fold is lazy, the typefaces are served from this domain so no second host has to be reached, and the faces swap rather than block. The page arrives as finished HTML, so nothing has to run before the words can be drawn.

    Measured on this siteNot yet. Earlier readings were taken on the previous build of this site, before it moved to Next.js, and they no longer describe what you are loading, so they have been taken down rather than carried over.

  • Cumulative Layout ShiftGood is 0.1 or under

    What the build does for itEvery image and every picture frame has a fixed ratio reserved before the file arrives, the bar and the footer are rendered into the document on the server rather than appearing after first paint, and the one heading on the site that is swapped by a control reserves its own height so the swap moves nothing under it.

    Measured on this siteNot yet, for the same reason.

  • Interaction to Next PaintGood is 200 milliseconds or under

    What the build does for itEvery panel, row and answer is readable at rest with no script running, so the behaviours are additive rather than load bearing. No React runs on these pages; the forms and cookie controls use small plain scripts, and the heaviest thing on most pages is a drawing that is rendered once.

    Measured on this siteNot yet, for the same reason.

  • What a page weighsThe number nobody publishes

    What the build does for itOne stylesheet and a small set of scripts, shared by every page and cached after the first one. The variable between pages is the photography. Each study is cut to a ladder of widths and offered as WebP beside JPEG, so what a page costs depends on the screen that asks for it.

    Measured on this siteNot yet, for the same reason.

The test HUREAL sells is check one of fourteen: speed on a mid range phone on a cellular connection, not on a new phone on office wifi. When these readings are taken, the device and the network are named beside each figure.

They will be taken from the public address. A reading taken on the same machine that serves the site removes the one thing a real visitor cannot remove: the distance to the host.

The site is now served from Vercel's Montreal region, so that distance is real and can be measured. These readings are taken from the public address and published here. In the meantime, run your own: the address is the one in your browser.

The launch checklist

Fourteen checks, by name.

Every HUREAL build passes these before it goes live. They are written out by name rather than summarised as quality assurance, so each one can be checked.

What every HUREAL build passes before it goes live

  1. Speed on a mid range phone on a cellular connection. Not on a new phone on office wifi.
  2. Keyboard and screen reader. Every path completed with no mouse, and read aloud end to end.
  3. Contrast and text sizing, checked against the WCAG 2.2 AA standard on the surface we shipped.
  4. Reduced motion, honoured. Anything that moves has a still version that still communicates.
  5. Every language read by a person who writes it, including forms, errors, and automated email.
  6. Forms tested to the inbox and to the CRM, with the acknowledgement received.
  7. Tracking verified end to end, from the click to the recorded conversion to the report.
  8. Redirects mapped from every old URL, so existing search rankings survive the move.
  9. Structured data validated on each page type.
  10. Crawler access checked, for search engines and for AI crawlers.
  11. Security: certificates, headers, dependency versions, admin access review, and rate limits.
  12. Backups taken and a restore actually performed, not just configured.
  13. Error monitoring and alerting live, pointing at a person.
  14. Admin access confirmed in your accounts, with your team signed in before launch day.

The record of this site against those fourteen is published here, dated. It has not been published yet. Checks 5 and 14 do not apply in the usual way: there is no second language on this site and no client account to confirm access in. Every form stores its request in HUREAL's own database today; email notice of a new request and measurement are both switched off, so checks 6 and 7 are recorded once they are on. The results are published with the rest, not before.

Read the list before you hire us.

What is made, and by what

Generated, or decided.

A large part of the production work here is carried by systems HUREAL built and runs. The decisions are not, and the split is worth publishing because most of the argument about AI production is people talking about different halves of it.

Made by a system

  • The material studiesGenerated artwork, edited into daylight from an earlier study in the same set. Sculptural glass and metal, with a quiet left side reserved for type.
  • The brand objectThe divider between sections is drawn at load from a seeded generator, so it is the same drawing every time rather than a different one per visit.
  • First draftsCopy, markup, structured data and tests, produced against a written brief and then read, cut and rewritten by a person.
  • The checkingContrast, heading order, link targets, alt text, token use and the build rules, run again on every change rather than once at the end.

Decided by a person

  • The paletteFifteen tokens, chosen from a set of candidates, with the contrast arithmetic done before any of them was used rather than after.
  • The wordmarkA drawn mark. The path data is the original, it is never typeset, never approximated, and never redrawn to fit a layout.
  • Every diagram coordinateThe service drawings are a written specification. Not one coordinate is generated, and not one is edited inside a page.
  • Every claimEach sentence that asserts something about HUREAL or about a reader, including each one this page refuses to make.
  • The refusalsWhat the site will not say, will not certify and will not guarantee. That list is the part of the judgement that costs something.

The material studies are artwork, and they are not photographs of anything. They do not show an office, a team, a client, a project, or a place HUREAL has been.

Nothing on this site is a stock photograph of people, nothing is a screenshot of a client's system, and the console surfaces on the homepage and the service pages are designed representations of a real artefact: the company on them is "your-company", the people are roles, and nothing on them names anybody.

Not finished

What is still to come.

Each of these is named here rather than shown as a plausible value. That is the convention: a figure that has not been measured or decided is left out, never invented.

  • The three speed readings

    Taken on a mid range phone on a cellular connection, with the device and the network named beside the figure.

    band 4 of this page

  • The launch record

    This site's dated result against the fourteen checks, published as a record rather than as a summary.

    band 5 of this page

  • The assistive technology pass

    The software, the version, the date, and what it found. The target is decided; the test record is not.

    band 2 of this page

  • Email notice of a new request

    Every form request is stored in HUREAL's own CRM with its source and the time, and a person reads it there. Email notice of a new request is not switched on yet.

    the contact page

  • The preference page works, and the first visit banner appears once measurement is switched on. Both share one stored choice and ask again after twelve months. The legal review of that wording is the open part.

    the cookie preferences page

  • Deletion on schedule

    Every retention period is set and published. Deleting records automatically when a period ends is not built yet.

    the privacy page

  • Privacy, terms and the cookie page are drafted in full structure and have not been through a lawyer. That review is deferred, not skipped, and the privacy and cookie pages say so near the top.

    the privacy, terms and cookie pages

None of this is a roadmap and none of it is a promise about a date. It is the list of things this page would otherwise be quietly implying were done, which is the only reason to publish it.

Start with the problem you need to solve.

I know what I need to build.

Discovery call

A free conversation, then a written proposal with scope, price, and timing.

Request a discovery call

One process creates too much manual work.

Workflow Opportunity Sprint

We map it, then define what a connected system should do next.

Explore the Sprint

My website is underperforming.

Website Performance Audit

A written report and a prioritized plan of what to fix first.

Explore the audit

Measured, or left out.

Where there is no measurement yet, the page says so rather than showing a figure.