Style Guide

Foundations

Color Typography

Components

Links Buttons Checkboxes Radio buttons Inputs Badges Tags Social credit badges Messages Accordions Breadcrumbs Product card Circle icon with text

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.

Heading with highlight

Why you'll love Melissa

The OG Jelly

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

Links

Link

Link with arrow

Link with animated underline Link with reverse animated underline

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

Label

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

Label

Code examples and helpers


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

Inputs

Label

Code examples and helpers


                {%- render 'input', type: 'text', name: 'Styleguide-1', label: '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 -%}

Social credit badges

instagram.handle

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

Accordion item 1

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

Accordion item 2

Code examples and helpers


                {%- render 'accordion-item', title: 'Accordion item 1', content: 'Lorem ipsum dolor sit amet' -%}

Breadcrumbs

Home •
Collection name •
Product name

Code examples and helpers


                {%- render 'breadcrumbs' -%}

Product card

Favorite

Possession in Clear

Melissa

Possession in Clear Possession

4.8

Rated 4.8 out of 5 stars

552

$69.00

Available in 25 colors

Code examples and helpers


                {%- render 'product-block', product: product -%}

Circle icon with text

About Melissa

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

Action button

Sale

Acqua in Red

Shop Baby collection Baby

Sold Out

Mini Melissa + Disney

Acqua in Red Acqua

5.0

Rated 5.0 out of 5 stars

$59.00$41.30

Available in 3 colors

Sale

Acqua in Pink

Shop Baby collection Baby

Sold Out

Mini Melissa + Disney

Acqua in Pink Acqua

5.0

Rated 5.0 out of 5 stars

$59.00$41.30

Available in 3 colors

Sale

Acqua in Black

Shop Baby collection Baby

Sold Out

Mini Melissa + Disney

Acqua in Black Acqua

5.0

Rated 5.0 out of 5 stars

$59.00$41.30

Available in 3 colors

Sale

Adore in Clear Green/Green

Melissa

Adore in Clear Green/Green Adore

5.0

Rated 5.0 out of 5 stars

$79.00$31.60

Available in 3 colors

Sale

Adore in Pink/Orange

Melissa

Adore in Pink/Orange Adore

5.0

Rated 5.0 out of 5 stars

$79.00$31.60

Available in 3 colors

Sale

Adore in Clear Brown/Black

Melissa

Adore in Clear Brown/Black Adore

4.0

Rated 4.0 out of 5 stars

$79.00$31.60

Available in 3 colors

Sale

Airbubble Flip Flop in White/Clear

Melissa

Airbubble Flip Flop in White/Clear Airbubble Flip Flop

3.6

Rated 3.6 out of 5 stars

$65.00$26.00

Available in 6 colors

Sale

Airbubble Flip Flop in Black

Sold Out

Melissa

Airbubble Flip Flop in Black Airbubble Flip Flop

3.6

Rated 3.6 out of 5 stars

$65.00$26.00

Available in 6 colors

Sale

Airbubble Flip Flop in Orange

Melissa

Airbubble Flip Flop in Orange Airbubble Flip Flop

3.6

Rated 3.6 out of 5 stars

$65.00$26.00

Available in 6 colors

Action button