Animated Single-Page Site & Brand System • 2026
KOLY
A single-page site for a specialist technology recruiter, built to move — scroll-driven motion, two clearly separated audiences, and a fee structure presented as five products instead of a paragraph of small print.
Client
KOLY
Industry
Recruitment / Technology Talent
Year
2026
Platform
Single-page recruitment website with scroll-driven animation
Visual showcase
A closer look at the design, structure and digital experience.
Project overview
From business need to digital system.
KOLY is a proactive recruitment firm placing people in cyber security, data and AI, cloud and DevOps, R&D and commercial teams, with a client list that includes JFrog, Coralogix, Cyberint and IONIX. The brief was a homepage that felt like a technology company rather than a recruiter — one page, designed in Figma, that had to carry employers and candidates through very different journeys without splitting into two sites.
You can explore the live product at KOLY.
Challenge
Recruitment sites have two audiences who want opposite things from the same page: an employer wants to know how you charge and who you have placed; a candidate wants to know you will actually pick up the phone. Most sites serve one and bury the other. On top of that, a fee structure with five different models — success-based, retained, performance-linked, start-up and embedded — is usually where a recruiter's website becomes a wall of text. And the whole thing had to be built as one long scrolling page with the motion the design promised, without becoming heavy or fragile.
Solution
We built the page as thirteen sections in a deliberate order, with every employer and candidate touchpoint colour-coded — lime for hiring, blue for careers — so the two journeys run side by side without either one being second. The five fee models became five product cards with a name, an audience and one plain sentence each. Motion is GSAP ScrollTrigger on a Lenis smooth-scroll, with reveals, counters and a marquee of KOLY's own client marks. The brand mark, which only existed as a PNG, was traced into a vector so it now scales cleanly everywhere and generates the favicons from the same paths. Every piece of copy lives in one content file, so KOLY can edit the words without touching a component, and any artwork not yet supplied renders as a labelled placeholder rather than a broken layout.
What we delivered
The key systems, assets and improvements created for the project.
Thirteen-section single page
Hero, appointment booking, client marks, five specialisms, five fee models, why KOLY, results, candidates, testimonials, FAQ, enquiry and contact — in an order designed to move both audiences towards a conversation.
Two-audience colour system
Lime for employers, blue for candidates, applied consistently to cards, calls to action and section accents so a visitor always knows which path they are on.
Fee models as products
No Cure No Pay, The Retainer, The Performer, The Start-up and Embedded TA — each given a name, a target audience and a single plain sentence in place of the usual small print.
Scroll-driven motion
GSAP ScrollTrigger reveals and counters on a Lenis smooth-scroll, tuned so the page feels alive without becoming heavy or fragile on lower-end devices.
Vector brand mark
The KOLY mark rebuilt from a PNG as an SVG with the ink linework and yellow O as separate paths, used across the site and to generate every favicon size.
Enquiry flow with a fallback
A validated enquiry form delivering by email, with a pre-filled mailto offered automatically if delivery is not configured, so the site can never silently drop an enquiry.
Project impact
Designed to create long-term business value.
Two audiences on one page — employer and candidate routes colour-coded lime and blue at every touchpoint.
Five fee models turned into five product cards, each with a name, an audience and one sentence.
Scroll-driven motion — GSAP ScrollTrigger over Lenis smooth scrolling — with reveals, counters and a client-logo marquee.
The brand mark traced from a raster PNG into a scalable vector, now driving the favicons too.
All copy in one editable content file, separated from layout.
An enquiry form that falls back to a pre-filled mailto when email delivery is not configured, so a lead is never lost to a setup gap.
EmploymentAgency schema, Open Graph metadata and a launch-ready technical SEO baseline.
Design details
Interface, brand and content details from the final delivery.
Our process
A clear process from first idea to final launch.
01
Discovery
We review the business, audience, goals, existing digital presence and project requirements.
02
Strategy
We define the structure, UX direction, content approach and technical requirements before design begins.
03
Design & build
We create the visual system, develop the platform and connect the core functionality required for launch.
04
Launch & optimise
We test, deploy, optimise performance and support improvements after the project goes live.
Next project
Cescie
E-Commerce Website & Brand Experience
Start your project
Have a project like this in mind?
Whether you need search architecture, a website, an app, a custom AI tool or a platform nobody has built yet, we can turn it into something that ships — and gets found.
