Shop

HuroMe Shop

Support

Inspiration

Experience

hurome

Hurom Partnership

Gray

--color-gray-000
#ffffff
--color-gray-003
#f8f8f8
--color-gray-005
#f4f4f4
--color-gray-009
#ebebeb
--color-gray-012
#e4e4e3
--color-gray-016
#dbdbda
--color-gray-024
#c9c9c8
--color-gray-032
#b8b7b5
--color-gray-044
#9d9c9a
--color-gray-052
#8b8a87
--color-gray-064
#706f6c
--color-gray-068
#676663
--color-gray-076
#565450
--color-gray-096
#292722
--color-gray-100
#201e19

Beige

--color-beige-020
#f9f7f5
--color-beige-040
#f5f3f0
--color-beige-100
#efece6

Green

--color-green-004
#f5fbf7
--color-green-005
#f5fcf7
--color-green-008
#ebf8ef
--color-green-024
#ebf8f0
--color-green-080
#62c886
--color-green-100
#00a63b
--color-green-116
#36a15b
--color-green-150
#004123

Plum

--color-plum-004
#fcf9ff
--color-plum-005
#fbfafe
--color-plum-008
#f8f4ff
--color-plum-024
#f6f2fc
--color-plum-080
#b595e4
--color-plum-100
#ac71ff
--color-plum-116
#8e6cbe
--color-plum-150
#411e73

Carrot

--color-carrot-004
#fef9f5
--color-carrot-005
#fef9f3
--color-carrot-008
#fdf3eb
--color-carrot-024
#fef3e6
--color-carrot-080
#f69d39
--color-carrot-100
#e36f00
--color-carrot-116
#d2750b
--color-carrot-150
#b95500

Red

--color-red-100
#e50000

Heading

Sample Text
Class : typo-inter-heading-1
Variable : --typo-inter-heading-1
Sample Text
Class : typo-inter-heading-2
Variable : --typo-inter-heading-2
Sample Text
Class : typo-inter-heading-3
Variable : --typo-inter-heading-3
Sample Text
Class : typo-inter-heading-4
Variable : --typo-inter-heading-4

Title

Sample Text
Class : typo-inter-title-1
Variable : --typo-inter-title-1
Sample Text
Class : typo-inter-title-2
Variable : --typo-inter-title-2
Sample Text
Class : typo-inter-title-3
Variable : --typo-inter-title-3

Info

Sample Text
Class : typo-inter-info-1
Variable : --typo-inter-info-1
Sample Text
Class : typo-inter-info-2
Variable : --typo-inter-info-2
Sample Text
Class : typo-inter-info-3
Variable : --typo-inter-info-3

Paragraph

Sample Text
Class : typo-inter-para-1
Variable : --typo-inter-para-1
Sample Text
Class : typo-inter-para-2
Variable : --typo-inter-para-2
Sample Text
Class : typo-inter-para-3
Variable : --typo-inter-para-3

Captions & Mini

Sample Text
Class : typo-inter-caption-1
Variable : --typo-inter-caption-1
Sample Text
Class : typo-inter-caption-2
Variable : --typo-inter-caption-2
Sample Text
Class : typo-inter-mini
Variable : --typo-inter-mini

360

add

back

bag-dark

bag

bottom

brains-dark

brains

cancle

care-dark

care

chatbot-dark

chatbot

check

clear-dark

clear

contact-dark

contact

detox-dark

detox

diet-dark

diet

digestion-dark

digestion

document-dark

document

down

download

faq-dark

faq

fillter

forward

fruit-dark

fruit

hopper-dark

hopper

immunity-dark

immunity

info-dark

info

left

morning-dark

morning

mypage-dark

mypage

parts-dark

parts

paused

play

protein-dark

protein

recovery-dark

recovery

refresh

remove

right

search

star-dark

star

store-dark

top

touch-dark

touch

up

vitality-dark

vitality

vitamins-dark

vitamins

warranty-dark

warranty

Button Types - Solid

Button Types - Outline

Button Sizes

Button with Icon

Input - filled


          <div class="common-input-wrap">
            <input class="common-input" id="product-search" placeholder="Placeholder" />
            <button class="common-input-search">
              {% render 'icon', icon: 'search', size: 20, color: 'var(--color-gray-076)' %}
            </button>
            <button class="common-input-clear typo-inter-caption-1 hidden">Clear</button>
          </div>

Input - Outline


          <div class="common-input-wrap">
            <input class="common-input border" id="product-search" placeholder="Placeholder" />
            <button class="common-input-search">
              {% render 'icon', icon: 'search', size: 20, color: 'var(--color-gray-076)' %}
            </button>
            <button class="common-input-clear typo-inter-caption-1 hidden">Clear</button>
          </div>