About this template
Beauty Categories gives an ecommerce brand a finished first screen and the numbers that produced it. The whole page is built on white #EBEBEB underneath, deep orange #251E18 for the type and orange #593C2D carrying the accents. The build is React and Tailwind CSS; every measurement in it is written down, which is what makes it reusable. The page keeps its motion to 150ms transitions. Use it as the reference when you are building an ecommerce brand features section and want a finished composition instead of a starting point.
Designed for
- This features section serves teams who have to justify a 640x470 frame to someone who was not in the kickoff.
- Made for a solo founder shipping one features section for an ecommerce brand and no design system behind them.
- People who brief a model on a features section will use the 4,038-character prompt as the starting point.
What's included
- The sizes are in the brief, not in a scale. Every measurement in the brief is a number you can measure back: 20px spacing steps and 150ms transitions. Values are quoted from the captured prompt rather than inferred, so they survive a re-render.
- Accent discipline. The palette is a ground and a signal (white #EBEBEB and orange #593C2D), with the second colour reserved for actions. Contrast between #593C2D and white #EBEBEB is what makes the accent readable at small sizes.
- The composition is the content. The composition is complete at 640x470: the copy, the media and the controls are all named in the brief. The page is one composition at 640x470, which is why it holds together when the copy changes. Nothing decorative belongs above the fold.
- Every measurement is written down. Spacing is quoted the same way (20px spacing steps and 150ms transitions), not as a scale that grows on its own.
Motion & interaction
Timing kept in the brief
One duration covers the interactions (150ms), which is what keeps hover and press reading as one system. Short timings are why the page reads as authored; a slow default would undo the composition.
The page assembles as you move
Scroll reveal is the only scroll behaviour in the brief, which keeps the page from feeling like a sequence of separate effects. The effect is scoped to the elements named in the brief rather than to the whole page.
Making the features section yours
The composition is the reusable part and the subject is yours. Keep 20px spacing steps and 150ms transitions and replace the words, the media and the brand marks. The frame and the scale are what to leave alone.
What an ecommerce brand gains here
If your first screen currently explains three things, this is the version that explains one. the stats row, the card grid and the background clip are staged in reading order, with 20px spacing steps and 150ms transitions setting the rhythm. Beauty Categories states the offer once and lets the composition repeat it rather than adding a second claim.
How Beauty Categories sequences the first read
One screen, one action, and the stats row, the card grid and the background clip between them. The brief fixes that order rather than leaving the first screen to a stack of sections. A ecommerce reader gets the offer before the options.
Frequently asked questions
What does the brief behind Beauty Categories actually contain?
The captured brief runs 4,038 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 much of Beauty Categories depends on React and Tailwind CSS?
Beauty Categories 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 do the 150ms transitions in Beauty Categories behave?
Entrances and state changes are in the 150ms range. They are driven by state changes rather than a scroll library, and they never hold up the copy.
