Css Ninja

A marketplace selling UI kits and HTML template sets to developers. The homepage has to show 156 products without turning into a catalogue, and prove quality by rendering the products rather than describing them.

WebsiteUX / UIProduct UI

ClientCss Ninja

Year2022

RoleDesign + UI

Timeline7 weeks

Request an audit ↗Talk about a similar project

The homepage, top to bottom: the live component collage, the template ranges, bestsellers, featured, dashboards, landing pages and the product highlight.

Work details

TypeMarketing website · marketplace

IndustryUI kits · HTML templates

ClientCss Ninja

RoleWebsite design, UI and card system

Year2022

Timeline7 weeks

StatusShipped

DeliverablesHomepage system, product card, four listing rails

Fonts

InterRoboto Mono

Colours

Built with

Figma

Vue

Tailwind CSS

TypeScriptSwell

Stripe

One product card takes every listing — price, framework badges, tag, thumbnail — so a new rail is a query rather than a layout.

What it needed

Selling components to the people who judge components.

The buyers are developers and designers who evaluate a kit in seconds and are unforgiving about detail. A marketplace page for them faces two opposite risks: a hero that says nothing concrete, or a grid so dense the products blur into wallpaper. And with 156 items across dashboards, landing pages and freebies, the page had to make range visible without asking anyone to browse.

What I did

Hero

The promise is one line, and the proof sits beside it as a live collage of real components — profile card, notification row, calendar, toolbar, message panel. The products are the illustration; nothing is drawn.

Card

One product card everywhere: thumbnail, name, framework badges, tag, price, and a dark buy button. Price is always in the same corner, which is what makes a nine-card grid scannable instead of decorative.

Rails

Four listing sections with their own headers — bestsellers, featured, dashboards, landing pages — each with a see-all link, so the catalogue is sampled rather than dumped.

Ranges

Between the rails, two alternating explainer blocks (elite HTML templates, admin templates) show a stack of real screens at an angle, giving the eye somewhere to rest between grids.

Highlight

One product gets a full-width feature with its price on the artwork, and the page closes on the freebies — the low-risk way in for a first-time buyer.