Iteration History

Design Evolution

Each iteration resolved specific design challenges — from establishing the visual foundation to achieving full content fidelity with real brand assets.

Version 04.7 — Latest
Video + Kai AI Hero
1 June 2026
  • Live Kai chatbot in the hero right panel — interact from landing
  • Industry selector: Rail · Maritime · Campus · Utilities · Mining · Security
  • Typing indicator, contextual AI replies per sector, free-form input
  • Video background continues playing — hero stays cinematic
▶ Video + Kai
Open Full Preview
Version 04.6
Video Hero Edition
1 June 2026
  • Looping video background in the hero section
  • Cycling industry images in the right window with crossfade transitions
  • LIVE monitoring eyebrow tag with animated teal dot
  • Industry chips — Rail, Maritime, Campus, Utilities, Mining, Security
  • Rendered via hyperframes-html — pure motion design, no stock footage
▶ Video Hero
Open Full Preview
Version 04.5
Image Hero Edition
1 June 2026
  • Full-bleed cinematic hero with AI-generated photorealistic background
  • Messaging: "The Operational Intelligence Platform"
  • HUD corner elements and dark overlay composition
  • Replaced animated command-center with real photographic asset
  • Grok Imagine — industrial port at dusk with AI detection overlays
Image Hero
Open Full Preview
Version 04
Production — Real Content & i18n
20 May 2026
  • All copy scraped from live siyte.com — zero placeholder text
  • 10 real partner/customer logos from Webflow CDN
  • 11 real team headshots with names and roles
  • Real testimonials: Matt Swindail (Axis), George Barratt (Network Rail)
  • Language selector: EN, DE, FR, ES, AR with full i18n translations
  • Three-pill nav: Logo + Enquire | Page tabs + More | Lang + Theme
  • RTL support for Arabic with mirrored layout
  • 8 industry verticals with real descriptions
  • 6 resource articles with full body text
  • Partner ecosystem with 6 partner types and 6 programme benefits
✓ Core Build
Open Full Preview
Version 03
Refinement — Navigation & Kai
18 May 2026
  • Grouped navigation with "More" dropdown menu
  • Icon-only theme toggle (sun/moon) replacing text
  • Expanded Kai AI page with 5 new sections
  • Chat interface mockup with insight panel
  • "What operators ask" — real prompt examples
  • Capabilities grid and Kai-specific FAQ
  • Improved copy throughout all pages
Refinement
Open Full Preview
Version 02
Expansion — Full Sitemap
18 May 2026
  • Expanded to 7 pages matching full sitemap structure
  • Added Resources hub with 6 filterable article cards
  • About Us with mission, 3 values, team grid
  • Partner Programme with Bronze/Silver/Gold tier cards
  • Enquiry page with contact form + success state
  • Full article detail views rendered within the SPA
  • InnovateUK badge and public-sector credibility signals
Expansion
Open Full Preview
Version 01
Foundation — Core Identity
18 May 2026
  • Established dark/light theme system with OKLch colour tokens
  • 3-page structure: Overview, Platform, Kai AI
  • Floating pill navigation with glassmorphism
  • Double-bezel card architecture (soft-premium finish)
  • Hero with ambient radial mesh blob + grid overlay
  • Bento grid, marquee logo strip, feature rows
  • Button-in-button CTA pattern with trailing arrow
Foundation
Open Full Preview
Design Specification

Brand Tokens

The visual foundation powering every iteration — colour, typography, and component architecture.

Dark Theme Palette

Deep navy foundation with vibrant cyan/teal for primary CTAs and HUD overlays. Glassmorphism via rgba(255,255,255,0.05) surfaces.

Light Theme Palette

Stark white/light slate foundation. Teal shifts to a deeper cyan for accessibility on light backgrounds. Glass surfaces at rgba(255,255,255,0.6).

Typography

Plus Jakarta Sans 800

Display · clamp(36px, 6vw, 90px) · -0.036em tracking

JetBrains Mono 400

Mono · HUD labels, metadata, stats, eyebrow tags

Glassmorphism

backdrop-blur(24px) on navigation and overlay surfaces. 1px borders at rgba(255,255,255,0.08). Inset highlights at rgba(255,255,255,0.06). Diffuse shadows only — no hard drops.

Card Architecture

Double-bezel pattern: outer shell (2rem radius, 6px padding, hairline border) wraps inner core (calc(2rem - 6px) radius, surface background). Creates depth without heavy shadows.

Motion

All transitions: cubic-bezier(0.32, 0.72, 0, 1) at 700ms minimum. IntersectionObserver scroll reveals. Hover: outer scale(0.98) on :active, inner arrow translate(1px,-1px) scale(1.06). No linear or ease-in-out.

Interaction Patterns

Button-in-button CTA (pill with circular trailing arrow). Three-pill nav separation (brand · pages · controls). Language selector + theme toggle as adjacent right-pill controls.

Internationalisation

5 languages (EN, DE, FR, ES, AR). data-i18n attribute-based translation system. Full RTL support for Arabic with mirrored layout, navigation, and CTA directions.