Clinique

Overview

FormatPage Grabber

PlatformDesktop + Mobile

EngineGreenSock

AgencyUndertone

Interactive product exploration for Clinique skincare. Users browse product lines, match foundation shades to their skin tone, and see before/after comparisons. Each product card includes an ingredient deep-dive and a direct purchase CTA.

How It Works

~2s

Brand

Clean white background. Clinique logo and product hero image animate in with minimal, clinical timing.

Interactive

Products

Product line showcase: cleanser, moisturizer, foundation. Each product reveals ingredient highlights and key benefits.

Interactive

Shade Match

Foundation shade selector lets users browse color options. Each shade swatch triggers a model image update showing that shade in context.

End State

Shop

Shop now CTA with product-specific deep links. Clinique logo click-through to brand homepage.

Engineering

Clinical Design

Clinique's brand is built on scientific credibility. White backgrounds, generous whitespace, and restrained typography create a lab-coat aesthetic that feels trustworthy.

Shade Selector

Color swatches rendered as CSS background-colors from Clinique's approved hex values. Tapping a swatch updates the hero model image to show that shade in context.

Ingredient Panels

Expandable panels with ingredient names, concentrations, and benefit descriptions. Clinical terminology used deliberately: Clinique's audience expects scientific language.

Color Accuracy

Foundation swatches use exact hex values from Clinique's digital shade library. No CSS filters or opacity adjustments: every color is a specified value.

Engineering Decisions

L'Oréal sells glamour. Clinique sells science. The design needed to feel like a dermatologist's recommendation, not a magazine editorial.

Foundation shade accuracy is critical. A shade that looks different in the ad than in the store creates returns and brand distrust. Exact hex values prevent this.

Clinique's audience reads ingredients. Making them interactive respects their sophistication and lets casual users skip without feeling overwhelmed.

White says "clean." Every other beauty brand uses color to create mood. Clinique's white background is a competitive differentiator: it signals purity and transparency.