§00/Colophon
The practice, applied to itself.
We hold this site to the same bar we set for clients. What follows is an honest account of how it is built — the stack, the design choices, the performance and accessibility targets, and where each decision maps to a pillar.
§01/Stack
No vendor magic. Readable, auditable, owned.
Every dependency is chosen for inspectability and longevity. The build is reproducible from a clean clone. There are no proprietary platform integrations, no closed build steps, no analytics scripts calling home.
Framework
Readable source → audit pillar. Reproducible build → sovereignty.
App Router, React Server Components, Turbopack dev server. Standalone output (`output: 'standalone'`) produces a minimal `server.js` bundle — no Node modules bloat in the Docker image.
Server and client components. Strict mode enabled. No legacy class components.
Full strict-mode: `noImplicitAny`, `strictNullChecks`, `exactOptionalPropertyTypes`. Every prop, every return type, every content module is typed.
Styling
Open-source toolchain; no proprietary style-engine SaaS.
PostCSS-based v4 with OKLCH design tokens defined in `globals.css`. No `tailwind.config.js` — configuration lives entirely in CSS via `@theme` blocks.
Type-safe component variant composition. No runtime style generation; all classes resolve at build time.
Components & motion
Unstyled primitives (base-ui) and inspectable motion (framer-motion) — no black-box UI framework.
Unstyled, accessible primitives from the MUI team. Button, Dialog, and other interactive elements get WAI-ARIA semantics and keyboard behavior without a heavyweight component library.
Entrance animations, in-view reveals, hover lifts. Every animation collapses to a static render under `prefers-reduced-motion`. No scroll-jacking, no autoplaying video.
Consistent, tree-shakeable SVG icon set. Only icons actually used are bundled.
Light and dark theme with system preference detection. Both themes are first-class — not an afterthought dark mode toggle.
§02/Design System
Sovereign Instrument.
The aesthetic: precision engineering meets monumental permanence. Schematic coordinate labels, hairline structural grids, corner-bracket aperture motifs, and two-temperature color. The mark — the Sovereign Aperture — is inline SVG, crisp at every size, themeable via `currentColor`.
Type system
Display + Body
IBM Plex Sans
400 / 500 / 600 / 700
One grotesque across the whole site — headlines, prose, UI, navigation. Built for technical documentation: legible at small body sizes, monumental at 700. Self-hosted via `next/font/google`.
Mono
JetBrains Mono
400 / 500
Coordinate labels, eyebrows, metrics, code. The schematic layer — and the deliberate second voice that lets a single sans carry the rest.
Two families, deliberately: one grotesque for language, one monospace for the schematic layer. Both load via `next/font/google` with `display: swap`, subset to `latin`. No third-party font CDN request reaches the visitor — no FOIT, no privacy exposure, no GDPR risk from font telemetry.
Color tokens (OKLCH)
All colors are defined in OKLCH — perceptually uniform, contrast-predictable, and gamut-portable. No hex literals in component code; everything references a CSS custom property.
--signal
oklch(0.82 0.13 190)
Primary accent — live signal, CTAs, focus rings, links
--ember
oklch(0.80 0.14 70)
Secondary accent — the long game / forge, used sparingly
--ink
oklch(0.17 0.015 255)
Structural obsidian — on-signal text
Semantic tokens (`--foreground`, `--background`, `--border`, `--muted-foreground`) shift between light and dark themes while brand tokens remain constant. Contrast ≥ 4.5:1 body, ≥ 3:1 large text, in both themes.
§03/Performance
Fast. Measurably.
Performance is an accessibility concern as much as a speed concern — slow pages exclude visitors on constrained networks and devices. The target is Lighthouse ≥ 95 on Performance / Accessibility / Best-Practices / SEO for key routes.
Performance · A11y · BP · SEO
Standalone output
`output: 'standalone'` in `next.config.ts` produces a minimal `server.js` + `public/` + `.next/static/` bundle. The Docker image copies only what is needed — no `node_modules` bloat, no dev dependencies in production.
Inlined critical CSS
`experimental.inlineCss: true` eliminates the render-blocking `<link rel=stylesheet>` request. Critical styles are inlined in the `<head>`, reducing First Contentful Paint on cold loads.
AVIF / WebP images
`images.formats: ['image/avif', 'image/webp']` in `next.config.ts`. `next/image` serves AVIF to supporting browsers, WebP as fallback, JPEG/PNG as last resort. `priority` prop on LCP images only.
CSS-driven above-the-fold animation
Hero entrance animations are driven by CSS keyframes (not framer-motion JS), removing JavaScript from the LCP critical path. JS animations kick in below the fold where they do not affect LCP.
Self-hosted fonts, no FOIT
Both typefaces load via `next/font/google`, which inlines font-face declarations and serves fonts from the same origin. No cross-origin font CDN request, no FOIT, no CLS from font swap.
§04/Accessibility
WCAG 2.2 AA. Not as an audit exercise.
Accessibility is designed in, not retrofitted. The target is WCAG 2.2 AA conformance on every route — semantics, contrast, keyboard navigation, focus management, and motion safety.
Semantic HTML
Every page uses a single `<h1>`, logical heading hierarchy, landmark regions (`<header>`, `<main>`, `<footer>`, `<nav>`), and descriptive `alt` text on meaningful images. Decorative images use `alt=""`.
Contrast
Body text ≥ 4.5:1 against its background in both light and dark themes. Large text and UI components ≥ 3:1. Signal and ember accents are paired with ink (dark text) when used as text backgrounds.
Keyboard navigation
Full keyboard operability. Skip-to-content link in the `<header>`. Focus states are visibly styled via `focus-visible` — not suppressed with `outline: none`. Tab order follows DOM order.
Reduced motion
All framer-motion animations check `useReducedMotion()` and render children statically when the user has `prefers-reduced-motion: reduce` set. CSS keyframe animations use `@media (prefers-reduced-motion: reduce)` to suppress.
Interactive element sizing
Touch targets ≥ 44×44 CSS pixels. Buttons and links have sufficient padding and explicit accessible names. No icon-only interactive elements without `aria-label`.
§05/Sovereignty in Practice
We built what we recommend.
The choices that make this site a credibility artifact, not just a marketing site.
No third-party trackers
Zero analytics scripts, zero tracking pixels, zero ad network integrations, and no third-party embeds or frames anywhere — not even on the booking page, which reaches our own self-hosted scheduler server-side. Everything is same-origin; there is nothing to consent-gate to an ad network, nothing to disclose to a DPA.
Self-hosted fonts
No Google Fonts CDN request, no Typekit, no Adobe Fonts. Fonts are served from the same origin as the page. No cross-origin dependency, no font-CDN privacy exposure, no GDPR risk.
Bespoke imagery
All site imagery is generated specifically for this site (Grok Imagine), not licensed from a stock library. No watermarked placeholders, no reversed-image searches that trace back to a stock provider.
Docker deploy you control
The production deployment is a Docker image built from the repo on infrastructure you operate — no registry round-trip, no PaaS lock-in, no Vercel edge-function vendor dependency, no build step that phones home. The same image runs identically anywhere Docker does.
Open source toolchain
Every tool in the build chain — Next.js, React, TypeScript, Tailwind, base-ui, framer-motion — is open source. The build is reproducible from the public repository. No closed proprietary build steps.
Executive Briefing
Thirty minutes to clarify your infrastructure risk
Walk us through your vendor footprint and regulatory constraints. We will tell you honestly where sovereignty creates leverage — and where it does not. No pitch deck. No obligation.