Solène

Solène is a clean-beauty brand selling skincare, makeup, haircare, body and fragrance. Its homepage has a lot to carry in one scroll: a featured product and an offer, the reasons to trust the brand, a way into each category, the best sellers, the current promotions, and a newsletter sign-up.

I designed it in three passes so each decision was made at the right level of detail: the order and weight of sections as wireframes, the look once the structure was settled, and the behaviour in code.

The lo-fi pass has no brand in it on purpose. Every section is numbered and named in the margin: header and navigation, the hero with its featured product, offer and call to action, categories, the product listing, offers and promotions, and the footer.

Working in grey kept the questions structural. The hero pairs the headline and two calls to action with a product card that floats over the image, so there is a way to buy above the fold. A trust strip sits directly under it, before any browsing starts.

The palette is six colours. Cream and ivory alternate as section grounds, so the page has rhythm without rules or boxes. Burgundy is the one strong colour, used for the announcement bar, the primary buttons, the sale panel and the footer. Terracotta is kept for small accents like the eyebrow labels.

Three typefaces share the work. Lexend Exa, wide and light, sets the headlines in capitals. Bodoni Moda is used once, for the wordmark. Instrument Sans carries the body copy and the interface.

The category images are cut into arches, which gives the grid a shape of its own and separates it from the square product cards that follow.

The mobile design at 390 is its own layout. Search moves out of the header into a full-width bar, and the navigation links become a row of category chips directly under it, so the two most common ways into the catalogue are both in reach before the hero.

I built the design in Next.js with Tailwind CSS. The design tokens carried straight across: the colours and the three font roles in the design file are the same colours and font roles in the stylesheet.