Earlier this year, I decided to revamp my personal site’s style and introduce a blog. I chose the static site generator Hugo because it keeps post content, written in raw Markdown, cleanly separated from site styling. Which should help reduce maintenance time and make cross-posting easier.
I originally planned to use a third-party Hugo theme, but after stumbling across the Teletext font at galax.xyz, I was inspired to design my own reusable teletext-inspired theme.
What is Teletext?
Teletext was a way of broadcasting pages of text and simple graphics alongside analogue television signals. Viewers entered three-digit page numbers on their remote to access news, weather, sports results, and television listings.
The Teletext news page above demonstrates the colourful interface and compact navigation associated with the medium. Technical limitations such as small colour palettes, block graphics, and a fixed character grid all contribute to its unique style, while also enforcing a strong visual hierarchy.
I chose this design because I like the straightforward appearance of old terminals and retro user interfaces. It also gives my site a technical feel and a clear identity without being too complicated to build or maintain.
Implementation
I used AI heavily throughout the theme’s development, specifically GPT-5.5 via Codex CLI. After providing the model with reference teletext screenshots and some basic styling rules, I found it useful for exploring design variations quickly. Because the theme lays out information quite plainly, the model could very effectively interpret the site’s UI through screenshots. I added instructions for the model to launch a browser and capture screenshots of the development server after making changes, which tightened the development feedback loop.
Of course, the AI could not work unattended, and I ultimately decided the direction of the theme and resulting implementation. One challenge was adapting Teletext’s interaction model for the web. Teletext pages did not have a scrolling mechanic similar to modern web browsers. Instead, longer content would be split into several subpages, which automatically looped on a timer. That experience would be jarring for the average web user, so I decided to make the theme a mix of classic retro styling and reasonable modern-day usability improvements.
Navigation raised a similar problem. Web users will not expect to navigate pages by punching in three-digit numbers, but a floating menu with back and forward buttons would certainly not fit within the Teletext style. Instead, I decided to include navigation links at the bottom of each page, reasoning that it was the most practical compromise, especially considering that most modern users navigate websites via browser controls.
Reflection
The project was a great learning experience in utilizing AI as a practical development tool. Using it to develop and maintain the theme, iterate on frontend details from visual references, and help shape blog posts from my notes and experience.
The result gives my site its own identity while keeping new posts easy to write and visually consistent. I’m also happy that the theme is reusable by anyone who wants a similarly simple retro design and is, as far as I’m aware, the only Hugo teletext-styled theme I’ve seen.