Clarion and Pearl are the two templates we are proudest of, and almost everything that makes them good is something you will never consciously see. That is the nature of craft on the web: when it works, it disappears into a feeling — this is nice — that the visitor never traces back to a decision.
So let us trace it back. Here is what is actually happening underneath two layouts that people describe, vaguely and correctly, as feeling expensive.
The type does the heavy lifting
Both templates lead with a display face set larger and tighter than feels reasonable. Clarion runs its headlines at a scale that crowds the edges of the screen on purpose; Pearl pairs a high-contrast serif against a quiet grotesque so the page reads like a magazine, not a dashboard. The leading is pulled in until the lines almost touch. None of this is an accident. It is the single biggest reason either page looks composed rather than assembled.
The grid is doing more than holding things
A weak layout is a stack of full-width rows. Clarion and Pearl break the grid deliberately — an image that bleeds past the column, a caption that hangs in the margin, a headline that starts where you do not expect it. These small asymmetries are what make the eye move down the page instead of sliding off it. Symmetry is safe and forgettable; tension is what holds attention.
Expensive is not a budget. It is a hundred small decisions that all agree with each other.
Motion that you feel more than see
Scroll either template and sections do not simply appear — they resolve. A line of type clips up from behind a mask. An image settles out of a soft blur. A rule draws itself across the page. Each reveal is under a second, eased so it decelerates like a real object coming to rest. You do not watch these animations. You feel the page is alive, and you keep going.
The discipline of restraint
What is not in Clarion and Pearl matters as much as what is. No competing accent colours. No decorative noise. No section that exists only to fill the page. Every element earns its place, and the ones that could not were cut. Restraint is the hardest thing to template, because the tool always wants to give you more. These two are exercises in giving you less, better.
Yours to take apart
The best way to understand any of this is to open one and start changing things — push the type bigger, break the grid further, see where it stops working and why. Both are in the gallery, both are free to build on, and both will teach you more about layout in an afternoon than a year of reading about it. Craft is contagious. Start near it.
