Agency website prompt, in real values

An agency website is the only page in this set that is also a work sample. A restaurant page can be plain and the food can still be excellent. A design studio with an awkward page has already answered the question the visitor came to ask.

That doubles the stakes on restraint, and it changes what the first screen is for. One statement line, no hero image, twelve words at most, at 96px on a near black field, with the rest of the viewport empty.

Short verdict: ratio 1.414 from a 12px root, spacing on the Fibonacci sequence, #D8FF3E carrying black text at 17.25:1, and a price floor written into the page. The Thanor library ships designs at that resolution.

The site is the sample#

Two jobs, and most agency sites do the first and skip the second. Attracting is easy. Qualifying is the one that decides whether the calendar fills with work worth doing.

Qualifying is three things on the page:

• A price floor in currency. One sentence: the smallest engagement you take, as a figure. It removes the enquiries that were never going to close and it makes the remaining ones arrive already knowing the answer to the question everybody asks last.
• A named client type. Not ambitious brands, which describes everyone. A sector, a stage, a revenue band, or a specific problem.
• A process with real durations. Discovery, two weeks. Design, three weeks. Build, three weeks. A studio that cannot state a duration reads as a studio that has not run the process often.

Then the unit of persuasion, which is a case and never a service. Three cases, each with one number a client would recognise from their own reporting, one sentence of what changed, and one image. Not nine cases, because a fourth weakens the third, and not a service grid, because a grid of nine cards with nine icons is nine claims with nothing behind any of them.

The number is the part that gets dropped. A case that says the site was modernised says nothing a competitor cannot also say. A case that names a figure is checkable, and checkable is the whole difference. If a project genuinely has no number, it goes in the text list at the bottom rather than in one of the three slots. The same discipline applies to what goes in a proposal.

Root two, and a Fibonacci page#

Ratio 1.414, the augmented fourth, from a 12px root. Root two has a property worth exploiting: it doubles every two steps, so 12, 24, 48 and 96 all sit on the ladder, and the statement line is exactly eight times the label under it.

Line height 96px on a 96px size. Above roughly 60px, type wants a line height at or below its own size: at that scale the gap between 1.0 and 1.2 is the gap between a statement and a large paragraph.

Spacing runs Fibonacci from eight: 8, 13, 21, 34, 55, 89, 144. Section padding 144px, 89px, 55px. Cases sit 144px apart, 34px inside a case, and a label 13px above its number.

The accent takes #0A0A0A text, never white: black on acid measures 17.25:1 and white on acid fails at any size.

Two curves and one marquee#

Two curves plus one linear loop, and the split between them is the whole motion system.

--ease-statement: cubic-bezier(0.83, 0, 0.17, 1);  /* 760ms */
--ease-case:      cubic-bezier(0.22, 1, 0.36, 1);  /* 560ms */

--ease-statement at 760ms is an exponential in and out, and it runs once, on page load, on the opening line only: a clip-path reveal per line of type, bottom to top, 140ms apart. Symmetrical easing is slow to start and slow to stop, which on a single sentence reads as deliberate and on twelve elements reads as sluggish. So it touches one element and nothing else.

--ease-case at 560ms handles everything that arrives on scroll: case blocks 24px up, once, at 22% of the viewport, 100ms stagger, capped at three items since there are only three cases. Button hover is a 1px border weight change at 160ms on the same curve.

The marquee is the one place an agency site can afford a loop, and only under conditions:

• Client names as text, at step 0, linear over 38s, one row, one direction.
• Paused on hover and under prefers-reduced-motion: reduce.
• Duplicated once for a seamless loop, never three times, and no logos. A row of logos at different optical weights is a row that looks broken at any speed.

Nothing else moves. No cursor follower, no horizontal scroll section, no counting animation on the case numbers, which makes a reader wait for a figure already on screen.

Six blocks, and where the price goes#

Six blocks. The order puts evidence before claims and price before contact, which is the reverse of most studio sites.

1. The statement. Twelve words at step 6, one acid button reading See three projects, nothing else in the viewport.
2. Three cases. Each one: client name at step 0, the number at step 5, one sentence at step 1, one 16:9 image. 144px between them.
3. What we do. Three lines at step 2. Not cards, not icons, not nine services.
4. How we work. Four process steps with durations in weeks, at step 3, with a total at the bottom.
5. The price floor. One panel in surface, one sentence at step 2 naming the minimum engagement, and one line on what sits outside it.
6. The ask. A calendar link, the working hours, the reply time you actually hit. No contact form.

Block 5 is the one that gets argued about internally and it is the one that changes the inbox. A studio that publishes a floor gets fewer enquiries and a higher proportion of real ones, which is the same trade as choosing a niche instead of a market.

Block 6 replaces the form on purpose. A form with five fields asks a buyer to write a brief before they know whether you are free. A calendar link asks them to pick a Tuesday, and the difference shows up in the number of enquiries that turn into a conversation.

Block 3 is where the instinct to expand is strongest and where it costs the most. Nine services with nine icons occupies a screen and a half and tells a reader nothing that three lines do not, which is the same failure as a feature grid standing in for an argument.

The verdict on an agency brief#

One statement, three cases with three numbers, three service lines, a process in weeks, a price floor, and a calendar link. Six blocks, 144px apart, on a near black page with one acid accent that only ever carries black text. The restraint is not a style, it is the sample, and Thanor sells the values that hold it together.

The brief to paste#

Build a design studio site, dark.

TYPE: ratio 1.414 from a 12px root: 12, 17, 24, 34, 48, 68, 96. Body
17/28. Case numbers 68/70. Statement 96/96, weight 500, twelve words.

SPACE: Fibonacci from eight: 8, 13, 21, 34, 55, 89, 144. Section padding
144 / 89 / 55. Cases 144px apart, 34px inside a case, label 13px above
its number.

COLOUR: page #0A0A0A, surface #151515, ink #F4F2ED, muted #93908A, accent
#D8FF3E carrying #0A0A0A text and never white.

MOTION: opening line only, clip-path reveal per line, bottom to top,
cubic-bezier(0.83, 0, 0.17, 1) 760ms, 140ms per line, once on load.
Everything on scroll: 24px up, cubic-bezier(0.22, 1, 0.36, 1) 560ms, once
at 22% of viewport, 100ms stagger, three items maximum. Client name
marquee as text, linear 38s, one row, paused on hover and under
prefers-reduced-motion. No cursor follower, no counting numbers.

ORDER: statement plus one button / three cases, each with a client label,
one 68px number, one sentence, one 16:9 image / three service lines, no
cards or icons / four process steps with durations in weeks / a price
floor panel naming the minimum engagement / a calendar link with working
hours and reply time, no contact form.

Change the accent and the sector, keep the structure. Browse the Thanor library and take the design whose restraint matches the work you want to be hired for.