Website System

Category: website Sources: approved Trace website build, Trace visual identity, voice guide, service architecture Confidence: high Last Updated: 2026-08-08

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 the copy, typography, proportion and restraint, not from decorative devices.

The current production source is:

digital-home/digital-home-frontend/src/

The shared styling and behaviour are:

  • src/assets/style.css
  • src/assets/site.js
  • src/assets/booking.js

When creating or changing a page, inspect the current built page and these source files first. Do not recreate the system from memory.

The first 30 seconds

A visitor should be able to 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

Use these words to judge every page:

  • 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
  • card-heavy or border-heavy
  • dependent on oversized type
  • vague, glossy or over-sold

Typography

The website uses Plus Jakarta Sans for every role. The fonts are self-hosted as WOFF2 files. Do not introduce another display or body family.

Fallback stack:

"Plus Jakarta Sans", Arial, sans-serif

Approved weights:

  • 300: rare light support
  • 400: body copy and italic copy
  • 500: navigation and quiet emphasis
  • 600: headings, buttons and key labels
  • 700 and 800: compact marks or exceptional emphasis only

Core desktop scale:

Role Size Line height Weight Tracking
Page statement clamp(2.6rem, 4.5vw, 4.2rem) 1.04 600 -0.058em
Section headline clamp(1.9rem, 3.15vw, 3.15rem) 1.08 540 -0.048em
Compact title clamp(1.22rem, 1.75vw, 1.6rem) 1.24 560 -0.03em
Body 1rem 1.65 400 normal
Lead copy clamp(1.05rem, 1.38vw, 1.22rem) 1.62 400 normal
Context label 0.72rem 1.3 650 0.12em uppercase

Mobile is deliberately quieter:

  • page statements: approximately 32 to 38px
  • section headlines: approximately 25 to 30px
  • lead copy: 16px
  • body copy: 16px
  • no headline should force awkward one-word lines merely to look dramatic

Large type is reserved for the page's one governing idea. If several regions look equally loud, reduce the secondary ones.

Colour system

Trace Yellow is #F1F252. It is the brand signal, not the default surface.

Token Hex Use
Trace Ink #1D1D1F primary text, dark controls, decisive structure
Body Grey #5F5F65 reading copy
Muted Grey #636368 labels and secondary context
Cool Paper #FBFBFD primary page ground
Quiet Surface #F3F3F5 grouped sections, inputs and supporting blocks
Deep Surface #E9E9EC stronger neutral separation
Hairline #D2D2D7 rare boundaries
Strong Hairline #A9A9AF controls that need a clearer edge
Link Blue #075FC5 unmistakable text links
Link Hover #004B9E link interaction
Trace Yellow #F1F252 key CTA, selected state, latest/current signal, consequence
Error #A63D32 validation and failure
Completed #666700 brand-aligned completion indicator
Home Hero #0D1117 the one full-width dark opening

Rules:

  • The interface must work in ink and neutral surfaces before yellow is added.
  • Use yellow for one priority at a time. Not every button is yellow.
  • A soft yellow is made by mixing roughly 38% Trace Yellow into Cool Paper.
  • Do not substitute green tints for the brand signal.
  • Blue is for links, not general decoration.
  • The site is light-only. Dark areas are deliberate local compositions, not a second theme.

Layout and spacing

Primary containers:

  • content: 1180px maximum
  • wide navigation and editorial compositions: 1320px maximum
  • desktop and tablet gutters: 24px each side
  • mobile gutters: 16px each side

Navigation:

  • 64px high on desktop and tablet
  • 60px high on small mobile
  • switches to the menu control below 920px

Section spacing:

  • standard desktop section: clamp(88px, 10vw, 140px)
  • compact desktop section: clamp(64px, 7.5vw, 100px)
  • standard mobile section: 56 to 64px
  • compact mobile section: 44 to 50px

Use whitespace and tonal change before adding a border. Use a border only when two adjacent regions would otherwise read as one.

At 920px:

  • the main navigation becomes a full-height menu
  • asymmetric grids reduce or stack
  • dropdown descriptions disappear in the mobile menu
  • the dark home hero uses light menu and submenu text

At 700px:

  • layouts become one column unless a small two-column statistic group remains clearer
  • form fields stack
  • typography reduces
  • tables become labelled cards where needed
  • no content depends on horizontal scrolling

At 420px:

  • display type reduces again
  • section padding tightens
  • article and legal containers use smaller internal padding

The reading order, focus order and visual order must match.

Shape, surfaces and elevation

  • Buttons are compact pills with a 44px minimum touch target.
  • Inputs use 12px corners.
  • Genuine contained surfaces use 16px corners.
  • Editorial groups stay open if spacing can carry the relationship.
  • Shadows are for transient overlays such as navigation dropdowns and the cookie notice.
  • Do not combine a border and shadow on every card.
  • Do not create a grid of equal cards when the content has a clear priority.

Buttons and links

Primary dark button:

  • Trace Ink background
  • Cool Paper text
  • 44px minimum height
  • compact horizontal padding

Signal CTA:

  • Trace Yellow background
  • Trace Ink text
  • reserved for a page's highest-priority action or current signal

Secondary action:

  • usually a quiet underlined text link
  • do not wrap every secondary action in an outlined pill

Focus:

  • 3px visible focus ring
  • sufficient offset
  • keyboard focus must never rely on colour alone

Navigation

Desktop navigation is centred, compact and quiet. Service and Insights dropdowns use opaque paper, short descriptions and a restrained ambient shadow.

The home header is transparent-dark over the hero, then becomes paper after the hero. The navigation, menu button and every submenu link must switch with that state.

On mobile:

  • menu target is at least 44 by 44px
  • menu fills the viewport below the header
  • submenu rows are touch-sized
  • text remains light over the dark home hero and dark over the paper state
  • closing the menu restores page scroll
  • Escape closes the menu and focus returns predictably

Page patterns

Homepage

The homepage sequence is:

  1. dark proposition hero
  2. six situation-led service routes
  3. one concise why-it-matters statement
  4. Glen's credibility and independence
  5. one audience callout
  6. diagnosis or booking

Do not add a second service directory, process diagram, forced contact form, testimonial strip or decorative proof section.

The provisional Field Notes have been removed. Do not restore a latest-note module until a complete Field Note is approved for publication.

Services

The Services page is a routing layer. Start with what is stuck, show all six service names and outcomes, then offer the private three-question diagnosis. Do not force a form onto this page.

Service detail

Use an existing service page as the template. The usual sequence is:

  1. situation-led hero
  2. concise service mechanism
  3. recognisable situations
  4. why it matters
  5. scope, deliverables or comparison
  6. boundary or limitation
  7. contact handoff

The service name may appear in context, but the opening statement should still sound like the visitor's problem.

About

Use Glen's greyscale portrait and first-person voice. Credibility comes from the route he has worked across and the independence boundary, not from inflated titles.

The key boundary is:

Trace is not a test house or certification body. That independence is the point.

Guides

Guides use a paper reading surface on a quiet-grey page. Give the answer early, define the term, explain scope and limits, then provide one practical next step.

Field Notes

Field Notes remain an editorial channel, but the live hub carries an honest preparation state until permanent notes are ready. When publishing resumes, the newest complete note may own one Trace-yellow consequence panel. Archive entries remain paper.

Recall Watch

Recall Watch is a cumulative annual record. The current year is labelled Running. Completed years remain accessible. The desktop record table becomes labelled cards on mobile, never a horizontal content scroll.

Forms

Ask for the situation first. Two or three sentences is enough. Name and company remain low-effort fields; email is required so Glen can reply.

Every required field needs:

  • an explicit label
  • a visible, associated error message
  • aria-invalid only when invalid
  • focus moved to the first problem after submit
  • a clear success or fallback state

Until the Cloudflare endpoint is configured and tested, forms open a prepared email. Do not pretend data was submitted to the website.

Booking

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

Imagery and marks

The website mark is the compact TR monogram. The navigation uses the same minimal TR expression.

Glen's greyscale portrait is the only current photographic exception. Do not introduce stock photography, image heroes, decorative product collages or AI-generated product imagery.

Use the supplied social preview at:

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, prices or urgency
  • no guarantee of certification, approval or market access
  • distinguish Trace from test houses, certification bodies, regulators and independent decision-makers
  • use full stops, commas or colons instead of em dashes

The strongest copy often contains a concrete noun: product, sample, report, certificate, claim, decision, owner, expiry or route.

Accessibility and behaviour

Minimum requirements:

  • one H1 per page
  • sequential heading levels
  • semantic header, navigation, main and footer landmarks
  • meaningful image alternative text
  • visible skip link
  • keyboard-operable dropdowns, tabs and diagnosis
  • arrow, Home and End keys for tab sets
  • 44px minimum touch targets
  • WCAG AA contrast
  • no essential information conveyed by colour alone
  • reduced-motion mode removes non-essential transitions without hiding content
  • no horizontal page 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: functions/
  • Cloudflare headers and redirects: src/root/
  • production URLs are extension-free
  • assets receive content hashes
  • canonical and social metadata are injected during the build
  • old public URLs redirect to their current equivalent

The Cloudflare Pages project root is digital-home/digital-home-frontend. Build command: npm run build. Output directory: _site.

Mandatory acceptance check

Before a page is treated as finished:

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

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

Related Articles