About this template
CozyPaws gives an ecommerce brand a finished first screen and the numbers that produced it. The palette runs white #EFFDF0 underneath, deep green #1A3D1A for the type and bright orange #E86A10 carrying the accents, and the type is Inter. Delivery is React and Tailwind CSS — one page, no plugin, no build tooling between you and the design. Motion is limited to 0.8s transitions, cubic-bezier(0.16, 1, 0.3, 1) and a looping video bed. If you are briefing a ecommerce hero section, start from this composition and replace the subject.
Designed for
- Engineers who need the hero section to survive a slow connection will use 1460x1080 and the type scale as the weight budget.
- This hero section answers the builder who wants to know what 70vh sections and 60px spacing steps actually controls in the layout.
- Product marketers who need the hero section to still read with 4.8s of looping video behind the copy.
What's included
- Navigation held to one row. The bar carries the wordmark, the section links and one #E86A10 button, measured at 70vh sections and 60px spacing steps so it never grows into a second header. The links are set below the wordmark in size, and the #E86A10 action is the only element in the bar with any weight.
- Media behind the type. A 4.8s clip at 1460x1080 does the atmospheric work; the brief fixes its crop and leaves the type untouched on top of it. The loop is short enough (4.8s) that the eye reads it as texture rather than as a timeline.
- Faces with one job each. With Inter doing the work, the sizes step down hard from the headline to the supporting copy and letter-spacing tightens as the size grows, so the hierarchy is carried by type rather than colour. Numerals share the interface face, so statistics and labels belong to the same system. One face, clear roles.
- A bar with nothing spare. One action per bar. The reference was captured at 1460x1080.
Motion & interaction
The whole animation budget
Motion in the controls is short and repeatable: 0.8s on each state change. Easing is specified alongside the duration (0.8s), so a rebuild cannot quietly substitute a different feel.
A small interactive surface
Only the controls respond to the pointer (hover states on the buttons and links rather than on every card), so the page feels responsive without turning every element into a target. A control that looks interactive behaves interactively, so there are no false affordances.
Reading CozyPaws as a spec
Every relationship on this page is a value you can check: 70vh sections, 60px spacing steps, 0.8s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing. That is what makes CozyPaws rebuildable rather than merely reproducible. Nothing in this hero section depends on a default.
The order behind the hero section
Read it in order: navigation, the headline, the announcement badge, the stats row and the card grid. Each element has one job, and the bright orange #E86A10 accent is spent only on the element you are meant to press. A ecommerce reader gets the offer before the options.
Why this composition works for ecommerce
One screen means one decision for the reader, and that is the cost of this layout: everything else moves below the fold. The brief states 70vh sections, 60px spacing steps, 0.8s transitions and cubic-bezier(0.16, 1, 0.3, 1) easing so the lower sections keep the same rhythm. It gives a ecommerce reader the shortest honest route to the offer.
Frequently asked questions
What do I get when I copy the CozyPaws brief?
The captured brief runs 6,443 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.
How is this CozyPaws entry organised?
Everything quoted on the page comes from the captured 6,443-character brief rather than from a description written afterwards. That is why the numbers and the prose agree.
Do I need React and Tailwind CSS to rebuild CozyPaws?
CozyPaws 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.
