Reliq.uk has a new design. We rebuilt it from scratch - new visual identity, new component architecture, new deployment stack - and we wanted to write down both the reasoning and the implementation, for clients and engineers alike.

The Idea: A Precision Instrument

The brief we gave ourselves was simple: a site that looks like it was built by people who care about the details of software, not by people who downloaded a template.

The answer we landed on is what we call the Instrument design system. The palette is deliberately narrow: bone paper (#E9E7E0) for the page background, graphite panels for structural surfaces, body text in near-black ink. One accent - amber (#FF9E2C) - reserved as a signal colour: CTAs, the live pulse dot, focus rings, metric values. Nothing else.

Why so restrained? Because an AI and software consultancy should communicate precision, not enthusiasm. Bright gradients and decorative photography say “we want your attention.” A clean instrument panel says “we know what the numbers mean.”

There is no stock photography anywhere on the site. Every decorative element is CSS or SVG. This was a deliberate choice: photography would feel borrowed; geometry and code feel ours.

The Signature: A Site That Measures Itself

The centrepiece of the new design is the PerfReadout component on the home page. It reads the browser’s Performance API after the page loads and displays three live metrics: transfer size, render time, and request count. The numbers count up as you watch.

We don’t claim the site is fast. The page shows you.

This matters for two reasons. First, it is an honest demonstration - if the numbers were bad, we would be advertising our own failure. Second, it is a statement of intent: we build things that are measurable and that we are comfortable measuring in public. That is the kind of engineering we bring to client projects.

The amber pulse dot to the left of the readout is always live. It is not decorative. It signals that the instrument is reading.

How We Built It

The stack is intentionally minimal.

Astro handles everything: static output, routing, MDX for content, the build pipeline. There are zero client-side JavaScript frameworks. The footer telemetry line reads 0 FRAMEWORKS - that figure is accurate. The only JavaScript on the page is a small inline observer for scroll-reveal and the PerfReadout counter animation; both are plain DOM APIs.

Typefaces are self-hosted woff2 files, never loaded from a third-party CDN. Clash Display (600/500 weight) is used exclusively for display headlines - large, tight, roughly 0.95 line-height. IBM Plex Sans handles body and UI text. IBM Plex Mono appears in eyebrows, data labels, and metrics: always uppercase, 0.16em letter-spacing, tabular figures. Critical faces are preloaded in <head> so there is no layout shift.

Scroll-reveal is a single IntersectionObserver wired to [data-reveal] attributes in Base.astro. When an element enters the viewport it receives [data-revealed] and the CSS transition fires. All motion is gated behind a prefers-reduced-motion media query - if the user has requested reduced motion, elements are visible immediately with no animation.

Accessibility shaped the colour decisions directly. Amber is a signal, not text - it fails AA contrast on the bone background at body size, so it is never used as paragraph text. Body copy is always ink on bone or muted-dark on graphite, both of which pass AA at all sizes.

The site deploys as a Cloudflare Worker serving prerendered static assets, with a single server-side route handling the contact form (Turnstile verification, Coda append, Telegram ping). Build and deploy are fully automated via Cloudflare Workers Builds on every push to main.

What This Means for You

The same discipline applies to everything we build for clients. Measurable, fast, accessible, deployable without ceremony. If you want that kind of engineering applied to your product - a new site, a data integration, an AI workflow - get in touch or take a look at what we’ve built.