Join Melissa Rewards and get Free Shipping on every order

Just Launched: Melissa x Marc Jacobs | Shop Now

Join Melissa Rewards and get Free Shipping on every order

Your Cart is Empty

Color

Brand

Brand primary
#623B5E
Brand secondary
#ECDDEB
Brand tertiary
#C18EBC

Text

Text primary
#000000
Text secondary
#535353
Text tertiary
#666666

State

Critical
#DF7666
Critical light
#D99A9E
Success
#7DB084
Success light
#CFDFCE
Code examples and helpers var(--color-brand-primary)
var(--color-brand-secondary)
var(--color-brand-tertiary)

var(--color-text-primary)
var(--color-text-secondary)
var(--color-brand-tertiary)

var(--color-critical)
var(--color-critical-light)
var(--color-success)
var(--color-success-light)
.text--primary
.text--secondary
.text--tertiary

Typography

Type scale

Heading x large

Used for: hero text, H1 for homepage and PLP

48px / 40px
HK Nova
Heading large

Used for: section headings

30px / 27px
HK Nova
Page heading

Used for: page headings

22px / 20px
HK Nova
Page subheading · Page subheading heavy

Used for: items of secondary importance (accordion menus, review titles, product card titles)

16px / 14px
HK Nova
Body large · Body large heavy

Used for: body copy

16px / 14px
HK Nova
Body regular · Body regular heavy

Used for: body copy

14px / 14px
HK Nova
Body small · Body small heavy

Used for: supplemental body copy

12px / 12px
HK Nova

Paragraphs and rich text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium assumenda atque ex fugit porro quasi repudiandae tempora. Ad amet autem consectetur distinctio eius fuga id laudantium magnam magni mollitia officia, porro quasi quis rem tempore unde vel. A ab accusantium aliquid, consectetur consequuntur debitis deleniti dolore eum, exercitationem fuga illum modi nostrum porro provident quam quos ratione reiciendis vero voluptas!

  • Nemo enim ipsam voluptatem quia voluptas sit aspernatur.
  • Aut odit aut fugit, sed quia consequuntur magni dolores.
  • Eos qui ratione voluptatem sequi nesciunt.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Code examples and helpers <h1 class="heading">Page heading</h1>
<h2 class="heading heading--large">Section heading</h2>
<h2 class="heading heading--x-large">Extra large heading</h2>
<div class="subheading">Subheading</div>
<div class="subheading subheading--heavy">Subheading heavy</div>
<div class="text">Body text</div>
<div class="text text--large">Large body text</div>
<div class="text text--small">Small body text</div>
<div class="text text--x-small">Extra body text</div>
<div class="text text--uppercase">Uppercase text</div>
<div class="text text--center">Centered text</div>
<div class="text text--start">Left-aligned text</div>
<div class="text text--end">Right-aligned text</div>

Components

Code examples and helpers <a href="#" class="link link--text">Link</a>
<a href="#" class="link link--uppercase link--arrow">Link with arrow</a>
<a href="#" class="link">Link with animated underline</a>
<a href="#" class="link link--underline">Link with reverse animated underline</a>

Buttons

Code examples and helpers <button type="button" class="button">Primary button</button>
<button type="button" class="button button--secondary">Secondary button</button>
<button type="button" class="button button--secondary button--fullwidth">Fullwidth secondary button</button>

Checkboxes

Code examples and helpers {%- render 'checkbox', name: 'address[default]' -%}
{%- render 'checkbox', name: 'filter.v.option.color', value: 'Black', label: 'Black' -%}
{%- render 'checkbox', name: 'customer[accepts_marketing]', label: 'Accept marketing', required: true, checked: true -%}

Radio buttons

Code examples and helpers {%- render 'checkbox', type: 'radio', name: 'Interests', value: 'Adults', label: 'Adults' -%}

Inputs

Code examples and helpers {%- render 'input', type: 'text', name: 'Styleguide-1', label: 'Label' -%}
Code examples and helpers {%- render 'select', name: 'select', options: options, label: 'Label', required: true -%}

Badges

Sale
Online Exclusive
New
Collab
Favorite
Code examples and helpers {%- render 'product-badge', type: 'sale', is_static: false -%}
{%- render 'product-badge', type: 'online_exclusive', is_static: true -%}
{%- render 'product-badge', type: 'new', is_static: true -%}
{%- render 'product-badge', type: 'collab', is_static: true -%}
{%- render 'product-badge', type: 'favorite', is_static: true -%}

Tags

💎 Limited Edition
Coming Soon
Sold Out
The original jelly
Extra 25% off w/ code SANDALS25
Code examples and helpers <a href="#" class="tag tag--uppercase tag--adult">Adult</a>

Social credit badges

Code examples and helpers {%- render 'social-credit-badge', content: social_credit_title, background_color: section.settings[social_credit_background_color_setting], text_color: section.settings[social_credit_text_color_setting], margin_desktop: section.settings[social_credit_margin_desktop_setting], margin_mobile: section.settings[social_credit_margin_mobile_setting] -%}

Messages

Final Sale - No returns or exchanges
Success message
Error message
Code examples and helpers <div class="product-message product-message--success">Success message</div>
<div class="product-message product-message--error">Error message</div>

Accordions

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
Code examples and helpers {%- render 'accordion-item', title: 'Accordion item 1', content: 'Lorem ipsum dolor sit amet' -%}

Code examples and helpers {%- render 'breadcrumbs' -%}

Product card

Favorite

Melissa

Possession in Clear
4.8
Rated 4.8 out of 5 stars
419
$69.00
Code examples and helpers {%- render 'product-block', product: product -%}

Circle icon with text

Code examples and helpers {%- render 'circle-icon-with-text', image: block.settings.image, title: block.settings.title, link: block.settings.link -%}

Scroll slider section heading

Sale

Melissa

Adore in Clear Green/Green
5.0
Rated 5.0 out of 5 stars
3
$79.00$31.60
Sale

Melissa

Adore in Pink/Orange
5.0
Rated 5.0 out of 5 stars
2
$79.00$31.60
Sale

Melissa

Adore in Clear Brown/Black
4.0
Rated 4.0 out of 5 stars
9
$79.00$31.60
Sale

Melissa

Airbubble Flip Flop in White/Clear
3.8
Rated 3.8 out of 5 stars
6
$65.00$26.00
Sale

Melissa

Airbubble Platform in Lilac
4.5
Rated 4.5 out of 5 stars
25
$109.00$65.40
Sale

Melissa

Airbubble Platform in Black
4.5
Rated 4.5 out of 5 stars
25
$109.00$65.40
Sale

Melissa

Airbubble Platform in Pink
4.5
Rated 4.5 out of 5 stars
25
$109.00$65.40
Sale

Melissa

Airbubble Slide in Black/Clear
5.0
Rated 5.0 out of 5 stars
8
$69.00$48.30
Sale

Melissa

Airbubble Slide in White/Clear
5.0
Rated 5.0 out of 5 stars
8
$69.00$48.30
Sale

Unavailable

Sold Out