What changes between a $500 and a $15,000 site

Seven values separate the two. Not seven features, not a page count, not a CMS: seven values, each of which takes about four minutes to set and about a decade to learn to set well. A $500 site accepts the default for all seven. A $15,000 site has an answer for all seven, written down, in a document the client keeps.

The verdict, stated early: the price band is a function of how many values in the file were chosen rather than inherited. Below is each of the seven, at three prices, with real numbers. A reader who wants to move a project up one band can act on this in under an hour.

Type, at three prices#

The cheap version has three sizes, and they are whatever the framework shipped. In Tailwind's defaults that means text-base at 16px, text-2xl at 24px, text-4xl at 36px, occasionally text-5xl at 48px on a hero, all of them at a line height near 1.5, tracking untouched. Competent, and identical to thousands of other pages.

The middle version has a ratio. A modular scale at 1.25 from a 16px base gives 16 / 20 / 25 / 31 / 39 / 49 / 61, and those seven numbers are the only sizes allowed anywhere in the build. A page with seven permitted sizes reads as composed and a page with fourteen arbitrary ones reads as assembled, which is most of what people mean when they call a site clean.

The expensive version tunes the scale against the viewport and against the eye:

• Heading line height at 1.05, body at 1.55, captions at 1.4.
• Tracking at -0.02em on anything above 31px, 0 on body, +0.06em on the one small-caps label per section.
• The ratio itself moving, 1.2 at 375px and 1.333 at 1440px, each step written as clamp(2rem, 1.2rem + 3.4vw, 3.05rem) rather than as a breakpoint jump.
• Two faces, a display and a text, with the fallback stack written out and font-feature-settings: "tnum" 1 wherever prices are listed.

Spacing and the section rhythm#

Default spacing is uniform, and uniform spacing is the fastest way to make a long page feel like a list. The generated version gives nearly every section the same vertical padding, commonly py-20 at 80px, so the page has no idea which of its parts matter.

The paid version uses a ramp with a base unit. 8 / 16 / 24 / 40 / 64 / 104 / 168 is one, and the useful property is that nothing between those numbers is permitted, so the eye stops finding almost-alignments. Sections get clamp(96px, 12vw, 176px), which breathes on a desktop and closes up on a phone without a single media query.

Motion, a curve and a number#

Every generated site moves the same way, and the reason is documented rather than mysterious. The framework ships one timing function and one duration, so everything from a nav link to a full section entrance runs on cubic-bezier(0.4, 0, 0.2, 1) at 150ms. It is a fine curve. Applied to everything, it is a decision made by nobody.

The directed version spends two curves and no more. Entrances animate opacity from 0 to 1 and translateY from 12px to 0 on cubic-bezier(0.16, 1, 0.3, 1) at 560ms, staggered 70ms per child, fired once at an IntersectionObserver threshold of 0.2. Interface response runs transform only, cubic-bezier(0.33, 1, 0.68, 1) at 160ms. A long curve for arrival and a short one for response is a complete motion system, and the difference between 150ms and 560ms on an entrance is the difference between a site that blinks and a site that settles.

The expensive version adds three things:

1. @media (prefers-reduced-motion: reduce) setting both durations to 1ms and removing every transform, written as a first-class branch rather than an afterthought.
2. One scroll-linked moment, a single mechanism, used once on the page, chosen so that it says something about the client's work.
3. A written motion sheet, so the next developer does not add a third curve in March.

Colour, and what happens to the photographs#

The $500 palette is two hues off a library ramp. Indigo #6366F1 into violet #8B5CF6, on #F9FAFB, with #6B7280 for body text. Nothing is wrong with any of those values and all four arrived without being chosen, which a viewer senses as a page with no opinion.

A directed palette has a role per value and a neutral with a hue bias: #12100E ink, #FAF7F2 paper, #6E6459 muted at 5.4:1 on paper, #B3421C accent at 5.3:1 on paper, #ECE5DA field. The bias in the neutral is the single hardest tell to fake, because a grey sitting exactly on the axis is almost always a value nobody picked.

Then the photography, which is where the top band earns its money. One grade across every image, filter: saturate(0.92) contrast(1.04), crops fixed by subject at 4 / 5 for people and 3 / 2 for rooms, object-position set per image rather than left at centre, and a grain overlay at 4% opacity so that stock and client-supplied shots stop looking like two different sites.

The grain is the cheapest item on that list and the most effective, because it puts every image on one surface. A page mixing a commissioned portrait with two stock frames reads as a single set once all three carry 4% of the same noise, and reads as a collage without it.

The section order, which costs nothing#

Order is free and almost nobody changes it. The generated default is hero, three feature cards, testimonial carousel, pricing table, closing call to action, and it appears in that sequence because that is the sequence the training data rewards, not because it argues anything.

A directed order follows how the client actually sells. For a studio that wins work on craft, that is: one claim, proof marks, the problem in the client's own words, three named tiers, one case study in full, a four-step process, objections answered, then the same action from the hero repeated. Eight sections, and the third one is the one no generated site ever includes.

Two orderings of the same nine facts:

• Generated: hero, three feature cards, testimonial carousel, pricing table, closing call to action.
• Directed: one claim, proof marks, the problem in the client's own words, three named tiers, one case study in full, a four-step process, objections answered, the hero's action repeated.

The second costs nothing extra to build, and it is the change clients notice without being able to name it, because it follows the order they already use out loud when a stranger asks what they do.

The top band adds one section that exists nowhere else on the internet, built for this client's single strongest asset. Writing that brief is the whole skill, and it is what Thanor supplies: art direction per design in exact values, ready to paste into Claude, Lovable, v0, Cursor or whatever you already build in.

The verdict, in file terms#

A $500 site is undecided, not bad. Framework defaults are good defaults, which is exactly why accepting them puts a page in the company of every other page that accepted them. Seven values is the entire distance to $15,000, and five of them can be set this afternoon.

Ranked by visible change per minute spent:

1. Heading line height, 1.5 down to 1.05. One property.
2. Tracking, -0.02em on anything above 31px. One property.
3. The type ratio, so seven permitted sizes replace fourteen arbitrary ones.
4. Entrance duration, 150ms up to 560ms, on one curve chosen for the job.
5. The neutral's hue bias, moved off the grey axis in either direction.

The first two take a minute each and they move a page further than any colour decision will. The rest is an afternoon. Once those exist as written values, the price band follows without an argument, and the reason the default looks so familiar stops being a mystery.

Then keep the list. Of the seven values, only the palette is genuinely per client. The type ratio, the spacing ramp, both curves and the photographic grade survive a change of industry intact, which is why the second art-directed project takes roughly a third of the time the first one did.

Browse the Thanor library and read one design's values end to end. $89 for three months, $189 a year, $299 once, and a free account opens the designs marked free.