Surface A · clear
Light tint, 18px blur, 165% saturation. Cards, meta panels, forms.
background rgba(255,255,255,.70→.34); rim 1px; shadow 0 32px 70px −34px
Menu
Overview 01 About 02 Capabilities 03 Training 04 Vehicles 05 Parts 06 Global reach 07 Contact 08 Start a conversationDesign system
A living specification for this site: tokens, glass surfaces, type scale, components, motion and accessibility — reviewed against the same rules the pages are built on.
01 · Colour
The site is light. Depth comes from smoked-glass surfaces, not from a dark page. Accents appear on less than five per cent of any screen.
| Role | Token | Rule |
|---|---|---|
| Ground | --paper | Never pure white; cool porcelain keeps glass readable |
| Text | --ink / --body | 17.9:1 and 8.6:1 on paper |
| Accent | --accent | Links, kickers, numbers only — never large fills |
| Secondary | --violet | Brand tags and rim refraction, never a gradient field |
| Metal | --metal | One stop in the glass rim gradient; nowhere else |
02 · Glass
Glass is an optical material: a 1px refractive rim, a specular sweep on hover, and a tint that changes with depth. It is used on navigation, hero, cards and CTA — never behind body copy.
Surface A · clear
Light tint, 18px blur, 165% saturation. Cards, meta panels, forms.
background rgba(255,255,255,.70→.34); rim 1px; shadow 0 32px 70px −34px
Surface B · smoked
Obsidian tint at 76–90%, 20px blur. Navigation, drawers, CTA panels.
background rgba(17,29,44,.90→9,17,28,.76)
Surface C · none
Editorial ground: steps, FAQ, timelines, body copy. No glass, no shadow.
Legibility first. Glass never sits behind long text.
Fallback: @supports not (backdrop-filter) swaps every surface to a 92% opaque tint — same geometry, same rim, no blur. Blur is capped at 22px and applied to fewer than a dozen elements per page; the morphing form is a single element, paused under reduced motion.
03 · Type
Lora carries headlines and pull statements; Manrope carries everything a reader has to act on; Space Grotesk is reserved for labels and data.
04 · Components
One primary action per screen. Glass is a container, not a decoration — if a container holds no action, it stays flat.
Icon, name, one line, link pinned to the base. Equal heights by grid.
How repair worksWhen a card carries numbers, the numbers use tabular figures and sit in their own row.
Browse gradingNo card ever holds more than 90 words. Long copy goes in an editorial block.
Curriculum05 · Motion
Motion explains a change or rewards a pointer. Nothing loops in the reader's peripheral vision except one decorative form, and that form stops under reduced motion.
| Motion | Where | Timing | Reduced motion |
|---|---|---|---|
| Reveal | Section entries | 14px rise, 700ms, 80ms stagger | Instant |
| Specular sweep | Glass on hover | 900ms, translateX only | Disabled |
| Magnetic CTA | Primary buttons, pointer-fine only | ≤ 5px, spring 280ms | Disabled |
| Lens parallax | Hero image | 3.5% of scroll, rAF-throttled | Disabled |
| Morph | Decorative orb | 22s ease-in-out | Static shape |
| Drawer | Mobile navigation | 320ms fade + 8px | Instant |
06 · Content
The testimonial and case-study components are built and styled, but they publish only with a verifiable source. No invented quotes, no placeholder logos.
Testimonial · CMS slot
“Quote pending verification.”
Fields: quote, name, role, organisation, market, date. Publish after written release.
Case study · CMS slot
Programme, market, scope, outcome.
Fields: client (or anonymised), market, fleet size, scope, handover date, outcome.
Service · CMS slot
Capability, scope, documents, lead time.
Fields: title, summary, bullet scope, document set, CTA target.
07 · Accessibility
Checked against the contrast of every text/ground pair actually used, not against idealised swatches.
nav; drawer is role="dialog" with focus on open, Escape to close, and focus returned to the trigger.prefers-reduced-motion removes reveal, sweep, parallax, magnetism and the morph.Why this is worth the budget
Anyone can buy a template. This is a system: a material, a type hierarchy, a content architecture and a set of evidence rules — built once, then reused across every market and every future page.