Most of our portfolio is dark. Navy gradient heroes, engineering-grid textures, mono labels, industrial confidence. It is a language we have refined across coatings manufacturers, contractors, and federal IT. Then a church asked us to build their site, and none of it applied.
The brief we wrote for ourselves was two words: reverent and elegant. A warm ivory canvas instead of near-black. Deep navy as the anchor. Fraunces, a serif with real italics, for display, and a quiet body face under it. An accent color sampled directly from the church's own logo, used sparingly. Nothing about it looks like our default work, and that was the point.
Range is not a mood. It is a discipline, and it has rules.
A palette we had to earn
Warm and soft is easy to say and easy to ruin. This congregation skews older, so the brand guidelines we wrote for the project mandate stronger-than-minimum contrast and forbid the light accent as small text on white. Reverence that people cannot read is not reverence.
The motion language slowed down to match. Reveals ease in over most of a second. Shadows are navy-tinted and soft. The hero photo drifts on a 26-second cycle. Card hovers lift four pixels, no more. Everything gentle, nothing showy.
And the photography rule from the rest of our work carried over unchanged: no stock, ever. The site runs on 15 real photos of the real congregation. A church site with stock-photo worship would be a contradiction in terms.
The layout patterns translated rather than transferred. The ministries grid still leads with one featured tile, the campuses are still cards instead of a list, and the header still turns from transparent to frosted as you scroll. The bones are ours. The warmth is theirs. We also wrote the church a brand book, built by sampling their actual logo into a full tonal ramp, so the identity outlives this one build.
The season engine
The build's quiet centerpiece is a liturgical season engine. Church life moves through seasons, Advent, Christmas, Lent, Easter, Pentecost, and most church websites either ignore that completely or depend on a volunteer remembering to swap a banner.
Ours computes it. The engine calculates the date of Easter with the Meeus/Jones/Butcher algorithm, then derives Ash Wednesday, Holy Week, Eastertide, and Pentecost from it. Advent is computed as the fourth Sunday before Christmas, Thanksgiving as the fourth Thursday of November. Seven seasons, resolved on the server from pure date math and stamped onto the page before any JavaScript runs.
When the season changes, the site changes with it:
- The color palette shifts to the season's own tones
- A motif layer appears: gentle snowfall at Christmas, dawn rays at Easter, a flame glow at Pentecost, candlelight in Advent
- A ribbon under the header carries a short seasonal message and an invitation to visit
- Even the lighting in the hero re-tints to match the season
There is no annual maintenance contract hiding inside that feature. No yearly hand-edits. The site will theme itself correctly for Advent every year, forever, because the calendar is math. Staff can preview any season early with a simple query parameter.
Light as the hero
The homepage opens on a real worship photo, but the photo is alive. We wrote a custom WebGL engine for it, 489 lines, that grades the photo's color in the shader and pours volumetric light through it: raymarched god-rays and a field of 2,400 drifting golden dust motes under a cinematic bloom. The seasons reach all the way into the light itself. At Christmas the motes fall like snow. At Pentecost the palette runs warm as fire.
It is also the most heavily guarded feature on the site. The engine loads only after the page has already painted a complete static hero, so nothing waits on it. Visitors who prefer reduced motion never load it at all. Lower-powered devices get a lighter tier. The headline's entrance is pure CSS, so the most important words on the page never wait for JavaScript.
What range actually means
It would have been easy to hand a church our house style in softer colors. It also would have been wrong. The design language has to come from the client's nature, not from our comfort. A congregation is not a coatings plant, and a website that cannot tell the difference is a template with extra steps.
What does carry over is everything underneath the surface: one extra dependency beyond the framework, a single typed facts file holding every service time and campus detail, with unconfirmed facts flagged for verification rather than published, real photos only, and contrast rules with receipts. The look changed completely. The standards did not move at all.
That is the discipline of range. A studio's aesthetic should be a capability, not a cage. When the work calls for reverence, you build reverence, and you hold it to the same bar as everything else you ship.
