Deep Reveals

This is probaby a misapplication of Christopher Alexander’s A Pattern Language to computers, but thanks to the Gang of Four, it’s certainly not the most galling one.

The pattern Deep Reveals (223) is summarized as

Windows with a sharp edge where the frame meets the wall create harsh, blinding glare, and make the rooms they serve uncomfortable.

The analogy of this website’s content (perhaps not when viewed on mobile platforms or unusually narrow browsers) to a window is strained but suggestive. One looks at an illuminated rectangle set in a much darker margin. Maybe it doesn’t get perceived as glare but the sharpness of the transition seems unnatural¹.

Alexander proposes that to solve the problem,

[…] the edge of the window must be splayed, by making a reveal between the window and the wall. The splayed reveal then creates a transition area — a zone of intermediate brightness — between the brightness of, the window and the darkness of the wall. If the reveal is deep enough and the angle just right, the glare will vanish altogether.

I applied the analogous idea here, making the background lighten as it approaches the center of the page, while not trying to have it smoothly fade to white. I pushed the first implementation of the idea that felt like an improvement, so there’s probably much room for further tweaking. The CSS currently deployed sets the background to linear-gradient(to right, brown, RGB(153,153,127), brown).

To get an idea of what effect this has, I hacked together some buttons that rewrite the DOM, so you can compare the different backgrounds on the live page. The currently deployed one is “Warm Gradient”.

Warm Gradient Cool Gradient White Gradient Flat None

There’s a whole world of color theory I wish I had a grasp of so I could take a more principled approach to this. For that matter, having normal color vision would also be nice.