The hardest step on a beauty website is usually not the first screen. It is choosing a shade. Screens shift colour, shade names are often just numbers, and shoppers struggle to picture a lip tint on their own face. When they cannot decide, they leave, or they buy and return.
This breakdown looks at Tinted Hours from the Foundax case library, a fictional lip and cheek brand with six lip tints, four cheek balms and two sets. Its approach is to turn choosing a shade, the core shopping action, into the story of the whole website.
Why beauty websites are hard
- Screens shift colour. The same colour looks different from screen to screen, so a swatch alone is hard to trust.
- Shade names are abstract. Names like "#03" or "Rose Nude" say nothing about when to wear it.
- The effect on skin is invisible. A shot of the tube cannot show texture, sheerness or layering.
- More options, harder decisions. The more shades there are, the easier it is to get lost.
So the design goal for Tinted Hours is: give every shade a memorable reason to exist, then explain the same colour in several ways.
The idea: name each shade after an hour of the day
The six lip tints are named after hours of the day, from "06:40 Morning Mist" to "23:40 Night Sea". Light changes through the day, and the colour on your face can change with it. A shade name stops being a number and becomes an occasion: which one for the morning commute, which one for dinner.
The website carries the idea all the way through. A clock at the top of the page runs from 06:40 to 23:40 as you scroll, and the background blends between the colours of neighbouring hours. Reading down the page feels like moving through a day.
Palette: six hours, six pairs of colours
Each hour has a lip colour and a page background. The lip colours are measured from the product photos, so the swatches on screen match the liquid in the tubes.
- 06:40 Morning Mist
#C29088Sheer rose; page background #E7E5E2 - 10:15 Apricot Light
#E29372Warm apricot; page background #F4E6D6 - 13:30 Warm Stone
#AB6C57Terracotta nude; page background #E9DCCB - 17:50 Afterglow
#D25449Coral red; page background #F0C3AE - 20:05 Claret
#662430Deep wine; page background #3B2230, text turns light - 23:40 Night Sea
#5D2B45Blue-toned plum; page background #141A28
How the typefaces divide the work:
| Use | Typeface | Why |
|---|---|---|
| English headings and shade names | Cormorant Garamond, roman and italic | An editorial beauty feel, with italics for quotes and shade names |
| Times and prices | IBM Plex Mono | The timestamp is a brand mark, and tabular figures keep the clock and prices aligned |
| Chinese | System Songti for headings, system sans for body text | No large Chinese web fonts, so the first screen stays fast |
Four signature moments
Clock
A day passes as you scroll
The clock at the top runs from 06:40 to 23:40 as you scroll, and the background blends between neighbouring hours. With reduced motion turned on, the background switches hour by hour instead.
Gallery
Six shades take the stage
The shade section stays pinned while six product shots slide in, each with its hour, shade name and a line written like a diary entry.
Texture
Drip, swatch, layer
Three macro images show a drop lifted by the applicator, six swatches on paper and two shades layered on an arm, answering what it looks like on skin.
Choose
One tap changes the page
Choosing a shade in the shop section switches the lip close-up, the product shot and the page background to that hour.
The six-act storyboard
01
Opening: Color for every hour of light
A lip tint stands on a stone ledge in the morning mist, with the brand name and tagline in the empty space on the left. The clock starts at 06:40, setting the rhythm for the whole site.
02
Hours: Six hours, six shades
Six product shots slide in one after another while the background follows the hour. After 20:05 the page turns to night and the text becomes light.
03
Texture: Sheer at first touch
Six swatches on paper and a layered swipe on an arm show the same colours in two ways, covering what a single swatch cannot.
04
Shop: Choose your hour
A large lip close-up sits next to six shade dots. Choosing a shade changes the images and background, and the product page takes over with prices and stock from product data.
05
Cheeks: The same hour, on your cheeks
Four cheek balms share the lip shades' tones and pair with them hour by hour, leading into the day and night sets.
06
Closing: The last hour of the day
A lip tint by night water closes the story and answers the last questions about shipping, returns and support before visitors leave.
Keeping product images consistent
Six shades need to look like one product, so consistency matters more than any single beautiful shot. Tinted Hours first locks one master image of the tube, then changes only the liquid colour and background for each shade, keeping the tube, angle and lighting the same. The lip close-ups work the same way: one master image, with only the lip colour changed for the other shades. The Foundax team made the case images with image generation tools using this method.
With real photography, the same rule applies: one camera, one angle, one lighting setup, and every shade shot in a single session.
From choosing a shade to the order
In Foundax, shades are real product variants, not just a list of SKUs. The shade selector, prices and stock on the product page all come from product data. Sets can go straight into the bag, and the HOURS15 code takes its discount at checkout.
The shade picker is accessible too. The selected shade shows its hour and name in large type, and every shade dot carries a screen reader label such as "17:50 Afterglow", so colour is never the only cue. W3C's WCAG 2.2 also says colour must not be the only way information is conveyed. To see how products and variants work, visit Foundax features.
A checklist you can reuse
- Give shades a naming system people remember, such as hours, occasions or moods, instead of numbers.
- Explain each colour three ways: product shot, swatch and on-skin close-up.
- Make choosing a shade the centre of the page: the images and atmosphere change with it.
- Lock one master product image before producing the rest, so every shade looks like the same product.
- Show the selected shade's name in text and label every swatch for screen readers.
- Use sets and pairing suggestions to help undecided visitors choose.
FAQ
How many shades should a beauty brand show?
As many as you can clearly tell apart. Tinted Hours has only six lip tints, each tied to an hour. Six colours with clear occasions beat twenty similar ones.
What can I do about screen colour differences?
You cannot remove them, but several references reduce mistakes: the liquid in the tube, swatches on paper, a layered swipe on skin, a lip close-up, and text about the light each shade suits.
Is Tinted Hours a real brand?
No. Tinted Hours is a fictional brand created by the Foundax team. Shopping and orders in the case are a demo. Nothing is charged or shipped.
Can I start my own website from this design?
Yes. On the Tinted Hours case page, choose "Start with this template". After signing up, a website is created from this case, ready for your own products, photos and brand content. For design methods across industries, see the brand website design guide.