Tu carrito
Breakpoints
Colors
--dark__brand_
brand-1
brand-2
brand-3
brand-4
brand-5
primary
secondary
tertiary
--dark__button_link_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--dark__button_primary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--dark__button_secondary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--dark__button_tertiary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--dark__grey_
00
02
03
05
07
10
20
30
40
50
60
70
80
90
93
95
97
98
--dark__mask_
cover
gradient-1
gradient-2
--dark__state_
error
error-bg
success
success-bg
warning
warning-bg
--dark__text_
accent
dark-grey
disabled
grey
light-grey
sale
text
text-invert
--dark__ui_
background
background-1
background-2
background-footer
black
element
element-invert
form
transparent
white
--light__brand_
brand-1
brand-2
brand-3
brand-4
brand-5
primary
secondary
tertiary
--light__button_link_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--light__button_primary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--light__button_secondary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--light__button_tertiary_
background
background-hover
border
border-hover
focus-ring
icon
icon-hover
label
label-hover
line
line-hover
--light__grey_
00
02
03
05
07
10
20
30
40
50
60
70
80
90
93
95
97
98
--light__mask_
cover
gradient-1
gradient-2
--light__state_
error
error-bg
success
success-bg
warning
warning-bg
--light__text_
accent
dark-grey
disabled
grey
light-grey
sale
text
text-invert
--light__ui_
background
background-1
background-2
background-footer
black
element
element-invert
form
transparent
white
Typography
overline
Overline 3
.overline-3 or %overline-3
Overline 2
.overline-2 or %overline-2
Overline 1
.overline-1 or %overline-1
display
Display 1
.display-1 or %display-1
Display 2
.display-2 or %display-2
Display 3
.display-3 or %display-3
Display 4
.display-4 or %display-4
Display 5
.display-5 or %display-5
Display 6
.display-6 or %display-6
heading
Heading h1
.heading-h1 or %heading-h1
Heading h2
.heading-h2 or %heading-h2
Heading h3
.heading-h3 or %heading-h3
Heading h4
.heading-h4 or %heading-h4
Heading h5
.heading-h5 or %heading-h5
Heading h6
.heading-h6 or %heading-h6
paragraph
Paragraph 3xl
.paragraph-3xl or %paragraph-3xl
Paragraph 2xl
.paragraph-2xl or %paragraph-2xl
Paragraph xl
.paragraph-xl or %paragraph-xl
Paragraph l
.paragraph-l or %paragraph-l
Paragraph m
.paragraph-m or %paragraph-m
Paragraph s
.paragraph-s or %paragraph-s
Paragraph xs
.paragraph-xs or %paragraph-xs
Paragraph 2xs
.paragraph-2xs or %paragraph-2xs
Paragraph 3xs
.paragraph-3xs or %paragraph-3xs
text
Text 3xl
.text-3xl or %text-3xl
Text 2xl
.text-2xl or %text-2xl
Text xl
.text-xl or %text-xl
Text l
.text-l or %text-l
Text m
.text-m or %text-m
Text s
.text-s or %text-s
Text xs
.text-xs or %text-xs
Text 2xs
.text-2xs or %text-2xs
Text 3xs
.text-3xs or %text-3xs
caption
Caption 3
.caption-3 or %caption-3
Caption 2
.caption-2 or %caption-2
Caption 1
.caption-1 or %caption-1
quote
Quote 3
.quote-3 or %quote-3
Quote 2
.quote-2 or %quote-2
Quote 1
.quote-1 or %quote-1
button
Button xl
.button-xl or %button-xl
Button l
.button-l or %button-l
Button s
.button-s or %button-s
Button m
.button-m or %button-m
Button link
.button-link or %button-link
form
Form label
.form-label or %form-label
Form input
.form-input or %form-input
Form desc
.form-desc or %form-desc
nav
Nav level 1
.nav-level-1 or %nav-level-1
Nav level 2
.nav-level-2 or %nav-level-2
Nav level 3
.nav-level-3 or %nav-level-3
Nav level 3 emphasis
.nav-level-3-emphasis or %nav-level-3-emphasis
Nav title
.nav-title or %nav-title
Nav service
.nav-service or %nav-service
ui
Ui annotation
.ui-annotation or %ui-annotation
custom
Custom product name
.custom-product-name or %custom-product-name
Buttons
.btn-light .btn-primary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-light .btn-secondary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-light .btn-tertiary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-light .btn-link[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-dark .btn-primary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-dark .btn-secondary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-dark .btn-tertiary[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
.btn-dark .btn-link[normal][hover][focus][pressed][disabled].btn-xl.btn-l.btn-m.btn-s
Text groups
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
overline
Headline
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
Button
Form
Optional form field text. Please enter a valid input
Optional form field text. Please enter a valid input
Optional form field text. Please enter a valid input
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
Optional form field text. Please enter a valid input
Optional form field text. Please enter a valid input
Optional form field text. Please enter a valid input
Optional form field text. Please enter a valid input
Spacings
--page-margin --page-gutter
Elements
Accordions
Accordion (minimal)
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis ullam sed iste odio quibusdam illum animi harum possimus, commodi sit, aspernatur pariatur consequuntur reiciendis. Sit, distinctio. Reiciendis, laboriosam placeat!
Accordion S
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis ullam sed iste odio quibusdam illum animi harum possimus, commodi sit, aspernatur pariatur consequuntur reiciendis. Sit, distinctio. Reiciendis, laboriosam placeat!
Accordion M
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis ullam sed iste odio quibusdam illum animi harum possimus, commodi sit, aspernatur pariatur consequuntur reiciendis. Sit, distinctio. Reiciendis, laboriosam placeat!
Accordion L
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis ullam sed iste odio quibusdam illum animi harum possimus, commodi sit, aspernatur pariatur consequuntur reiciendis. Sit, distinctio. Reiciendis, laboriosam placeat!
Accordion XL
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi, nobis ullam sed iste odio quibusdam illum animi harum possimus, commodi sit, aspernatur pariatur consequuntur reiciendis. Sit, distinctio. Reiciendis, laboriosam placeat!
Modal
modal drawer left
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident beatae ullam aut, cum minima hic minus. Consectetur nam voluptatem maiores corporis aliquid similique laudantium hic tempore quibusdam, eum deserunt perferendis.
modal drawer right
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident beatae ullam aut, cum minima hic minus. Consectetur nam voluptatem maiores corporis aliquid similique laudantium hic tempore quibusdam, eum deserunt perferendis.
modal m
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident beatae ullam aut, cum minima hic minus. Consectetur nam voluptatem maiores corporis aliquid similique laudantium hic tempore quibusdam, eum deserunt perferendis.
modal l
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident beatae ullam aut, cum minima hic minus. Consectetur nam voluptatem maiores corporis aliquid similique laudantium hic tempore quibusdam, eum deserunt perferendis.
modal full
Modal title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident beatae ullam aut, cum minima hic minus. Consectetur nam voluptatem maiores corporis aliquid similique laudantium hic tempore quibusdam, eum deserunt perferendis.

Gracias por suscribirte