Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations.

Primary
rgb(0, 0, 0)
$COLOR_PRIMARY
Secondary
rgb(89, 89, 89)
$COLOR_SECONDARY
Black
rgb(0, 0, 0)
$COLOR_BLACK
Grey 1
rgb(85, 86, 91)
$COLOR_GREY_1
Grey 2
rgb(235, 235, 235)
$COLOR_BLACK
White
rgb(255, 255, 255)
$COLOR_WHITE
Red
rgb(182, 57, 56)
$COLOR_RED
Text
rgb(0, 0, 0)
$COLOR_TEXT
Text Light
rgb(89, 89, 89)
$COLOR_TEXT_LIGHT
Link
rgb(89, 89, 89)
$COLOR_LINK
Link Hover
rgb(0, 0, 0)
$COLOR_LINK_HOVER
Border
rgb(0, 0, 0)
$COLOR_BORDER
Background
rgb(0, 0, 0)
$COLOR_BACKGROUND
Background Secondary
rgb(89, 89, 89)
$COLOR_BACKGROUND_SECONDARY

Icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics to either replace or accompany labels.

Spacing variables are used to consistently apply margin and padding across components and UIs. Having a set spacing scale brings a rhythm to the product and creates a natural and familiar flow from page to page.

$SPACING_3XS

$SPACING_2XS

$SPACING_XS

$SPACING_S

$SPACING_M

$SPACING_L

$SPACING_XL

$SPACING_2XL

$SPACING_3XL

$LAYOUT_2XS

$LAYOUT_XS

$LAYOUT_S

$LAYOUT_M

$LAYOUT_L

$LAYOUT_XL

$LAYOUT_2XL

Typography is used to create clear hierarchies, useful organizations, and purposeful alignments that guide users through the product and experience. It is the core structure of any well designed interface.

Display 1

.d1

Display 2

.d2

Display 3

.d3

Heading 1

h1, .h1

Heading 2

h2, .h2

Heading 3

h3, .h3

Heading 4

h4, .h4

Heading 4 - Medium

h4.medium, .h4.medium
Heading 5
h5, .h5
Heading 6
h6, .h6
Heading 6 - Medium
h6, .h6.medium

Lead

.lead

Lead - Medium

.lead

Paragraph

.paragraph

Meta

.meta

Accordion enables users to expand and collapse sections of content.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Apples are a fine fruit often associated with good health, and fewer doctor's appointments.

    Example. An apple a day keeps the doctor away.

  • Kiwis are a fun, under-appreciated fruit.

A component that can wrap any type of content to highlight information for a user or to just draw attention to a specific element.

Default
Sale
New in

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

.button--primary,
.button--outlined
.button--secondary,
.button--outlined
.button--success,
.button--outlined
.button--warning,
.button--outlined
.button--error,
.button--outlined
.button--light,
.button--outlined
.button--dark,
.button--outlined
.button.button--small
.button
.button.button--large
.button.button--block
.button.is-active
.button.is-disabled or .button[disabled]
.button.is-loading
.button.is-toggled
.button.is-error
.button.is-focused

Checkboxes are used when there is a list of options and the user may select multiple options, including all or none.

Checkbox (input + label)

A utility selector that allows the user to update all prices on the store to the selected currency.

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

We'll never share your email with anyone else.
Multiple options

A re-usable notification which dynamically updates based on items in the cart.

Lists consist of related content grouped together and organized vertically.

  1. Ordered List level 1
    1. Ordered List level 2
    2. Ordered List level 2
  2. Ordered List level 1
  3. Ordered List level 1
  • Unordered List level 1
    • Unordered List level 2
    • Unordered List level 2
  • Unordered List level 1
  • Unordered List level 1

Loading spinners are used when retrieving data or performing slow computations, and help to notify users that loading is underway.

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Redirect modal is used to warn and direct incoming traffic to the correct store.

Liquid error: Could not find asset snippets/modal-redirect.liquid

Notifications are messages that communicate information to the user.

A component that is used to concatenate long sets of data for a user to consume information easier.

The appearance of payment icons help reinforce the feeling of security on the website. These are the currently enabled payment options defined in the store settings.

  • American Express
  • Diners Club
  • Discover
  • JCB
  • Maestro
  • Mastercard
  • PayPal
  • Visa

Form field to decrement or increment a number input using attached buttons. Each quantity selector has a unique identifier to avoid conflicts.

Radio buttons are used when a list of two or more options are mutually exclusive, meaning the user must select only one option.

Radio (input + label)

A special input field used as the primary means of discovering content, or as a filter to aid the user in finding content.

Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.

A highly stylised radio input with the appearance of a selected choice card. There are active, inactive, disabled and empty states for each swatch. Can be used as labels or with filled backgrounds.

Text inputs enable the user to interact with and input data. Use when the application requires long-form content from the user.

Validation error message here.

Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)

Validation error message here.

Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)

Links are used primarily as a navigational element. Links may also change what or how data is displayed (view more, show all). If the action taken by the user will change or manipulate data, use a button.

A cover listing is an extensible section that contains large visual blocks of content that can be used for a single promotion without being obvious with the call to action.

Cover listing

A grid of article cards containing the most recent articles of a single blog.
A grid of product cards from a single collection that can be displayed in a static grid or within a carousel if there are more than 5 products.
A flexible content slider using background images. This section has several content and text alignment options as well as settings for text and background colours.
A standard Instagram feed gallery powered by the Instafeed app which requires a Instagram Client ID. A license is required if the design is also in a carousel.

The latest from

@zoevacosmetics

A newsletter callout is a flexible component used primarily to highlight and focus on newsletter sign ups.
A modal that appears on initial visit to encourage more newsletter subscriptions usually enticed by special promotions or other incentives.

An off-canvas drawer that slides in from the right-hand side of the viewport. This drawer is used for ease of accessibility to customise items currently in the cart and to provide user feedback throughout the purchasing experience.

A good site footer becomes the visual anchor of an e-commerce store in which users are able to see all the key categories and pages at a glance with minimal interaction.

The look and feel of the header is the key ingredient to a consistent user experience that all good websites share. It controls all the links guiding and navigating the user across the website which ultimately builds trust within the store.

This block is the visual anchor of every collection page and is used to quickly identify which category the user is currently browsing.

Product cards are a medium-sized component that contains key product information such as a featured thumbnail, title and price. These products cards are shared across the theme and are one of the most re-usable components available.

This is the one click product preview modal that will not only reduce the shopping time but also bring a convenient experience to users. This makes browsing products easier and faster, which encourages sales.

The product form is one of the most important components of any e-commerce interface. It is the UI in which users are selecting and clicking around to customise options of the product they will ultimately be adding to their cart.

STROBE GEL

PARHELIA
€14,00*

Golden strobe gel with fine gold glitter

Glowing from within, the ZOEVA Strobe Gel "Parhelia" was designed to add incandescent beams of light to the complexion with a gold shimmering, pearlescent formula.

The unique, memory shape gel texture captures and diffuses the surrounding light, imparting a luminescent shimmer and leaving the skin with a natural, translucent finish and a light...

Golden strobe gel with fine gold glitter

Glowing from within, the ZOEVA Strobe Gel "Parhelia" was designed to add incandescent beams of light to the complexion with a gold shimmering, pearlescent formula.

The unique, memory shape gel texture captures and diffuses the surrounding light, imparting a luminescent shimmer and leaving the skin with a natural, translucent finish and a light diffused 3D effect. Melting into the skin, the moisturizing lightweight formula can be layered for varying levels of intensity – from a natural-looking, sheer glow to intense strobing highlights for dramatic evening looks.

The formulation of the gel is enriched with vitamin E and is 100% free of animal-derived ingredients. Made in Italy.

Color: PARHELIA

*Prices incl. VAT, Shipping costs apply *Prices excl. VAT, Shipping costs apply

Product images displayed in an intuitive layout to let customers see what the products look like with the support of extra functionality such as clickable thumbnails and image zoom on hover.

Product swatches are styleised options that abstract the default dropdown menus away and allow for branded selectors to the product form to enhance the user experience.

Color: PARHELIA

A snapshot of what to expect after this step of the process such as subtotal, VAT, shipping and taxes. This is also the last interface before users leave for the checkout stage.

Total

Subtotal: €0,00

Shipping: Discounts and shipping applied at the checkout

Payment methods accepted
    • American Express
    • Diners Club
    • Discover
    • JCB
    • Maestro
    • Mastercard
    • PayPal
    • Visa

Have a discount code? Add it in the next step.

A loosely coupled flex table to display and interact with items currently in the customers cart.