Web Design & Development — Case Study
RULED
A website and companion app for an autonomous sports line-marking robot — product story, 3D and motion, from the first layout to the first line on the field.
THE FIELD IS YOURS.
RULED plans in the app and marks on the field: an autonomous robot that paints sports lines exactly where they were drawn on screen. We designed the product website, the companion app interface and the visual identity around it — one plan, every line.
The system is modular and calm — Manrope type, a blue-led palette and 3D visualisation throughout — so grounds teams can plan a layout, follow its progress and reuse it next week, without thinking about the technology underneath.
The Cover
The Field Is Yours
The RULED hero — the robot, the app and the promise.
The Brief
About the Project
Make autonomous field marking feel simple — from planning in the app to the first line on the ground.
Film
Website Film 01
The product story, in motion.
Identity
A Line of Its Own
Plan. Move. Mark. — the identity system in motion.
Typography & Colour
Manrope
One typeface — precise, open, human.
The Hero
One Plan. Every Line.
The hero, specified — type, rhythm and space.
Motion
In Motion
The RULED world, animated.
Layout
Built on a Clear Rhythm
A modular structure with room for the product.
Film
Material & Precision
The robot up close — materials and detail.
The Website
From First Glance to First Line
The full site — hero, layouts and the field in 3D.
Film
Website Film 02
Scroll sequences and court layouts, animated.
Film
Precision, Up Close
The marking process in detail.
The Story
Function. Form. Field.
Every part, one purpose — sense, move, mark.
The App
The Companion in Motion
The app that plans every layout.
The App
Your Field, in Your Pocket
The RULED app icon and home screen.
Film
Website Film 03
The site experience, in motion.
The Website
Every Field Starts Here
FAQ, grounds and the final call — your next line starts here.
Film
The Film
RULED, end to end.
START YOUR WEB PROJECT
From the first sketch to a website in motion — we've got you covered.