Colophon
How this site is built.
For the curious. Our website is one of the clearest examples of how we work, so here is what’s underneath it.
01
Design
The idea is the working drawing: the stage where an idea becomes something that can be built. It shows up as discipline rather than decoration: numbered sections, a strict 12-column grid with an annotation column, and small mono labels that only appear when they say something true.
Everything is black and white, with neutral greys. The only colour on the site comes from real product screenshots. Both themes are tuned separately; the dark theme’s greys sit a step brighter, because grey text on black reads weaker than the same contrast on white.
Type: Instrument Sans for headlines and text, using its width axis for large display sizes; Instrument Serif for longer editorial passages; JetBrains Mono for labels. All three are served from this site, not from a third party.
02
Engineering
- Next.js with React Server Components and strict TypeScript. Most pages are generated ahead of time as static HTML.
- JavaScript runs only where it does something: the theme toggle, the menu, the forms, Scope Sketch and the drawing view.
- The enquiry form works without JavaScript. Validation runs in the browser and again on the server, with the same rules.
- Scope Sketch is a set of plain, tested rules. No AI, no prices.
- Unit tests and end-to-end browser tests run on phone and desktop sizes, with and without JavaScript.
03
Performance
Targets: largest content painted within 2.5 seconds, layout shift below 0.1 and interactions answered within 200 milliseconds, measured on mobile. The largest element on the homepage is text, so it can appear as soon as the font arrives.
You can check this page for yourself: choose View the drawing in the footer to see the grid, the page’s structure, and the figures measured by your own browser.
04
Accessibility
We aim for WCAG 2.2 AA: keyboard access everywhere, visible focus, a skip link, real form labels and error messages, text contrast checked in both themes, and no motion for people who ask their device to reduce it.
Automated checks help, but they don’t prove accessibility, so we also test by hand. If something doesn’t work for you, please tell us at hello@ralphlawalgroup.com.
05
Privacy
No advertising or analytics cookies, so no cookie banner. Third-party code loads only when you use the feature that needs it. Your Scope Sketch stays in your browser until you choose to send it.