Templates/E-commerce
Shopping

E-commerce

A luxury fashion storefront with editorial polish. Charcoal backgrounds, champagne gold accents, serif headings, and full-bleed product photography. The products are the hero, not the UI. 4 screens: home with hero banner, product grid, product detail, and cart.

4 screens

Maison

Browse

Product

Bag

About this template

E-commerce is a shopping app template designed by FireVibe AI. It includes 4 screens: Maison, Browse, Product, Bag. The design uses a dark color scheme with Cormorant Garamond for headings and DM Sans for body text. Every element — colors, typography, images, and layout — was generated by AI from a single prompt in under 3 minutes.

Tone

Understated luxury, editorial restraint. The silence between elements speaks as loudly as the elements themselves. Confidence without ostentation.

Target audience

Fashion-conscious women aged 25-40 with significant disposable income, accustomed to editorial-quality retail experiences. They shop at COS, Arket, Net-a-Porter, and Matches Fashion. They equate UI quality with brand quality and will abandon an app that feels mass-market.

Design direction

Maison moves like a fashion editorial — every screen is a page turn, every product is a portrait. The background is not black; it is the specific deep charcoal of a darkroom before the lights come on (#1A1A18), warm enough to feel considered, dark enough to make ivory product photography glow. The primary accent is not gold — it is the precise champagne-honey tone of aged Veuve Clicquot foil (#C9A96E), used with extreme restraint: only the checkout button earns a fill, everything else earns a hairline. Borders are not decorative — they are architectural. Every rule is a single pixel at #3A3A36, present to define space, not to decorate it. Typography is a duet: Cormorant Garamond carries all headings with the high-contrast stroke modulation of a Didot cut, set generously tracked in small-caps for labels and fluidly in title case for product names. DM Sans handles all body and UI text at weights 300–400 only — never bold, never loud. Radius is 2px — barely there, just enough to soften a corner without suggesting playfulness. Shadows are zero. Depth is achieved through tonal layering: background at #1A1A18, cards at #222220, inputs at #2C2C29. The product image is always the loudest element on screen. Everything else steps back.

Color palette

card
input
muted
accent
border
primary
success
secondary

Typography

Headings: Cormorant Garamond · Body: DM Sans

Design inspiration

Net-a-Porter iOS app, COS editorial lookbooks, Bottega Veneta brand identity by Daniel Lee

Like what you see? Clone it and make it yours.

Start free