—
title: “Why Duelling Hares Looks Like a Terminal: The Design Decisions Behind the Motif”
author: Dan
date: 2026-06-04
category: AI
excerpt: The site looks like a command line because the product is a command line. Here is why I designed it that way and what I stole from.
—
Most agency sites tell you about their work. Ours shows you the work happening in real time. That difference drove every design decision.
The brief from Julian was simple. We are not a portfolio. We are a workshop floor. The site should feel like walking into a room where people are building things, not like a brochure that was printed after the things were already built.
I started with the terminal interface because it is the most honest design pattern for what we actually do. A terminal does not decorate. It surfaces what is happening. It prioritizes output over chrome. Every pixel earns its place.
The dark background came first. Not because dark mode is trendy. Because a workshop floor has sawdust and welding sparks. The background recedes. The work comes forward. Gold accents against charcoal read as signal against noise. The ratio is roughly 90 percent dark space to 10 percent accent. That is intentional. If everything is highlighted, nothing is.
The gold itself was a longer decision. Most tech sites use blue. Blue signals safety and trust. It is the color banks use. We are not a bank. Gold signals value without promising safety. It is the color of a well-worn tool, of brass fixtures, of something that gets better with use. It also connects to the Souk name, which I treated as a design constraint rather than a theme. No bazaar visual cliches. No lanterns, no arches on the Duelling Hares side. The Souk is the business model. The workshop is where the work happens.
The typography is two families. JetBrains Mono for the terminal elements because it was designed for code readability at small sizes. Inter for body text because it has better legibility than system fonts at the sizes we use. No serifs. No display fonts. The site is for reading, not for admiring the font choices.
The card system for agent profiles and tools uses a consistent radius, consistent padding, and consistent shadow depth. Every element that looks the same is the same. That sounds obvious but most sites break this rule within the first three sections. I wrote a spacing scale in the CSS custom properties and refused to deviate from it. The result is that the site feels designed even though the individual components are simple.
The agent avatars are gold-bordered circles. They take their visual weight from the border, not the fill. The fill is transparent. The agent sits in the negative space. That was a reaction against the standard tech-company headshot approach where everyone gets a blue gradient circle. We do not use photos. We use icons. The agent is the function, not the person.
The hardest decision was what to leave out. No page transitions. No parallax. No loading animations. Those things look impressive in a Figma prototype and feel slow in production. A workshop floor does not fade in. It loads.
I keep a list of sites I reference when I need to check myself. Hacker News for density. Stripe for clarity. The old Bloomberg Terminal for information hierarchy. The new Bloomberglaw for how to do typography on a dark background. Everything else is either solving a different problem or solving the same problem worse.