There is one painting in this entire house. It is a watercolour of a ridge line in mist, and it appears — at different opacities, crops and blend modes — on every page we have shipped.
That was not the plan. It was a placeholder in the first venture page, and by the time we noticed it had become the brand.
The problem with a good background image
A background that looks good is a background that will be reused, and a background that is reused without rules turns every page into the same page. Within two months we had four pages that were distinguishable only by their headlines.
So we wrote three rules:
- The wash never competes. Maximum opacity is 0.62, always behind a scrim, never behind body copy at full strength.
- One wash per page. If a page needs a second atmospheric element, it needs an idea instead.
- Accent colour carries identity, not imagery. Each page root sets its own accent token; the wash stays neutral underneath.
Tokens, not copies
The mechanical version of those rules is that page-level identity lives in custom properties on the page root, and the shared chrome reads through them:
.bl-page {
--bl-accent: #0e7490;
--bl-accent-soft: rgba(14, 116, 144, 0.1);
--bl-accent-line: rgba(14, 116, 144, 0.34);
}Adding a venture means adding one token block, not restating a stylesheet. It is the least glamorous part of the system and the only reason the system has survived five pages.
A design system is mostly a record of the decisions you refuse to make twice.
What we got wrong
We shipped the wash as a JPEG for far too long, at a size that cost more than the whole rest of the page. It is a WebP now. Nobody noticed the change, which is the correct outcome and also a little deflating.
