The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Serenity Day Spa — Landing Page
Overview
Serenity Day Spa is a landing page concept created for a modern wellness brand. The goal was to create a calm, elegant, and welcoming experience that reflects the feeling of visiting a spa.
The Goal
I wanted the website to clearly introduce the spa, showcase its treatments and experiences, and guide visitors toward booking a treatment.
The Design
I used a warm, natural color palette with Fraunces typography to create a soft and premium visual identity. The layout uses spacious sections, calming imagery, clear typography, and simple calls to action.
My Approach
I focused on making the content easy to scan while creating a consistent experience across the page. I refined the layout, typography, content, spacing, imagery, and overall visual hierarchy to make the design feel more polished and intentional.
AI-Assisted Workflow
I used Figma AI to generate the initial design direction, then refined the result based on my own design decisions and the needs of the brand.
Tools: Figma + Figma AI
Role: UI/UX Designer
Project: Landing Page Concept
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Trending
retrofuturism
Share your favorite designs from the past exploring the distant future. Or your own take on the aesthetic 🚀
halftone
Dots. Texture. Grain. Let's see your designs using the halftone technique.
Midjourney
Creatives are showing off what they're making with Midjourney.
colorgrade
Video editors sound off: How do you enhance the mood of your video in color grading?
Related posts
A beautiful website can lose a surprising amount of its character on a phone.
Not because it’s broken.
The buttons work, the sections stack, and everything technically fits. But the rhythm feels flatter, the hierarchy becomes weaker, and the mobile version starts to feel like a leftover from the desktop.
I wanted to avoid that with Sirnik, TOSOO, and APVist.
Each project needed its own mobile edit: deciding what belonged first, what could be simplified, and which visual moments were worth protecting.
I brought a few of those screens together in this short reel.
Different brands and different visual systems, but the same goal:
The mobile version should feel designed - not adapted.
If you’re working on a website and want that same level of care across every screen, let’s talk!
A few recent projects that made it out of Figma and into the browser 👀
The transition from that portrait hero into the stacked device mockups is smooth, curious how much of the three.js layer is custom versus a library like R3F.
Why does some text feel effortless, and some feel like a wall?
Same words, same order, same brand. All that changes is the size relationship between the lines, and the space between them. That alone decides whether the eye knows where to start.
01 - A real scale. The headline jumps, the body steps back, and the spacing tightens around what belongs together. Now the eye lands, skims, and reads in the right order.
Hierarchy isn't bigger fonts everywhere, it's a bigger gap between the levels, and a smaller one inside them.
02 - One size, one gap. Eyebrow, headline, and body sit at nearly the same size, spaced evenly apart. Tidy, but flat, nothing steps forward, so nothing says "read me first."
Be honest - do you use a type scale, or just size things until they look right?
92 voted
94%
6 voted
6%
98 votes
Closed
01 is perfect