# Machine Football AI website case study > How we designed and built the Machine Football AI website in Framer, with blog posts, media and a glossary their team publishes without a developer. Source: https://pentaclay.com/work/machine-football Case study · Sports AI · 2026 # AI company website design for Machine Football AI We designed and built the website for a London football AI company. It has a page for each kind of content, and their team publishes the blog, media and glossary in the CMS. [Book a call](https://cal.com/pentaclay/discovery-call) [Visit the live site](https://www.machinefootball.ai) - **4×** more text Google and AI tools can read on the home page: about 150 words before, about 670 now Their old site, 1 Jan 2026, vs the live site, 14 Nov 2026 - **99** desktop performance score, out of 100 Lighthouse lab test we ran on the live site, 14 Nov 2026 - **11 pages** one for each kind of content, where the old site’s menu had only Home, About and Contact Old site in January 2026 vs the live sitemap, 14 Nov 2026 Client Machine Football AI What we did Website design, framer development, CMS setup, motion Year 2026 ## About Machine Football AI Machine Football builds AI models of football. Clubs, leagues, media companies and investors use them to understand the game, and football agents use its app to find, value and place players. The company is Machine Football Ltd, based in London and set up in January 2023. Graeme Le Saux is the founder and Chris Perry is the CEO. Their brand identity was made by a separate brand studio; we designed and built the website. Client Machine Football Ltd, London Industry Sports AI, football analytics What we did Designed and built Platform Figma, Framer Timeline 21 Jan – 19 Mar 2026 Brand By SEA, a separate brand studio ## The challenge Football analytics is judged on credibility, so the site had to read as serious expertise without feeling cold or academic. An AI model of football is hard to picture, and visitors needed to feel its size before reading any detail. The team also had five kinds of content: special projects, reports, media, blog posts and a glossary. Each one needed its own page. 1. An AI model of football is hard to picture. What we did One number on the first screen, 1.1 billion on-pitch events, over a stadium video. Visitors feel the scale of the model before they read a word. 2. Five kinds of content, from reports to a glossary. What we did Each one got its own page and layout, and the menu numbers the sections 01 to 06, so the site reads like a sports magazine. 3. The team publishes often, without a developer. What we did Blog, MF Media and Glossary run on the Framer CMS, so a new post, media item or glossary term is a form their team fills in. 4. It had to feel like elite football, not a lab. What we did A dark design with stadium photos and bold white type, built on the brand SEA made, and kept whole on phones. ## What changed We compared their old WordPress home page with the site we built, the way a search engine or an AI tool reads it. Their site before us, and our build today **Before:** Old WordPress site, 1 Jan 2026 **After:** Our Framer build, 14 Nov 2026 Machine Football AI website before and after our build What we measured BeforeOld WordPress site, 1 Jan 2026 AfterOur Framer build, 14 Nov 2026 Text Google and AI tools can read on the home page Read from the page code without JavaScript About 150 words About 670 words _4×_ Main heading (H1) on the home page None Yes Pages on the site Home, About and Contact Special Projects, Reports, MF Media, For Agents, Glossary and Contact The live site today - **99** desktop performance score Lighthouse lab test we ran on the live site, 14 Nov 2026 - **100** best practices score Lighthouse lab test we ran on the live site, 14 Nov 2026 - **Still live** on our build, and their team re-published it on 29 Jun and 23 Jul 2026 Publish dates in the live page code, 14 Nov 2026 - **1.0 s** for the main content to appear on a desktop Lighthouse lab test we ran on the live site, 14 Nov 2026, desktop How we measured: we read their old site and the live site the same way, from the page code, on 14 Nov 2026. Traffic, leads and sales are Machine Football’s own numbers, and we publish them only with their OK. ## Put one number on the first screen The first screen is a stadium video with “We are obsessive” built letter by letter. Then it says one thing: “Imagine 1.1 billion on-pitch events.” Visitors see the scale of the model before they read a word. The look is dark: near-black pages, stadium photos and bold white type, so the site feels like elite football, not a lab. ## Give each kind of content its own page We designed and built a multi-page site: Home, Special Projects, Reports, MF Media, Blog, Glossary and Contact. The menu numbers each section, 01 to 06, so it reads like a magazine. Special Projects pages mix data, photos and written analysis in one layout. ## Let the team publish without a developer The Blog, MF Media and Glossary run on the CMS. The team adds blog posts, media and glossary terms without a developer. The glossary explains their football terms, like System Fit, with one page per term. ## Keep the design whole on phones Sections, numbers and images come in as you scroll. The same dark design works on phones, page by page. ## More screens from the site ## The site’s colours and type - Night #181818 Text and the dark sections. - White #FFFFFF Page ground and text on dark. - Light grey #F0F0F0 Panels and buttons. - Pitch #2E322B Dark green panels. - Mint #C9F0B5 The highlighted words. - Headings Outfit Extra bold and black, for the big lines. - Text Geist Body text, menus and buttons. - Labels Roboto Mono Small uppercase labels and data. ## How the project ran 1. Kickoff **21 Jan** Brief and page plan We started from their brand, made by SEA, and agreed the pages and the five kinds of content. 2. In Figma **Design** Every page in Figma Each page designed for desktop, tablet and phone, starting with the home page. 3. In Framer **Build** Built in Framer The site built in Framer, with the CMS for blog posts, media and glossary terms. 4. Before launch **Check** Checked, then live Every page checked on phones and laptops before it went live. 5. Theirs to run **Handover** Handed to their team The site runs on Framer, and their team publishes without a developer. ## Everything we handed over - Website design in Figma for every page, on desktop, tablet and phone - A Framer build of seven pages - Blog, MF Media and Glossary on the Framer CMS - A stadium video hero with a letter-by-letter headline - Scroll animations for sections, numbers and images - SEO settings on every page ## Questions about this project ### Can’t find your answer? Book a call and let’s talk. [Book a call](https://cal.com/pentaclay/discovery-call) Or email us at [contact@pentaclay.com](mailto:contact@pentaclay.com) Did you design the site or only build it? We designed the website in Figma and built it in Framer. Their brand identity came from a separate brand studio. Can their team update the site themselves? Yes. The Blog, MF Media and Glossary run on the Framer CMS, so the team publishes without a developer. How long did the project take? From 21 January to 19 March 2026. Did you make their brand? No. Their brand strategy and identity came from SEA, a separate brand studio. We designed and built the website on that brand. Is the site still live? Yes, at machinefootball.ai, on the Framer build we made. Keep reading ## More case studies Planning something similar? More AI and B2B sites we’ve designed and built. - [Fronterra AI learning 2026 ### From kickoff to a live site in 6 days, still on our build 9½ months later](https://pentaclay.com/work/fronterra) - [Freehold Wealth Property finance 2026 ### Live since October 2026, with a 99 desktop performance score](https://pentaclay.com/work/freehold-wealth) - [Comtel Telecoms 2025–2026 ### Still on our Webflow build 8 months on, re-published 3 times by their team](https://pentaclay.com/work/comtel) [Explore website design for AI companies](https://pentaclay.com/services/ai-company-website-design) ## Your business grew up. Your website should too If customers need a demo just to understand what you sell, your website isn’t doing its job. - We sign an NDA on request. - You own the site, the code and every account once it’s paid. - Your first call is with Erfan, the founder. **Kazi Mohammed Erfan** Founder Don’t want to fill in the form? [Book a call directly](https://cal.com/pentaclay/discovery-call) ## Not sure? Ask AI about Pentaclay ### Pentaclay, in short Updated 17 Oct 2026 Pentaclay is a B2B website design agency for AI companies that sell to enterprises. We write, design and build marketing websites in Framer, Webflow and Next.js, and stay to help after launch. Pentaclay LLC is registered in New Mexico, USA; our team works from Dhaka, Bangladesh, with calls until 12:30pm US Eastern. Founded in 2023 by Kazi Mohammed Erfan, who brings 12 years of design experience.