About this template
Averra Testimonials is a agency testimonials section built from one written brief, and this page documents that brief. “A truly collaborative process from start to finish. The results completely exceeded our initial expectations” is the line the layout is built to carry. The palette is white #EBEFE5 underneath, black #111111 for the type and bright lime #A5E038 carrying the accents. It ships as React and Tailwind CSS, so the whole testimonials section can be lifted into a project without a design handoff. Motion is limited to 0.04s transitions, cubic-bezier(0.22, 1, 0.36, 1) and a looping video bed. If you are briefing a agency testimonials section, start from this composition and replace the subject.
Designed for
- If you brief a model rather than a designer, start from the testimonials section and let the prompt hold a 1920x1208 frame.
- This testimonials section serves founders who need one screen of proof that agency copy can carry 4.6s of looping video.
- Made for product managers who need the testimonials section scoped to one sprint and no new assets.
What's included
- A navigation bar that gets out of the way. A short run of links and a single action sit over the testimonials section, held at 28px spacing steps and 0.04s transitions so the bar never competes with the composition behind it. The links are set below the wordmark in size, and the #A5E038 action is the only element in the bar with any weight.
- Video at the bottom layer. The media is doing atmospheric work rather than storytelling: one 4.6s loop at 1920x1208 behind everything else. Export at 1920x1208 or wider and the cover crop keeps working.
- Navigation held to one row. The bar sits over the 1920x1208 composition without a background of its own, so the media runs edge to edge underneath it.
- The spacing steps are quoted. Sizes were read off the render at 1920x1208: 28px spacing steps, 0.04s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing. Spacing is quoted in the same units as the type, so the two can be compared directly.
Motion & interaction
Hover where it means something
Feedback is limited to hover states on the buttons and links rather than on every card and a slider that pages through content on demand, so the rest of the layout is a fixed composition. Hover and focus are specified together, so the pointer and the keyboard get the same information.
A loop, not a timeline
Ambient movement comes from the 4.6s 1920x1208 loop rather than from scroll effects, which keeps the page calm and the type readable. Because it is muted, the loop can run under the copy without competing for sound or focus.
The argument this testimonials section makes
Most agency pages add another section when the first screen is weak. This one removes options instead: navigation and the stats row, in that order, and nothing that repeats the offer. Averra Testimonials states the offer once and lets the composition repeat it rather than adding a second claim.
Reading Averra Testimonials as a spec
The page has more numbers in it than it appears to. 28px spacing steps, 0.04s transitions and cubic-bezier(0.22, 1, 0.36, 1) easing are the ones a rebuild has to keep; the rest can move. Nothing in this testimonials section depends on a default.
How Averra Testimonials sequences the first read
The trade-off is patience: the page withholds the detail a scannable grid would hand over immediately. What it buys is a first screen where navigation and the stats row cannot be misread. A agency reader gets the offer before the options.
Frequently asked questions
What do I get when I copy the Averra Testimonials brief?
The captured brief runs 3,584 characters and covers the frame, the type scale, the palette and the transitions. Copying it gives you that text, and sending it to Studio stages the same request with the page already described.
What can I do with the Averra Testimonials brief once I have it?
Everything quoted on the page comes from the captured 3,584-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Why does the entry name React and Tailwind CSS at all?
Averra Testimonials was built in React and Tailwind CSS, and the entry says so for provenance. The brief describes positions, sizes and timings, so it rebuilds in any framework that can set type and place elements.
