How to build an Awwwards style website

Design is 40 percent of an Awwwards score, usability is 30, creativity is 20 and content is 10. Those weights are published, submissions go to a minimum of 18 jury members, and the three scores furthest from the average are dropped automatically. So the flourish everybody imitates is the smallest slice of the grade, and 70 percent of it is fundamentals held to an unusual standard.

Awwwards' own guidance concedes there is "no true recipe". The galleries agree by omission: they show a hundred sites and publish not one curve value. But the values recur across winners, and every one of them is a number.

It's kind of wild in terms of how it will use different random designs, even given a specific style guideline.

A developer on Hacker News

That is the objection to prompting your way here, and it is correct as stated. A style guideline is prose, prose resolves to a distribution, and a distribution produces a different page every run. The call: specify the eight motion values and the two ladders, and the variance disappears. That is what the Thanor library is for.

What the weights tell you to build#

Read the four percentages as a build order rather than a scorecard. Usability at 30 percent is worth more than creativity at 20, which means a signature interaction that breaks the back button is a net loss.

• Design, 40 percent. The ladders. Type scale, spacing scale, palette, grid. This is the section that follows.
• Usability, 30 percent. The scroll works with a trackpad, a wheel and a keyboard. Escape closes everything. Focus is visible. The page is usable at 320px. prefers-reduced-motion is honoured rather than declared.
• Creativity, 20 percent. One signature moment, not six. A single idea executed exactly beats three ideas executed well, because a jury that has seen four hundred sites this month remembers the one thing.
• Content, 10 percent. Real copy, real images, no placeholder Latin, no stock photograph of a handshake.

The grid: 12 columns, gutter 24px, page margin clamp(20px, 4vw, 72px). Sections may break the grid, and the breaking is only legible if the grid was there to begin with, which is the argument for having one on a page that appears not to.

The one flourish to spend the creativity budget on should be the one that cannot be installed from a package. A cursor that grows on links is a component. A scroll where the type recomposes itself is a decision.

The content slice is the easiest ten percent on the board and the one most commonly forfeited. Real names, real photographs, real numbers, and a project page that says what the work was for rather than listing the disciplines involved.

The scale, a golden ratio ladder#

Ratio 1.618 from 18px. Every step is the sum of the two before it, which is the property that makes the large sizes feel proportioned rather than simply enormous: 18 plus 29 is 47, 29 plus 47 is 76, 47 plus 76 is 123.

Ship the top three steps as clamp() so they never overflow a phone: clamp(56px, 12vw, 200px) for step 5, clamp(40px, 8vw, 123px) for step 4, clamp(32px, 5.5vw, 76px) for step 3. At 1440px those resolve to 173, 115 and 79 pixels, and the ceiling is reached on a wide desktop.

Negative leading above step 3 is mandatory, not optional. A 200px headline at 1.1 line height has a gap between its lines wider than a paragraph, and that gap is the difference between a display composition and enlarged body text. Body copy stays at 18px on a 56ch measure, because the contrast only reads if one end of it is ordinary.

The palette, and the one saturated value#

Five values. Four of them are near neutral and one is aggressive, and the proportion is the point: the saturated colour covers under five percent of any viewport.

Black type on the accent measures 17.19:1, so an accent filled button takes #0A0A0A text rather than white. The muted grey sits at 4.61:1, just past the 4.5:1 floor, which is deliberate: any darker and it fails, any lighter and it stops reading as secondary.

• No gradients. The saturated accent does the work a gradient is usually hired for, and it does it without the association.
• One accent, not two. A second saturated colour halves the impact of the first and the page reads as a template with a theme setting.
• Images run at filter: grayscale(1) at rest and grayscale(0) on hover over 560ms, which is the cheapest way to make a mixed set of photographs look art directed.

The motion system, in eight values#

This is the part the galleries never publish, and it is most of what separates a winner from a competent dark page.

1. Smooth scroll, with Lenis: lerp: 0.075, duration: 1.2, wheelMultiplier: 1. Below 0.05 the page feels like it is ignoring input. Above 0.12 there is no point having it.
2. Reveal: cubic-bezier(0.16, 1, 0.3, 1) at 1000ms, translateY 48px to 0, with clip-path running inset(100% 0 0 0) to inset(0 0 0 0) so the text wipes up rather than fading.
3. Stagger: 70ms between sibling blocks, 24ms between characters in a split headline, capped at 40 characters before the stagger resets.
4. Page transition: cubic-bezier(0.83, 0, 0.17, 1) at 1100ms. An ease in out quint, so it accelerates out of the old page and decelerates into the new.
5. Custom cursor: 12px at rest, 64px over a link, position interpolated at a lerp of 0.18, size change on cubic-bezier(0.33, 1, 0.68, 1) at 220ms.
6. Marquee: a duplicated track translated -50% over 28s linear, infinite, paused on hover.
7. Preloader: 1400ms maximum, driven by a timer and not by asset weight, with the counter reaching 100 before the wipe rather than during it.
8. Reduced motion: smooth scroll off, reveals at opacity: 1 with no transform or clip, marquee static, cursor native.

The eighth value is the one that costs award points when it is missing, because it sits inside the 30 percent rather than the 20. A site that ignores prefers-reduced-motion has failed a fundamental to protect a flourish.

The order, and where the signature goes#

Seven sections, and the position of the one memorable thing is a decision rather than an accident.

1. Hero, step 5 type on the ground colour, 100vh, no image. The type is the image.
2. The signature moment, second, not saved for the end. A juror and a real visitor both decide within two sections.
3. The work or the product, a 12 column grid broken deliberately in one place, grayscale at rest.
4. One long statement, step 1 at 52ch, alone on the ground with 168px above and below. The pause is what makes the density before and after readable.
5. Detail, three blocks with a 70ms stagger, each with a real number in it.
6. The marquee, as the transition into the footer rather than as a decoration in the middle.
7. Footer, oversized, step 3, with the contact address as the largest type on the page after the hero.

Spacing runs on a Fibonacci ladder to match the type: 8, 16, 24, 40, 64, 104, 168. Section padding is 168px on desktop, 104px on tablet, 64px on a phone.

Three rules govern the sequence. The signature moment happens once, and a scroll driven effect occupies one section only, because an effect that runs the whole page stops being a moment. The grid breaks in exactly one place, on the work rather than the statement. And the footer gets the same effort as the hero, since it is the last frame a juror sees.

The verdict, and the recipe as one list#

There is a recipe. It is not published because the sites that use it are sold as inspiration, and inspiration is a category that depends on the values staying implicit. Everything in this article is measurable from a finished page with dev tools open in about four minutes.

The complete set:

• 1.618 from 18px, seven steps, top three shipped as clamp(), negative leading above step 3.
• Fibonacci spacing, 12 columns, 24px gutter, 168px sections.
• Five colours on #0A0A0A, one saturated accent under five percent of the viewport, no gradients.
• The eight motion values, with prefers-reduced-motion handled as a requirement rather than a courtesy.
• Seven sections with the signature moment in position two.

Check it the way a juror does. Scroll with a trackpad, then a wheel, then the keyboard alone. Turn on reduced motion and reload. Open it at 320px. Four passes, five minutes, and they catch everything that costs points inside the 70 percent.

That set is a page a jury scores on fundamentals and remembers for one thing, which is the actual brief behind the 40, 30, 20 and 10. And it is a paste rather than a research project: every prompt in the Thanor library carries the ladders, the curve values and the durations already chosen, for Claude, ChatGPT, Lovable, v0, Bolt or Cursor. For the section that carries the most weight here, the hero section specification goes deeper on the first viewport, and why unspecified pages converge explains why the variance you are fighting exists at all. Then browse the Thanor library.