Hermes HUD

Hermes is a personalized heads-up display for browsers, designed to my own personal spec. I chose to display two RSS news feeds, a feed of photography inspiration and some contextual data + shortcuts. I built Hermes as a passion project and haven’t launched it publicly. I chose the name as a nod to my heritage—Hermes is messenger to the Gods in ancient Greek mythology


An overview of Hermes’ key features including dynamic greetings, fully responsive design, beautiful photography, live and contextual weather, live updates, secret shortcuts, easy-access favourites, native style UI, keyboard input, automatic dark mode, support for all major browsers, low-latency performance, RSS support, locally hosted as a browser extension and being built on a scalable grid system

The initial conditions for starting Hermes

It had been a while since my last personal project and there were a few itches I had to scratch that nicely intersected, leading to me getting started with Hermes

The project took around 2 weeks from inception to launch, but has been a constant playground for me to tinker with, adding new features and iterating based on my usage

How would this look if it were shipped as part of macOS?

For years I’ve been building products to be respectful of platform design guidelines. This can help build trust and confidence, but beyond isolated experiences I appreciate native-feeling products as it helps platforms feel more seamless as opposed to a series of disjointed experiences.

It’s been years since I designed anything for Apple’s ecosystem yet I use macOS, iOS and watchOS daily. My familiarity with the unified design language meant I was keen to jump straight into using it for Hermes.

Hermes is essentially a web-app meaning it can be used on any platform or browser, however I wanted to build something purely based on my own needs for once. Setting this boundary for the project helped me deprioritise things like font rendering across other operating systems in favour of spending more time on design details that I’d appreciate in my own usage.


Basic styles aligned to Apple’s design language, including the use of SF Pro as the primary font, progressive corner radii, a color palette consistent with Apple’s and an 8pt grid system. I should call out that I’m rarely not horrified by the inhumanity captured near daily in the headlines

Augmenting my technical abilities in favour of pace

I’m a designer by trade but I love hacking things together to make things work. I’ve worked with code for over a decade but don’t feel like I could call myself an engineer. I’ve always learned just enough to get the job done and no more. It’s served me well since the majority of these projects have been exploratory or self-initiated. By way of an example, I’ve:

In short, I was confident that with enough time I’d be able to build whatever I wanted. The emphasis here is on ‘enough time’. I didn’t want this to drag on and become a chore. LLMs had recently become available for consumers to use so my attitude was that I’d code as much as I could, but when I got stuck I’d consult an LLM-based chatbot. A few specific examples of what I consulted my AI co-pilot include:


The small-window experience for Hermes, alongside light and dark mode

Sweating the details

I mentioned that this was a passion project with the primary user being myself. This meant I could prioritize tiny details that I wanted to, not more significant requirements that would drive impact if the product was launched at scale. A few examples here include:

Not only am I proud of the outcome as a standalone project, but it’s been incredibly useful for me, replacing the default new tab experience I had before. How many of you can say that your new tab page will tel you it’s time to go to bed?!

Thanks to Daouna Jeong for the icon.