About this template
Daisy Wild is the landing page reference for an ecommerce brand, and the brief behind it is a full build spec rather than a mood board. The page's own headline reads “`), the note LABELS (”, and the composition is built around those exact words. The palette is lime #BDE84F underneath and black #000000 for the type. Delivery is React and Tailwind CSS, captured at 640x476 so the frame is fixed before any code is written. Motion comes down to 1400ms transitions and cubic-bezier(0.22, 1, 0.36, 1). This reference is for an ecommerce brand that wants the first screen settled before the build starts.
Designed for
- Made for a solo founder shipping one landing page for an ecommerce brand and no design system behind them.
- People who brief a model on a landing page will use the 10,292-character prompt as the starting point.
- Made for content leads rewriting a landing page whose headline has to stay as long as Daisy Wild's.
What's included
- Values you can check. The brief names the numbers: 16px spacing steps, 1400ms transitions and cubic-bezier(0.22, 1, 0.36, 1) easing. That is why the composition holds together, because there is no invented spacing step between the type and the frame. Each value maps to one job: a type step, a gap, a radius or a transition.
- A stat row instead of a claim. A compact stats strip carries the claims that would otherwise need a paragraph, which keeps the landing page from turning into a feature list. The accent is spent on the figures that make a claim, not on the row as a whole.
- Structure in one screen. The landing page is built so the copy lands before anything else: the type carries the hierarchy, the 640x476 frame holds the composition, and the supporting values stay quiet. The page is one composition at 640x476, which is why it holds together when the copy changes.
- The spacing steps are quoted. Spacing is quoted the same way (16px spacing steps, 1400ms transitions and cubic-bezier(0.22, 1, 0.36, 1) easing), not as a scale that grows on its own.
Motion & interaction
Durations from the brief
Motion in the controls is short and repeatable: 1400ms on each state change. The quoted timing covers state changes, so the feedback is the part of the motion that is specified.
Feedback on the controls
The pointer work is small and specified: hover states on the buttons and links rather than on every card, applied to the elements that already look interactive. The states are named in the brief, so the page does not depend on a hover-effect library.
The order behind the landing page
When a ecommerce reader lands on a single screen, they scan before they read. The layout answers that: the stats row and the background clip are sized to be scanned, with 16px spacing steps and 1400ms transitions keeping each stop distinct. A ecommerce reader gets the offer before the options.
What holds up for Ecommerce
When you brief a ecommerce landing page, the hard part is deciding what the first screen refuses to say. Daisy Wild answers that in advance: one display line, the stats row and the background clip behind it. It gives a ecommerce reader the shortest honest route to the offer.
What to change first in Daisy Wild
A straight substitution has a limit: if your product needs a different hierarchy, 16px spacing steps and 1400ms transitions will fight it. Change the order first in that case, and the values second. The frame and the scale are what to leave alone.
Frequently asked questions
What do I get when I copy the Daisy Wild brief?
It is a build brief rather than a mood description: it names the composition at 640x476, the spacing and the motion values. Nothing in it treats the rendered image as the source of truth.
Why does the entry name React and Tailwind CSS at all?
Daisy Wild 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.
How should I handle the Daisy Wild media in a client build?
The brief is a description, not a licence to redistribute someone else's assets. Keep the structure and the numbers, replace the media and the brand marks, and credit the source if a client asks where the layout came from. The reference was captured at 640x476.
