Internal reference
What "craft" actually means
Five things separate a $300 site that looks like a template from one that looks like it cost thousands. None of them are effects, and none of them slow the page down. Left is what a template does. Right is what's now on every Onyx site.
1. Grain
A flat block of colour is the single biggest tell that a page was generated. Nothing in the real world is perfectly flat. A fine noise texture over the whole page reads as a surface instead of a fill. Costs about 400 bytes.
Look at the two dark blocks for a few seconds. The right one has a surface. The left one is a colour swatch.
2. Layered light
Templates put one uniform blur around every box, which is what a sticker looks like. Real objects cast a tight shadow where they touch and a soft wide one further out, and the light always comes from the same direction.
The right one sits on the page. The left one floats on it. Same card, same colour — only the shadow changed.
3. Considered type
Letter spacing that looks right at 16px looks loose and amateur at 33px. Big headlines need the letters pulled tighter and the lines pulled closer. Body text needs a maximum line length — past about 65 characters the eye loses its place coming back.
A roof detailed where roofs actually fail.
Full replacements and structural repair, finished properly at the valleys and flashings where roofs really give way.
A roof detailed where roofs actually fail.
Full replacements and structural repair, finished properly at the valleys and flashings where roofs really give way.
Identical words. The right headline holds together as one object; the left one is a row of separate letters.
4. Motion
Not animation for its own sake. Things appearing should decelerate the way real objects do, never snap or bounce. This is the one Aalto spends $15,000 on — the restrained version costs nothing and doesn't slow the page.
The right one arrives. The left one teleports. Half a second's difference, and it's most of why expensive sites feel expensive.
5. A real wordmark
Every free small-business template generates two letters in a rounded square. A prospect recognises it instantly. Setting the initials in the site's own display face with wide spacing and a hairline rule reads like an identity someone chose.
The left one is what every template does. The right one takes the same two letters and treats them like a decision.
The point
None of these are effects, and none of them cost load time. Added together they are most of the gap between a $300 site and a $4,500 one — and they're already on all 27 samples. What we deliberately don't do is the 3D scene and the cinematic intro, because for a roofer that's eight seconds of load before anyone can find a phone number.