Chemistry in its gentler form, this is a concept that travels down the website along with the protagonist of the story: Delica's Hyaluronic Acid based serum.
They wanted a product-focused website that would take you through a guided tour across the experience of using their serum.
const Disclaimer = () => {
return ( <section className="w-[100%] h-screen flex justify-center items-center" > <p> Delica is, by now, a fictional brand and a proof of concept </p> </section> ) }
export default Disclaimer
Guided Tour
Discovery and movement, as the treatment advances and the benefits appear one drop of serum at a time. The site takes you through the healing and satisfaction of the journey as you scroll
Data goes hand in hand with emotions in the next stage of the tour, as your hand holds the serum and it guides you through the numbers of the product.
And now for the shopping section as the serum moves from your hand to the shopping bag. Social proof on one side and on the other a simple system to select the amount you want or if buying on big volumes jumping on a call for a distribution deal
About the Brand
Once the target audience and brand goals are decided the colors become the next step in the alchemy of web design. The mood and feeling of the website is born first from the harmony of light frequencies.
The core of Chemistry by Delica is the harmony between the strong action of their serum and the delicate treatment of the skin, with both softness and elegance as the overall feeling of their brand.
To achieve this I focused on a gradient of warm colors from dark pink to light orange. Pink is the main color of the brand, allowing for a soft beauty while put against the white background with a slight tint of yellow while the dynamics between the pinks, the orange and grey builds the elegance that represents a top quality product.
And along with the colors, the next ingredient is text. From fonts to the typescale different relationships between each block of text and structure serve different purposes.
Emotionally charged headlines use Cormorant Garamond in all caps, Elegant, refined, and yet striking without being overwhelming. Paired with a subheading in Lato, a clear message established along the headline like the answer to a question.
Factual data uses big, bold, numbers in Lato. Ensuring there are no doubts about the benefits are rooted in well measured data while a small paragraph adds detail to inform the user what to expect and in what timeframe. Colors are also replaced by a border, information by itself carries all the meaning of this blocks of text.