Website — Design Direction

Category: website Sources: Direct user creative brief (2026-08-02), 15 reference images (Supervity AI presentation decks, MadeByShape agency site, Amperive EV landing page, a "System Performance" proof-section template, Flex fintech illustration set, nu.image dark hero), Trace's own black/lime/white concept tile mockup Confidence: medium — first pass, several open decisions (see Open Questions) Last Updated: 2026-08-02

This article covers layout, design system, and page-structure direction for tracetechnical.co.uk — the counterpart Website Main covers content/messaging only and explicitly stays out of design/layout territory. Visual Identity covers the underlying brand system (colour, logo); this article covers how that system gets applied specifically to the website.

Status and Build Plan

The real site will eventually live in this repo and deploy to Cloudflare (Pages) — but a wireframe/design pass happens first, done by the user outside this repo, before any build work starts here. Nothing in this article should be treated as "go build it" — it's the creative direction to build from, once the wireframe exists.

The Bar: Non-Negotiables

• Never generic SaaS-template. No stock hero-with-laptop-mockup layout, no default component-library look, nothing that reads as "put together on WordPress in an afternoon."
• Awwwards-calibre, not just "clean and professional." The reference set the user supplied (see Reference Sites below) is the quality bar, not a stretch goal.
• The site must never look basic even though the UX must be dead simple. These are not in tension — simplicity of navigation and boldness of design are two different axes, both required at once.
• The "60-year-old mother" test: at any point on the site, a first-time visitor with zero PPE/compliance background must be able to tell what Trace does, who it's for, what's on offer, and exactly where to click next. This is a hard requirement on IA and copy clarity, not a design-polish afterthought — see Which Service Do I Need and the Clarity Rule in Website Main.
• No content-trap feel. Not every section ends in a "Contact Us" button. CTAs should feel like a natural next step at the right moments, not a wall of identical asks repeated down the page.

Colour Direction

Decided 2026-08-02: green replaces yellow as the primary accent. Documented in Visual Identity as Trace Green #C4F136 (provisional shade, to be finalised alongside the logo redesign — the production logo files still use yellow, see Brand Assets). Every strong reference the user supplied leaned lime/acid green as the accent against black/white/stone (Supervity, MadeByShape, Amperive, Flex); only one (nu.image) used yellow. The existing discipline still holds: accent colour appears in tiles, stat blocks, and alternating sections, never as a full-page wash (~10–15% ceiling, per Visual Identity).

Typography

Deliberately not locked to one weight or one pairing. Reference pattern to build from:

• Mixed weight within a single page — headlines don't all have to be bold; some sections should read lighter/crisper for contrast.
• Contrast pairing works well (e.g. MadeByShape pairs a display serif moment against a bold grotesque headline and a plain sans body) — different type personalities for different moments, not one font doing every job.
• Overall feel: crisp and clear, confident without being shouty. Oversized statement type (e.g. a giant marquee/scrolling line, an oversized footer wordmark like MadeByShape's "Crafting since 2010") is a good rhythm device to break up sections without needing an image.

Layout and Rhythm

• Whitespace-first. Colour is applied via sections, boxes, and accents — not as a dominant background wash.
• No repeating section templates. Explicitly avoid the generic-SaaS pattern of alternating left-image/right-text, right-image/left-text down the page — that mechanical repetition is exactly the "template" feel the whole brief is trying to avoid, even when individual sections look polished. Each section should earn its own layout rather than reuse the previous section's structure with content swapped in.
• Alternating light/dark section rhythm down a page is fine as a colour rhythm (see reference examples) — this is distinct from the banned left/right structural repetition above.
• Stat tiles and proof blocks (bold number + short label, colour-blocked) as a recurring component — see the "System Performance" reference.
• Numbered/labelled progression tiles (e.g. 01/02/03/04 step markers) are a good fit for explaining the Trace PPE Pathway or a process sequence.

Buttons and Links

Buttons and links are bespoke UI decisions, not a generic button class — and explicitly not pill-shaped. The user's first instinct pointed at MadeByShape's rounded pill buttons as the quality bar, then corrected: pills specifically read as generic/impersonal on reflection. Take the underlying quality — a button genuinely inviting to click, with a directional cue (like the arrow on "About Shape ↗"), tight and intentional, never a flat rectangular "blob" — but the actual shape/form needs to be something more personal and brand-unique to Trace, not a pill. This is an open design problem to solve, not yet resolved — see Open Questions.

Responsive Priority

Design for 14" laptop first — that's what most clients will actually be on. Desktop is second priority. Mobile is explicitly deprioritised ("usually looks after itself") — don't spend design effort mobile-first or mobile-equal; get laptop and desktop right, then adapt mobile to follow, not lead.

Imagery Policy

• Maximum one photo of Glen on the whole site, preferably on the About page.
• Apparel imagery is close-ups only — materials, components, construction — never a shot that could read as Trace producing, selling, or being a PPE brand itself. Only motorcycle or hi-vis garments are permitted for now (matches the master-specialism-first framing in Positioning).
• No images on article/blog pages. Use a creative substitute instead — table-formatted data, pull quotes, or the line-art illustration system below — not stock photography or generic blog header images.

Illustration System

Decision: character-style line art, in the spirit of the Flex reference (simple, hand-drawn human figures/characters with personality on flat colour backgrounds) — chosen over technical/schematic line art of PPE components. Primary use case is the article system, with potential use elsewhere on the site as a quirky, distinctive brand device that reduces reliance on photography. This is a genuine departure from the identity's previous "no people at all unless wearing gear" photography rule — that rule was about photography, not illustration, and the typography/imagery/layout section of Visual Identity is intentionally open as of 2026-08-02, so this doesn't conflict with anything still standing.

Information Architecture

• "Problems we solve," not "services." The site should never present a raw service list as the primary framing — situational, problem-first routing is the model (see Which Service Do I Need), consistent with the existing Clarity Rule in Website Main.
• Article system must be strong — this is the primary LinkedIn tie-in (see below), so it can't be an afterthought blog template.

LinkedIn Integration

• The site's own article system is the canonical source — every article gets posted to LinkedIn from there, not the reverse.
• Follow/connect links to both Trace's and Glen's LinkedIn, on their respective pages (company page vs. Glen's personal profile) — styled to match the site's visual system, with clear LinkedIn iconography. Not a buried text link ("follow us") — a designed component, in keeping with the Buttons and Links standard above.
• LinkedIn is described by the user as "baked into the website core" — treat it as a first-class piece of the site's information architecture, not a footer afterthought.

Reference Sites — What to Take From Each

Forward-Looking: Service-Matching Funnel

The user is separately planning a complex questionnaire-style funnel to route visitors to the right service, intended to eventually live on the site — noted here for reference and future cross-linking with Which Service Do I Need, not yet specced or built. Revisit this article once that funnel's logic is defined, since it will likely become a core piece of the site's IA and CTA structure.

Open Questions

• Exact final green shade — #C4F136 is a first documented value from the reference set, not yet validated against the redesigned logo; expect this to be refined once the logo redesign lands.
• Exact typefaces — direction is "mixed weight, crisp, contrast pairing," not yet specific font choices.
• Button/link shape — not decided. Pills are explicitly ruled out; a more personal, brand-unique form still needs to be designed.
• Whether/how illustration extends beyond articles (site-wide device vs. article-only).
• No wireframe exists yet — this article will need a revisit once the user's wireframe pass is done, before any real build work starts in this repo.

Related Articles

• Visual Identity
• Website Main
• Which Service Do I Need
• Voice Guide
• Offer Architecture