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 draws an empty slot rather than 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

Four shared files,and no framework.

Each page is an HTML document. There is no client side router, no hydration step, and nothing between the request and the markup. Open the source of any page on this site and the words you are reading are in it.

  • assets/hureal.css

    The whole visual system. 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 eight service diagrams as data. Every diagram is 64 world units wide, so a plate in the first drawing is physically the same size as a plate in the eighth. Only the height varies.

  • assets/partials.js

    The ribbon, the bar, the menu and the footer, written during parse rather than after first paint. A nav change is one edit here and it reaches every page, so a page built next month cannot quietly ship last month's nav.

  • Two typefaces

    Inter Tight and IBM Plex Mono, four weights and two, loaded once from Google Fonts with a swap so text is readable before the file arrives. 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 framework, no bundler, and no build step between the source and what you received.
  2. No tracking script, no advertising pixel, and no social embed at load.
  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.

One third party request, named rather than buried. The two typefaces are served from Google's font hosts, which means your browser makes a request to a domain HUREAL does not control and that request carries your IP address. It is the only third party request this site makes at load, it is disclosed on the privacy page in the same words, and moving the font files onto this domain is on the list below rather than presented as already done.

Not decided yet: where this is served from and what sits in front of it. host to set region to set content delivery network to set analytics to set

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. assistive technology record to set

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 there is an empty slot, 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 two font hosts are preconnected, the faces swap rather than block, and there is no framework to parse before the first paint.

    Measured on this site2.2 seconds on the homepage, 1.8 on the longest article, 2.3 on the heaviest service page, on a simulated mid range Android phone at 412 by 915 with the processor slowed four times, over a Slow 4G connection of 1.6 megabits down at 150 milliseconds round trip. Median of five cold loads each, 23 September 2026. All three are under the threshold. The same three pages read 4.2, 5.1 and 7.8 seconds earlier the same day on the same machine and the same harness, and one change accounts for the whole difference: every photograph is now cut to a ladder of widths and offered as WebP beside JPEG, so the phone takes the 116 kilobyte file it asked for where it used to take the 1.16 megabyte one. The largest element on each page is still the picture at the top. It is now the size the screen asked for.

  • 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 chrome is written into the document during parse 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 siteZero on the homepage and on the longest article, 0.016 on the heaviest service page, identical across five cold loads each, and the worst of the three is a sixth of the threshold. The one shift is the notice at the very top: its sentence sets on three lines in the fallback face and on two in the real one, so when the typeface arrives the line under it rises by eighteen pixels. The pages are light enough now that on two of the three the typeface finishes loading before the first paint, so the notice is set in it from the start and nothing moves; on the third it still arrives just after the first paint and the shift is still there. Nothing below the first screen moves on any of them.

  • Interaction to Next PaintGood is 200 milliseconds or under

    What the build does for itThere is no hydration and no main thread framework. Every panel, row and answer is readable at rest with no script running, so the behaviours are additive rather than load bearing, and the heaviest thing on the page is a drawing that is rendered once.

    Measured on this site56 milliseconds at worst, on the same phone and connection, driving every control on the homepage from the keyboard and the pointer: the tab strip, the queue console, the prompt demonstration and the menu. Of that 56, the site’s own handlers account for under 5 milliseconds and the rest is the phone drawing the next frame.

  • What a page weighsThe number nobody publishes

    What the build does for itOne stylesheet and three 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 siteThe homepage transfers 645 kilobytes before you touch it and 855 once you have scrolled to the bottom. The heaviest service page is 471 and 525. The longest article is 358 and 413. On the homepage the shared furniture is 255 of those kilobytes: 103 of stylesheet, 87 of script and 65 of two typefaces, cached after the first page. Photography is 315 of the 645, just under half, where the same page used to spend 1,304 of 1,625 on it. These are the figures for a 412 pixel phone. A desktop asks for larger files and gets them.

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. That is the device and the network these readings were taken on, and both are named beside the figure. These are laboratory readings, not field readings. They come from a scripted browser loading this site from a server on the same machine, with a phone and a network simulated on top of it, which removes the one thing a real visitor cannot remove: the distance to the host. There is no host yet, so there is nothing to measure that distance to, and the day there is one these numbers get taken again from the public address and replaced. The honest thing in the meantime is the one this page does: run your own.

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, because you can hold a vendor to a list and nobody can audit a category.

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 is not published yet, and the row that is easiest to get wrong is the honest one to name: checks 5, 6, 7 and 14 all depend on decisions that have not been taken, because there is no second language on this site, no form wired to an inbox, no analytics, and no client account to confirm access in. launch record to set

You can hold a vendor to a list. Read it 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 eight 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 stillan empty slot.

Every one of these appears somewhere on this site as a dashed marker rather than as a plausible value. That is the convention: a number that is not decided is drawn, never invented, and the marker names the decision it is waiting on.

  • 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

  • The address and the phone number

    No street address, phone number or email address is decided yet. Each is shown as a marked placeholder, and none is in the structured data.

    the contact page

  • The audit turnaround

    How many business days the performance audit takes from the request to the document in your hands.

    the performance audit page

  • Where the inquiries land

    The site promises that a message arrives in a CRM with its source and the time. The CRM is not chosen.

    the contact page

  • The consent surface

    A preference centre exists and works. What it has to govern depends on what this site ends up loading, and that is not settled.

    the cookie preferences page

  • The legal set

    Privacy, terms and the cookie page are drafted in full structure and have not been through a lawyer. Each one says so at the top of itself.

    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.

Two doors

Two ways to start.Both end with a document you own.

Book a discovery call

For when you know you are building something, or you know which process is costing you. A discovery call with the people who own the outcome. Afterwards you get a written proposal: a scope, a price, and a timeline you can sign or walk away from.

Book a discovery call

Request a performance audit

For when you want the evidence before the decision. The same kind of document as this page, written about your business instead of ours, and yours whether or not you ever hire us.

Request a performance audit

Know what you are building? Book a discovery call. Not sure where the problem is? Request the audit. If neither is right for you, we will say so, and tell you what is.

Not ready for either? Run your own test on this page instead. Open it on a mid range phone, tab through it with no mouse, turn reduced motion on, and read the source. That is the whole invitation, and it does not need us.

The accessibility statement
A material study photographed in bright daylight from a very low camera. A far fan of clear turquoise glass fins runs away to the right along a long silvery horizon, reflected in a pale sea glass floor. The left of the frame is empty pale mint sky and floor meeting at the horizon line.

Measured, or left blank.

Every number on this page carries the method that produced it. Where there is no measurement yet, there is a slot rather than a figure.

HUREAL / Material studies