Petal Gloss

Beauty App Design Template

Lumé is a glossy beauty shopping app design in a Petal Gloss aesthetic, made for founders and designers building a cosmetics or skincare product.

Use this template

Beauty app discover screen with editorial hero and trending product grid

Beauty app product detail screen with serum hero, shade swatches, and add to bag

Beauty app shade match screen with skin tone analysis and matched foundation results

Explore the screens

Preview the beauty mobile app design, fully editable in Sleek.

Ritual BuilderScreen 4

Beauty BagScreen 5

ProfileScreen 6

About the Beauty App

Lumé is a beauty app design template built around a "Petal Gloss" look: a warm porcelain-cream base, deep rosewood text, blush-petal surfaces, and a single liquid-gold accent reserved for primary actions. Cards lift off the cream ground with soft blush-tinted glows instead of hard borders, a high-contrast fashion serif carries product names, and a tight uppercase grotesque handles labels and prices. The result reads like sunlight on bare skin at a vanity mirror.

The template ships six connected screens that form a complete shopping and routine flow: a Discover home with an editorial hero and trending products, a glossy Product detail with shade swatches and reviews, a Shade Match skin-tone selector, a Ritual Builder timeline, a Beauty Bag cart with subtotal, and a Profile with skin data and ritual consistency. A signature Shade Strip of real makeup swatch dots recurs across the cards, so the catalog feels like browsing actual color.

Use it in Sleek and make it yours: restyle the palette, edit any screen with AI by describing the change, and add the flows your product needs. Then export it to code, copy it into Figma, or hand a prompt to an AI agent to build it for real, far faster than starting from a blank canvas.

Screens included

Discover

An editorial home with a glass-skin hero feature, category pills for Skincare, Lips, Eyes, and Tools, and a trending grid where each product tile shows a shade strip, star rating, and price. The browse-and-shop entry point.

Product Detail

A large glossy product hero for the Dew Drop Serum with name in fashion serif, a row of tappable shade swatches, a 4.9 star rating, ingredient highlights, and a gold "Add to Bag" button. Where shoppers decide and buy.

Shade Match

A guided skin-tone analysis with a dewy face swatch preview, selectable shade chips (20W, 22N, 24W), and ranked product matches with confidence percentages and add-to-bag actions. Helps shoppers find their exact shade.

Ritual Builder

A morning timeline of routine steps as stacked tonal cards: Cleanse, Treat, Seal, and Protect, each with a product thumbnail, time, and tip, plus a collapsed Evening Reset section. Turns products into a daily glow routine.

Beauty Bag

A cart grouped by Skincare Essentials and Color Collection with thumbnails, shade labels, quantity steppers, a gold total estimate, and a satin "Checkout Now" button. The purchase moment.

Profile

A member profile with avatar, loyalty level, wishlist and points stats, an editable Skin Profile of type, tone, and concerns, and a weekly Ritual Consistency bar chart. Keeps the routine personal and on track.

Key features

Petal Gloss aesthetic: porcelain cream, rosewood ink, blush, liquid-gold accent
Signature Shade Strip of tappable makeup swatch dots across cards
High-contrast fashion serif paired with uppercase grotesque labels
Tonal stacked surfaces that lift on soft blush glows, no hard borders
Floating frosted-glass nav bar with a gold active state
Editorial dewy-skin photography and crisp product shots
Shade-match flow with confidence-scored recommendations
Routine builder timeline with morning and evening rituals

Who it's for

Founders launching a cosmetics or skincare e-commerce MVP

Product designers needing a polished beauty app starting point

Indie developers building a makeup or salon shopping app

DTC beauty brands prototyping a mobile storefront

What you can build

Launch an MVP for a beauty or skincare shopping app
Mock up screens for an investor or brand pitch
Hand a consistent beauty app UI off to developers
Explore a redesign of an existing cosmetics store

How to use this template

1
Open the template
Browse the screens and preview the full design to see if it fits your idea.
2
Use this template
Open your own fully editable copy in Sleek with one click.
3
Edit with AI
Restyle the palette, change layouts, and add or remove screens just by describing what you want.
4
Export and ship
Export your design or hand it to developers, and keep building toward launch.

Questions, answered. Everything to know before you start.

How do I build a beauty app from this template?

Click "Use this template" to open it in Sleek as your own editable project, then shape it by describing the changes you want: swap products, restyle the palette, and adjust any screen. You start from six complete screens instead of a blank canvas, so you reach a working beauty app design much faster.

What screens are included in this beauty app design template?

Six connected screens: Discover, Product detail, Shade Match, Ritual Builder, Beauty Bag, and Profile. Together they cover the core flow of a beauty shopping app, from browsing trending products to matching shades, building a routine, and checking out.

Can I customize the beauty app UI design?

Yes. Use the template in Sleek and edit any screen by chatting with the AI: change the palette, update the swatch shades, edit layouts, and add or remove flows. There's no manual redraw; you describe the change and it's applied.

Is this template suitable for a beauty salon app?

It adapts well. The discover grid, profile, and routine builder map onto salon services, client profiles, and appointment routines. Replace the product catalog with services and the booking flow you need to fit a beauty salon app design.

Is this beauty app design template free to use?

You can open and explore the design for free, then use it in your own Sleek project to build on it. Editing and exporting follow Sleek's standard plans.

Can I export the design to code or Figma?

Yes. Sleek exports your design as code, copies straight into Figma with no plugin, or hands you a ready-made prompt that an AI agent like Claude Code or Cursor can use to build it into a real, working app.

Something else? Write to support@sleek.design.