Camelphat Energy & Solar Solutions
A new build for a Cape Town solar installer. Twelve pages, everything from scratch.
The live site
- IMAGES AUDITED
- 4 DESTROYED
- TWO GROUNDS
- WORST FRAME
- 1.49 TO 5.04
- SHIPPED
Camelphat Energy & Solar Solutions was a new build, not a revamp — 12 pages from scratch. I built it on Astro 5 with Tailwind CSS 4 and vanilla JavaScript, and deployed it to Google Cloud Run in europe-west1, served by nginx from a container. Cormorant Garamond and Jost, self-hosted through Fontsource. Radius 0 everywhere. Nothing rounded, nothing soft.
The design runs on two grounds instead of one: night #171B22 and sand #D9CDB8. Each ground got its own ink measured separately, because the same colour does not behave the same way on both. The tan accent #C89B6E measures 6.59:1 on the night ground and 1.60:1 on sand — near-exact opposites. So the accent changes with the ground rather than staying fixed. That is the whole system in one sentence.
The hero is a Pexels video. It serves 1280x720 above 768px and 640x360 below, the poster paints first with preload="none", and it never loads at all under prefers-reduced-motion or Save-Data — I verified zero .mp4 requests in that case. Text contrast over video was measured against the worst frame of the clip, not an average one. Bright aluminium rails sweep through and drop the lead paragraph to 1.07:1. A brightness floor plus a scrim that changes axis at 1024px fixed it, ending at 11.2:1 for the headline and 6.8:1 for the lead on mobile.
Then I audited all 25 stock images. Four had to be destroyed. Three carried tiled "rawpixel" watermarks. One keyed "solar-farm-rows" — live in two places on the site — was a photograph of a Japanese torii gate on a beach with no solar panels in it. The Free Assessment page hero was the International Space Station's array wings. Seven alt descriptions described scenes that were not in the frame. I also removed 3.6MB of images that were being bundled but referenced by no page, and cut one 8.2MB file down to 739KB. Breadcrumb contrast across all seven page heroes measured 1.49:1 and is now 5.04:1.
Calls I made
- 01
The accent colour changes with the background
The tan accent #C89B6E measures 6.59:1 on the night ground #171B22 and 1.60:1 on the sand ground #D9CDB8. Near-exact opposites. A fixed accent would have been legible on one ground and invisible on the other, so the accent shifts with the ground and each ground carries its own separately measured ink.
- 02
Measured contrast against the video's worst frame
An average frame tells you nothing. Bright aluminium rails sweep through the clip and drop the lead paragraph to 1.07:1 — far below readable, and only on the brightest frames, which is exactly what a screenshot or an averaged reading hides. I fixed it with a brightness floor plus a scrim that changes axis at 1024px, landing at 11.2:1 headline and 6.8:1 lead on mobile.
- 03
Audited all 25 stock images before trusting one
Three of the 25 stock images carried tiled "rawpixel" watermarks. One keyed "solar-farm-rows" and used in two places was a Japanese torii gate on a beach with no solar panels in it. The Free Assessment hero was the International Space Station's array wings. Seven alt descriptions described scenes that were not in the frame.
- 04
Verified the video does not load, rather than assuming
The hero video serves 1280x720 above 768px and 640x360 below, the poster paints first with preload="none", and under prefers-reduced-motion or Save-Data the video never loads at all — verified as zero .mp4 requests, not assumed. Separately, 3.6MB of images were being bundled while referenced by no page, and one 8.2MB file came down to 739KB.
Outcome
A live 12-page site on Cloud Run. Two grounds, each with its own measured ink. A hero video that skips itself entirely on reduced-motion and Save-Data. Twenty-five stock images audited, four destroyed, seven alt descriptions caught describing scenes that were not in the frame. Breadcrumbs across all seven page heroes moved from 1.49:1 to 5.04:1.