Text Color
text-primary
#000000
text-secondary
#383736
text-faint
#6a6157
text-disabled
#6a6157
text-mute
#73695e
text-inverse
#e5dfd8
text-accent-1
#541515
text-critical
#f70d1a
text-success
#000000
text-warning
#000000
text-info
#000000
Background Color
background-default
#f3ede6
background-light
#f8f6f3
background-dark
#e1d7cd
background-inverse
#090404
background-accent-1
#541515
background-accent-2
#e5dfd8
background-accent-3
#ffffff
background-critical
#f3ede6
background-success
#f3ede6
background-warning
#f3ede6
background-info
#f3ede6
Border Color
border-divider-primary
#988b80
border-divider-accent-1
#794b4b
border-gray-200
#e1d7cd
border-divider-inverse
#988b80
border-focus
#794b4b
border-input-default
#f4f4f4
border-input-selected
#988b80
border-input-entered
#333333
border-input-critical
#f70d1a
border-input-success
#0b8036
border-input-warning
#a16207
border-input-info
#1847cc
Icon Color
icon-primary
#541515
icon-secondary
#000000
icon-disabled
#988b80
icon-inverse
#f8f6f3
icon-accent-1
#73695e
icon-critical
#f70d1a
icon-success
#0b8036
icon-warning
#541515
icon-info
#541515
| Class | Display | Token | Size | Line-height | Letter spacing | Weight |
|---|---|---|---|---|---|---|
headline-1
|
Headline |
text-6xl
|
60px | 60px | 0 | 700 |
headline-2
|
Headline |
text-5xl
|
48px | 54px | 0 | 700 |
headline-3
|
Headline |
text-4xl
|
36px | 42px | 0 | 700 |
headline-4
|
Headline |
text-3xl
|
30px | 36px | 0 | 700 |
headline-5
|
Headline |
text-2xl
|
24px | 32px | 0 | 700 |
headline-6
|
Headline |
text-xl
|
20px | 28px | 0 | 700 |
headline-7
|
Headline |
text-lg
|
18px | 24px | 0 | 700 |
body-large
|
Paragraph |
text-base
|
16px | 24px | 0 | 400 |
body-large
emphasis
|
Paragraph |
text-base
|
16px | 24px | 0 | 600 |
body-core
|
Paragraph |
text-xs md:text-sm
|
14px | 20px | 0 | 400 |
body-core
emphasis
|
Paragraph |
text-xs md:text-sm
|
14px | 20px | 0 | 600 |
body-small
|
Paragraph |
text-xxs
|
10px | 16px | 0 | 400 |
body-small
emphasis
|
Paragraph |
text-xxs
|
10px | 16px | 0 | 600 |
link-core
|
text-xs md:text-sm
|
14px | 20px | 0 | 400 | |
link-core
emphasis
|
text-xs md:text-sm
|
13px | 18px | 0 | 400 |
| Default | Dark | Disabled | With Icon | With Loading | Classes |
|---|---|---|---|---|---|
button-primary button-small
|
|||||
button-primary button-medium
|
|||||
button-primary button-large
|
|||||
button-secondary button-small
|
|||||
button-secondary button-medium
|
|||||
button-secondary button-large
|
|||||
button-inverse button-small
|
|||||
button-inverse button-medium
|
|||||
button-inverse button-large
|
|||||
button-secondary-inverse button-small
|
|||||
button-secondary-inverse button-medium
|
|||||
button-secondary-inverse button-large
|
|||||
button-plain |
| Element | Default | Error | Disabled | Classes |
|---|---|---|---|---|
Input
|
|
|
|
core-input
|
Textarea
|
|
|
|
core-textarea
|
Dropdown
|
|
|
|
core-dropdown
|
Validation
|
|
|||
| Type | Example |
|---|---|
Page Numbers
|
|
Next Page
|
Modal
| Type | Example | Usage |
|---|---|---|
Slideout Bottom
|
Heading slideoutLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
drawer-content
custom-drawer
|
Slideout Right
|
Heading slideoutLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
drawer-content
custom-drawer
|
Modal Dialog
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
modal-content
|
Accordion
| Type | Default | Usage |
|---|---|---|
Basic
|
|
accordion-custom
|
| Element | Off | On | Disabled Off | Disabled On | Classes |
|---|---|---|---|---|---|
Checkbox
|
|
|
|
|
core-checkbox
|
Radio
|
|
|
|
|
core-radio
|
Toggle
|
|
|
|
|
core-toggle
|
Notification
| Type | Default | Usage |
|---|---|---|
Info
|
Translation missing: en.toast.info.default Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Success
|
Translation missing: en.toast.success.default Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Error
|
Translation missing: en.toast.error.default Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Warning
|
Translation missing: en.toast.warning.default Augue pellentesque est diam aliquet. Odio et amet aliquam. |
core-toast
|
Info
|
Information Toast |
core-toast
|
Success
|
Success Toast |
core-toast
|
Error
|
Error Toast |
core-toast
|
Warning
|
Warning Toast |
core-toast
|
Loader
| Type | Default | Class |
|---|---|---|
Spinner
|
|
.loading-spinner
|
Spinner Dark
|
|
.dark .loading-spinner
|
| Ratio | Example | Classes |
|---|---|---|
Auto
|
Auto
|
aspect-auto
|
2:3 (Taller)
|
Taller
|
aspect-taller
|
4:5 (Tall)
|
Tall
|
aspect-tall
|
1:1 (Square)
|
Square
|
aspect-square
|
4:3 (Social)
|
|
aspect-social
|
2:1 (Video)
|
Video
|
aspect-video
|
4:1 (Banner)
|
|
aspect-banner
|
Tab List
| Tab List Border (Default) | Tab List No Border |
|---|---|
|
Content 1 Content 2 Content 3 |
Content 1 Content 2 Content 3 |
Quantity input
| Type | Default | Usage |
|---|---|---|
Quantity input
|
|
quantity-selector
|
Quantity input
|
|
quantity-selector
|
Breadcrumb
| Type | Default | Usage |
|---|---|---|
Slash
|
breadcrumbs
|
Badge
| Theme Type | Default | Usage |
|---|---|---|
No Icon
|
Badge
|
badges
|
Carousel
| Type | Default | Usage |
|---|---|---|
Core Carousel
|
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
|
core-carousel
|
Product Carousel
|
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
|
product-carousel
|
Product Media
|
Product media carousel implementation
|
_product-media
|
| Icon | Token Name | ||
|---|---|---|
closer
|
plus
|
minus
|
account
|
search
|
wishlist
|
cart
|
hamburger
|
loyalty
|
loyalty-2
|
map-pin
|
map-trifold
|
bell
|
close
|
error
|
success
|
warning
|
info
|
chevron-down
|
chevron-up
|
arrow-right
|
arrow-left
|
check
|
facebook
|
facebook-square
|
instagram
|
youtube
|
tiktok
|
twitter
|
star
|
truck
|
gift
|
cow
|
headset
|
tag
|
coin
|
user-wishlist
|
bookmark
|
share
|
link-outline
|
phone
|
envelope
|