Colors

Base colors

Primary black [primary-black] (#000000)
Primary white [primary-white] (#FFFFFF)
Base subtle [base-subtle] (#F8F8F8)
Base Strong [base-strong] (#EDEDED)

Accents colors

Accent Red Mid [accent-red-mid] (#C76686;)
Accent Red Standard [accent-red-standard] (#F980A8)
Accent Red Subtle [accent-red-subtle] (#FEE6EE)
Accent Red Strong [accent-red-strong] (#D50057)
Accent Blue Mid [accent-blue-mid] (#66B4DF;)
Accent Blue Standard [accent-blue-standard] (#87C7E3)
Accent Blue Subtle [accent-blue-subtle] (#E7F4F9)
Accent Blue Strong [accent-blue-strong] (#0082CA)
Accent Green Mid [accent-green-mid] (#66CBB7;)
Accent Green Standard [accent-green-standard] (#59DBC2)
Accent Green Subtle [accent-green-subtle] (#DEF8F3)
Accent Green Strong [accent-green-strong] (#00A887;)

Gray colors

Gray 50 [gray-50] (#DDD)
Gray 60 [gray-60] (#C6C6C6)
Gray 70 [gray-70] (#A9A9A9)
Gray 80 [gray-80] (#8D8D8D)
Gray 90 [gray-90] (#545454)
Gray [gray] (#464646)

Black colors

Black 70 [gray-70] (#383838)
Black 80 [gray-80] (#2A2A2A)
Black 90 [gray-90] (#1C1C1C)

Utility colors

Utility error (#DD1D1D)
Utility success (#18E098)
Utility warning (#FB8F2B)

Typography

Heading XLarge - 50px/44px (mob: 30px/26px)

Heading Large - 78px/72px (mob: 42px/48px)

Heading 1 - 34px/36px (mob: 26px/28px)

Heading 2 - 28px/32px (mob: 22px/20px)

Heading 3 - 22px/28px (mob: 18px/22px)

Heading 4 - 16px/20px (mob: 13px/16px)

Heading 5 - 16px/24px (mob: 11px/12px)

Heading 6 - 11px/12px (mob: 11px/12px)

Paragraphs

Paragraph (Extra Large 16px/24px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed volutpat consequat libero. Aenean finibus, mi sed eleifend ornare, eros lectus viverra odio, eget bibendum felis enim eu metus. Suspendisse nunc metus, auctor et orci feugiat, pharetra auctor ligula. Maecenas ac lectus eget purus volutpat dapibus.

Paragraph (Large 16px/24px)

Paragraph (Medium 15px/22px)

Paragraph (Regular 15px/22px)

Paragraph (Small 14px/24px)

Paragraph (Minor 13px/20px)

Primary buttons

Primary Red buttons

Primary Blue buttons

Primary Green buttons

Primary Lavender buttons

Primary Violet buttons

Secondary buttons

Secondary Red buttons

Secondary Blue buttons

Secondary Green buttons

Secondary Violet buttons

Secondary Lavender buttons

ATB buttons

Quick add buttons

Media buttons

Play large button

Play medium button

Play small button
Pause large button

Pause medium button

Pause small button

Label

Base dropdown

Disabled dropdown

Dropdown with error

Base dropdown with label

Base dropdown

Disabled dropdown with label

Disabled dropdown

Error dropdown with label

Error dropdown

Label

Label disabled

Label

Standart counter Large counter

render: 'product-label', label: 'label title'

label title

Colors

Base colors

Accents colors

Gray colors

Black colors

Utility colors

Typography

Heading XLarge - 50px/44px (mob: 30px/26px)

Heading Large - 78px/72px (mob: 42px/48px)

Heading 1 - 34px/36px (mob: 26px/28px)

Heading 2 - 28px/32px (mob: 22px/20px)

Heading 3 - 22px/28px (mob: 18px/22px)

Heading 4 - 16px/20px (mob: 13px/16px)

Heading 5 - 16px/24px (mob: 11px/12px)

Heading 6 - 11px/12px (mob: 11px/12px)

Paragraphs

Paragraph (Extra Large 16px/24px)

Paragraph (Large 16px/24px)

Paragraph (Medium 15px/22px)

Paragraph (Regular 15px/22px)

Paragraph (Small 14px/24px)

Paragraph (Minor 13px/20px)

Links

Link

Link (Large 16px/24px)

Link (Small 13px/20px)

Link (Minor 10px/16px)

Link Italic (Regular 15px/22px)

Link Italic (Large 16px/24px)

Link italic (Small 13px/20px)

Link Italic (Minor 10px/16px)

Primary buttons

Secondary buttons

ATB buttons

Quick add buttons

Media buttons

Icons