Website System

Category: website Sources: shipped v2 site (digital-home/frontend/src/, style.css, DESIGN-HANDOVER.md), visual identity, voice guide, service architecture Confidence: high Last Updated: 2026-08-11

This article describes the old website — the site currently live at tracetechnical.co.uk. A redesign is planned (not started); it does not clone this system. See Website Redesign Direction for the redesign's direction. Until the redesign ships, this remains the accurate description of what's live and governs old-website-only work.

Purpose

The Trace website helps someone carrying a PPE product decision recognise their situation, understand why it matters, see why Glen is credible and choose a proportionate next step.

It is a premium technical editorial site, not a conventional consultancy template. It should feel calm, exact and authored. The distinction comes from copy, typography, proportion and restraint, not from decorative devices.

Production source

The live site is the design reference. Read the built page and its stylesheet before changing anything. Do not rebuild the system from memory.

• Source: digital-home/frontend/src/
• Stylesheets:
  • assets/style.css — global tokens, buttons, forms, navigation, reading pages, Recall Watch, diagnosis, About
  • assets/service-detail-uniform.css — the v2 service-page language; loads last on all six service pages
  • assets/services-route-cert.css — Certification's five-party panel
  • assets/services-issue-range.css — Range Review specifics (decision ledger, depth panels, note card); Issue Support runs on the uniform sheet alone
  • assets/services-owner-training.css — Technical Ownership comparison table and Team Training specialism
  • assets/home-services-redesign.css — homepage (hm-*) and the services index
• Behaviour: assets/site.js (contextual header, mobile menu; the header watches .hm-hero), assets/booking.js

The first 30 seconds

A visitor should answer four questions without knowing compliance terminology:

1. What does Trace help with?
2. Which situation sounds like mine?
3. Why should I trust Glen with it?
4. What is the smallest useful next step?

The default route is:

recognisable situation -> consequence -> mechanism -> proof and boundary -> next action

Name the service after the visitor understands the value. Do not open with an internal process or a catalogue of capabilities.

Design character

The language is v2 "soft modern": Tesla × Apple. Pure white ground, soft grey panels with rounded corners, restrained type with clear roles, one designed moment per section that depicts the content, and generous air. No line ornament anywhere.

Judge every page against these words:

• premium, minimal, calm, technical, credible, direct, human, edited

Reject work that feels:

• like a generic SaaS landing page
• like a large corporate consultancy
• decorative for its own sake
• dependent on oversized type
• vague, glossy or over-sold

Two structural rules hold everywhere:

• A block's shape must be earned by its content. A directory you click, a sequence in time, a set of statements and a set of articles are four different things and must not look alike.
• No two adjacent blocks may share both a column count and a surface treatment. A page of identically sized grey rounded rectangles reads as a template, however good each block is.

Do not reintroduce (retired vocabulary)

• 1px ink top-rules, square route nodes, hairline ledger rows (left-label definition lists)
• eyebrow / kicker micro-labels above headings, and floating right-hand notes on headers
• the old warm off-white ground (#fbfbfd) — the ground is now pure white
• chunky form fields with glow focus, and underlined table links
• "left heading / right content" as the default section shape, and sticky side headings
• the retired TR monogram — the navigation wordmark is text and the favicon uses the Guiding Progress mark

Typography

The site uses Inter, self-hosted as a single variable WOFF2 (assets/fonts/inter-latin-wght-normal.woff2), preloaded. Do not introduce another display or body family.

Token: --font: "Inter", Arial, sans-serif

Core desktop scale:

Reading pages run at a quieter scale (see Reading pages). Mobile is deliberately quieter: page statements ~32-38px, section headlines ~25-30px, lead and body 16px. Large type is reserved for the page's one governing idea; if several regions look equally loud, reduce the secondary ones.

The eight Plus Jakarta Sans WOFF2 files in assets/fonts/ are retired. They are unreferenced by any @font-face and still deploy; do not add them back into a font stack.

Colour system

Trace Yellow (--signal, #F1F252) is the brand signal, not a surface. The interface must work in ink and neutral surfaces before yellow is added, and yellow marks one priority at a time.

Rules: use yellow for one thing at a time; do not substitute green tints for the signal; blue is for links, not decoration. The site is light-only. Dark areas (the home hero) are deliberate local compositions, not a second theme.

Layout and spacing

• content width: --wrap 1180px; wide editorial width: --wrap-wide 1320px
• gutters: 24px desktop/tablet, 16px mobile
• navigation height: --nav-height 64px (60px on small mobile); switches to the menu control below 920px
• radii: buttons 4px (--button-radius), fields 6px (--field-radius), soft panels ~12px, contained cards ~16px, the reading sheet 20px
• section spacing: standard desktop clamp(88px, 10vw, 140px); compact clamp(64px, 7.5vw, 100px); mobile service and homepage sections generally 76-92px, with extra separation where adjacent white sections need to read independently

Use whitespace and tonal change before a border. Breakpoints: at 920px the nav becomes a full-height menu and asymmetric grids stack; at 700px layouts go single-column and tables become labelled cards; at 420px display type and padding reduce again. Reading, focus and visual order must match, with no horizontal overflow at 320px.

Shape, surfaces and elevation

• Buttons are compact pills with a 44px minimum touch target.
• Genuine contained surfaces are soft rounded panels on --surface; hairlines appear only inside real tables.
• Do not combine a border and a shadow on the same element.
• Do not build a grid of equal cards when the content has a clear priority.
• Shadows are for transient overlays only (navigation dropdown, cookie notice).

Buttons and links

• Primary dark button (.btn-ink / .btn-call): --ink background, white text, 44px min height.
• Signal CTA: --signal background, --ink text; reserved for a page's highest-priority action, and the nav Book a call.
• Secondary action: a quiet underlined text link, not an outlined pill.
• Focus: 3px visible ring, sufficient offset, never colour alone.

Navigation

Desktop navigation is centred, compact and quiet, with the white signature lockup. It reduces slightly at laptop widths so it does not compete with the navigation. Service and Insights dropdowns use opaque paper, short descriptions and a restrained shadow.

The home header is black-tinted over the dark hero, then becomes opaque graphite after it (site.js watches .hm-hero). On mobile the menu fills the viewport below the header, rows are touch-sized, current and pressed items remain light on the dark ground, opening Services closes Insights (and vice versa), Book a call is an ordinary menu row, Escape closes the menu and returns focus, and closing restores scroll.

Page patterns

These are the design briefs for each page type — stable requirements, not a description of any one day's blocks.

Homepage (index.njk)

A dark proposition hero, then a small number of blocks that each earn their own shape: the six situation-led service routes, one concise why-it-matters statement, Glen's credibility and independence, one audience callout, and a route to diagnosis or booking. The two hero actions stack on mobile. Glen's About section stays on the white editorial ground rather than becoming a full-width grey band. It loops published Field Notes from the articles data. Do not let every block default to the same grey rounded rectangle, and do not add a second service directory, process diagram, forced contact form or decorative proof strip.

Service detail (six pages)

Each service page is a direct-response sales chain built on service-detail-uniform.css:

service hero -> agitation narrative -> offer depiction -> choice panels -> authority and boundary -> close with risk reversal

• Service hero: the service name as a solid-ink h1, centred on a --surface band attached to the nav (~62vh), then the sales headline as a standfirst, a lede, and the yellow CTA. Mobile heroes keep generous bottom clearance and never clip descenders.
• Narrative column (.svc-narrative, ~660px) for agitation and authority prose; visitor-sentence quotes in .svc-quote.
• Choice panels (.svc-panel): every option must state who it is for (.svc-panel-when) and what you receive (.svc-panel-receive) — no guessing games. Document depictions use .svc-doc, with any quiet note UNDER the panel (.svc-doc-note), never inside or floating. Route Finder and Issue Support use four separate .svc-doc-cards panels in a 2x2 desktop grid and a one-column mobile stack because each deliverable carries equal weight.
• Depictions where the content earns one: Range Review's decision-ledger table with pills (Fix = soft-yellow tint); Certification's five-party panel (Client / Factory / Trace as the white cell / Test house / Certification body); Technical Ownership's tier comparison table; Team Training's session panels with the yellow-tinted Motorcycle Deep Dive.
• "Could this be you?" field-note card (.svc-note-card) at the end of the authority section: the whole card is the link, "Quick read" top-right.
• Close (.svc-close) on --surface with the slim form.

The service name may appear in the hero, but the sales headline should still sound like the visitor's problem. No text after a hero CTA button; mould the layout per page, never copy-paste it.

Services index (services.html)

A routing layer, not a sales page. A shared service hero, then a genuine <table> inside a soft panel (hairlines only) that routes from "what is stuck" to the right service, plus a link to the private three-question diagnosis. Do not force a contact form onto this page.

Reading pages (Guides, Field Notes, article.njk)

Reading pages are deliberately not service pages: no gradient hero, no sales panels. The page ground is grey (--surface); the article is one white sheet (920px, radius 20, generous inline padding, full-bleed on mobile).

• Running text is a single colour (--body); headings and bold are the only ink. .reading-intro is an ordinary paragraph, not a second lede.
• Scale: h1 ~28-37px, section h2 ~19-22px with rhythm carried by heading margins, body 16px/~1.72, meta ~11.5px. One eyebrow style: sentence case, never uppercase.
• Content treatments follow Publishing Guide: the editorial callout is a thick left-Ink border (no fill, no yellow, no rounded card); a margin note is a quiet grey box used sparingly; a signature framework reads as an ordinary section, not a yellow or reduced-width block.
• The close is open text plus one button (no decorative arrow, no panel), so grey rectangles never stack; subscription lives only in the shared footer.
• Meta back-links read "Back to field notes" / "Back to guides". Field Note category and date share their own mobile row directly above the title; the back control and Field Note badge sit above with stronger separation.

Guides (guides.html + guide-*.html)

Hand-built pages. Give the answer early (one short-answer callout), define the term, set scope and limits, then one practical next step and a single service bridge. See Publishing Guide for the editorial standard.

Field Notes (insights.njk + article.njk)

Field Notes are backend-driven: src/_data/articles.js fetches published rows from the Digital Home backend's Supabase at build time (status = 'published', content_type = 'article'), insights.njk renders the hub and article.njk generates one reading page per note at /insights/<slug>/. Publishing a note means creating the row and triggering a rebuild; there is no page to hand-build. Notes follow the shared reading-page standard and CRM markup contract in Publishing Guide; the hub lists newest first, all in the same paper treatment. See Publishing Guide.

Recall Watch (recall-watch.html)

A cumulative annual record. The current year is labelled Running; completed years stay accessible. The desktop record table becomes labelled cards on mobile, never a horizontal scroll. Yellow marks the running or primary statistic only.

About (about.html)

Glen's greyscale portrait and first-person voice, as stacked centred blocks (.about-sec). The hero pairs a larger governing statement with a closer, larger portrait so the two read as one composition. Credibility comes from the route he has worked across and the independence boundary, not inflated titles. The key boundary: Trace is not a test house or certification body, and that independence is the point.

Forms

Ask for the situation first; two or three sentences is enough. The short paragraph beneath each close heading stays concise enough to scan on mobile. Fields are Tesla-slim (~40px, 6px radius): grey fill on a white ground, white fill on a grey ground, crisp ink focus ring. Every required field needs an explicit label, a visible associated error, aria-invalid only when invalid, focus moved to the first problem on submit, and a clear success or fallback state.

Enquiry forms submit to the same-origin /api/contact Cloudflare Function, which records the enquiry in the Digital Home CRM and can email Glen a notification. The visitor stays on the page; submitting must not open their email application, and the backend capture key is never exposed in browser code.

Booking (booking.html)

Embeds the 30-minute Cal.com calendar on that page only, with a loading state, a failure link and a titled iframe. Privacy and cookie pages must continue to name Cal.com.

Imagery and marks

The navigation wordmark is live text. The favicon is the black tile with the white Guiding Progress mark; there is no nav icon. The signature lockup places the same mark after the outlined Trace Technical wordmark for collateral and deliberate brand moments. Glen's greyscale portrait is the only photographic exception. Do not introduce stock photography, image heroes, decorative product collages or AI-generated product imagery. The social preview is src/assets/img/trace-social-preview.png.

Copy rules

Apply Voice Guide and Banned Words. In short: British English; Glen in first person for Glen's work; Trace for the legal entity and service boundary; no business-wide "we"; plain technical language; no invented numbers, clients, outcomes or urgency; no guarantee of certification, approval or market access; distinguish Trace from test houses, certification bodies and regulators; full stops, commas or colons instead of em dashes.

No prices on the public site, with one named exception (Route Finder's £395) — see Offer Architecture. The strongest copy usually contains a concrete noun: product, sample, report, certificate, claim, decision, owner, expiry or route.

Accessibility and behaviour

One h1 per page; sequential headings; semantic header, navigation, main and footer landmarks; meaningful alt text; a visible skip link; keyboard-operable dropdowns, tabs and diagnosis (arrow, Home and End for tab sets); 44px touch targets; WCAG AA contrast; no meaning by colour alone; reduced-motion removes non-essential transitions without hiding content; no horizontal overflow at 320px.

Production implementation

Eleventy assembles and hardens the approved static pages without changing their rendered design.

• input src/, output _site/, Cloudflare Pages Functions in functions/, headers and redirects in src/root/
• production URLs are extension-free; assets receive content hashes; canonical and social metadata are injected at build; old URLs redirect to current equivalents
• the Cloudflare Pages project is named brand-wiki (it is the frontend deploy), root directory digital-home/frontend, build npm run build, output _site, production branch master

Operational facts (Supabase build variables, the publish-time deploy hook, what is wired versus pending) live in Infrastructure.

Mandatory acceptance check

Before a page is treated as finished:

1. Compare it against an approved page at 1366×900.
2. Check 768×1024, 390×844 and 320×800.
3. Confirm no horizontal overflow.
4. Open the mobile menu over both the dark home hero and the paper header state.
5. Use the page with keyboard only.
6. Trigger every form error and recovery state.
7. Check local links and anchors, and the browser console.
8. Build with Eleventy and review the production output, not only the source.

If a new page does not look as if it belongs beside the current Services, About and reading pages, do not ship it.

Related Articles

• Visual Identity
• Brand Assets
• Voice Guide
• Banned Words
• Publishing Guide
• Website Copy
• Offer Architecture
• Infrastructure