Signal, made legible
Most of what I build lives at the moment a messy signal becomes something a person can actually read: audio into captions, satellite pixels into a drift alert, transaction noise into a reconciled number. So when I designed this site, I wanted the visual language to say that before a single word does. This is the reasoning: not decoration after the fact, but the idea the whole thing is built around.
The monogram
The mark is a rounded square holding two things: an HJ knocked out of the surface, and a small waveform that runs left to right and ends in a solid marigold block. The square is the frame: a screen, a caption box, a card. The waveform is the raw signal entering it. The block on the right is a text cursor: the point where the signal has resolved into something legible and a caption is about to be typed. Read the mark left to right and it tells the same story every project of mine tells, noise in and meaning out.
It's drawn once, as a single inline SVG that reads its colours from the page's theme variables, so it recolours itself in light and dark mode instead of shipping two image files. The monogram in the nav and the one in the footer are the same object at different sizes.
The waveform, everywhere
That waveform isn't only in the logo. It's the divider between sections, it animates once on the home page as it draws itself and flattens into a caption line, and it closes every page above the footer. I used one motif deliberately rather than a grab-bag of flourishes: a site about making signals legible should have a single, recognisable signal running through it. Each time it appears it ends the same way, a wave settling into a straight line and a marigold cursor, because that resolution is the point.
Type
Three self-hosted families, each with a job. Bricolage Grotesque for display: it has enough character to feel made rather than defaulted, without tipping into novelty. Geist for body text, because long reading should be quiet and get out of the way. Spline Sans Mono for labels, metadata, and anything code-adjacent: the monospace is a small nod to the terminal, and it marks the difference between "this is prose" and "this is a signal being read." The caption line on the home page that types itself out is set in the mono for exactly that reason.
Colour
A deep indigo ink, a single teal that carries the waveform, and one marigold accent. Nothing else. The teal is the signal in motion; the marigold is the resolved cursor and the one colour allowed to demand attention, which is why it's reserved for the moment of arrival (the block at the end of every wave) and the primary call to action. Holding to one accent keeps the whole site coherent: there's no stray blue button in section seven. Both themes are built from the same token set, so light and dark are two readings of one palette, not two designs.
No shadows
There isn't a single drop shadow on this site. Elevation comes from a lift in surface colour and a one-pixel hairline instead. Faux-3D shadows are the web's default way to fake depth, and they usually read as noise. A hairline is honest: it says "this is a distinct surface" without pretending the screen has a light source. On hover, a card lifts a few pixels and a thin accent line sweeps across its top edge: the same small resolution as the waveform, at the scale of a single component.
Motion, and knowing when to stop
The waveform draws once. The caption types once. Cards lift on hover. That's roughly the whole motion budget, and it's all gated behind prefers-reduced-motion. If your system asks for less movement, the animations don't run and nothing important is lost. Motion here is used to show a signal resolving, not to keep something wiggling for its own sake.
Why bother
Because the work I care about most is defined by who it's for: captions for a deaf student, navigation for someone who can't see the room. A site about that work should be legible, fast, keyboard-friendly, and readable in either theme before it is ever "pretty." If it manages to be both, good. But legible first.
Himnish