Type Styles

All mapped type styles use Cliniques Helvetica Neue; secondary consumers alias back to the primary family.
fluidTypography: false
@media (min-width: 1024px) desktop overrides

Heading 4XL - Cliniques Helvetica Neue / 200

Heading 3XL - Cliniques Helvetica Neue / 200

Heading 2XL - Cliniques Helvetica Neue / 200

Heading XL - Cliniques Helvetica Neue / 200

Heading LG - Cliniques Helvetica Neue / 200

Heading MD - Cliniques Helvetica Neue / 200

Subtitle LG - Cliniques Helvetica Neue / 800

Subtitle MD - Cliniques Helvetica Neue / 200

Body XL - Cliniques Helvetica Neue / 400

Body LG - Cliniques Helvetica Neue / 400

Body MD - Cliniques Helvetica Neue / 400

Body SM - Cliniques Helvetica Neue / 400

Body XS - Cliniques Helvetica Neue / 400

Pullquote - Cliniques Helvetica Neue / 400

Product Card Title - Cliniques Helvetica Neue / 800

Product Card Description - Cliniques Helvetica Neue / 400

Product Price Small - Cliniques Helvetica Neue / 800

Product Price Sale - Cliniques Helvetica Neue / 400

Product Price Large - Cliniques Helvetica Neue / 800

Review Stars Label - Cliniques Helvetica Neue / 400

Review Stars Average Rating - Cliniques Helvetica Neue / 400

Button Small - Cliniques Helvetica Neue / 800

PDP Product Title - Cliniques Helvetica Neue / 400

PDP Product Description - Cliniques Helvetica Neue / 400

PDP Summary Title - Cliniques Helvetica Neue / 800

Nav Link - Cliniques Helvetica Neue / 600

Nav Link L2 - Cliniques Helvetica Neue / 600

Nav Link L3 - Cliniques Helvetica Neue / 400

Header Announcement Bar - Cliniques Helvetica Neue / 400

Header Link Block - Cliniques Helvetica Neue / 400

Card Group Header - Cliniques Helvetica Neue / 200

Claims Block Header - Cliniques Helvetica Neue / 200

Accordion Label - Cliniques Helvetica Neue / 800

Icon Button Text - Cliniques Helvetica Neue / 400

Icon Text - Cliniques Helvetica Neue / 400

Legal - Cliniques Helvetica Neue / 400

Body XL Strong - Cliniques Helvetica Neue / 800

Body XL Italic - Cliniques Helvetica Neue / 400 / italic

Body LG Strong - Cliniques Helvetica Neue / 800

Body LG Italic - Cliniques Helvetica Neue / 400 / italic

Body MD Strong - Cliniques Helvetica Neue / 800

Body MD Italic - Cliniques Helvetica Neue / 400 / italic

Body SM Strong - Cliniques Helvetica Neue / 800

Body SM Italic - Cliniques Helvetica Neue / 400 / italic

Body XS Strong - Cliniques Helvetica Neue / 800

Body XS Italic - Cliniques Helvetica Neue / 400 / italic

Tailwind Colors

#1a1a1a
rgba(26, 26, 26, 1)

--color-foreground

#ffffff
rgba(255, 255, 255, 1)

--color-foreground-inverse

#666666
rgba(102, 102, 102, 1)

--color-foreground-secondary

#cccccc
rgba(204, 204, 204, 1)

--color-foreground-secondary-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-background

#000000
rgba(0, 0, 0, 1)

--color-background-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-background-secondary

#666666
rgba(102, 102, 102, 1)

--color-background-secondary-inverse

#666666
rgba(102, 102, 102, 1)

--color-border-01

#cccccc
rgba(204, 204, 204, 1)

--color-border-01-inverse

#e6e6e6
rgba(230, 230, 230, 1)

--color-border-02

#999999
rgba(153, 153, 153, 1)

--color-border-02-inverse

#e6e6e6
rgba(230, 230, 230, 1)

--color-border-secondary

#cccccc
rgba(204, 204, 204, 1)

--color-border-secondary-inverse

#1a1a1a
rgba(26, 26, 26, 1)

--color-link

#ffffff
rgba(255, 255, 255, 1)

--color-link-inverse

#cccccc
rgba(204, 204, 204, 1)

--color-disabled

#666666
rgba(102, 102, 102, 1)

--color-disabled-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-focus

#dd0000
rgba(221, 0, 0, 1)

--color-danger

#dd0000
rgba(221, 0, 0, 1)

--color-danger-inverse

#00000033
rgba(0, 0, 0, 0.2)

--color-overlay

#ffffff33
rgba(255, 255, 255, 0.2)

--color-overlay-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-accent-01

#adddb7
rgba(173, 221, 183, 1)

--color-accent-01-inverse

#583186
rgba(88, 49, 134, 1)

--color-accent-02

#583186
rgba(88, 49, 134, 1)

--color-accent-02-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-background-tertiary

#1a1a1a
rgba(26, 26, 26, 1)

--color-background-tertiary-inverse

#ba0000
rgba(186, 0, 0, 1)

--color-sale-price

#ba0000
rgba(186, 0, 0, 1)

--color-sale-price-inverse

#ffffff00
rgba(255, 255, 255, 0)

--color-accordion-border

#ffffff00
rgba(255, 255, 255, 0)

--color-accordion-border-inverse

#ffffff00
rgba(255, 255, 255, 0)

--color-accordion-border-active

#ffffff00
rgba(255, 255, 255, 0)

--color-accordion-border-active-inverse

transparent

--color-badge-border

transparent

--color-badge-border-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-badge-background

#adddb7
rgba(173, 221, 183, 1)

--color-badge-background-inverse

#1a1a1a
rgba(26, 26, 26, 1)

--color-badge-text

#000000
rgba(0, 0, 0, 1)

--color-badge-text-inverse

#000000
rgba(0, 0, 0, 1)

--color-badge-secondary-background

#ffffff
rgba(255, 255, 255, 1)

--color-badge-secondary-background-inverse

#000000
rgba(0, 0, 0, 1)

--color-badge-secondary-border

#ffffff
rgba(255, 255, 255, 1)

--color-badge-secondary-border-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-badge-secondary-text

#000000
rgba(0, 0, 0, 1)

--color-badge-secondary-text-inverse

#1a1a1a
rgba(26, 26, 26, 1)

--color-icon-primary

#ffffff
rgba(255, 255, 255, 1)

--color-icon-primary-inverse

#666666
rgba(102, 102, 102, 1)

--color-icon-secondary

#cccccc
rgba(204, 204, 204, 1)

--color-icon-secondary-inverse

#ffffff00
rgba(255, 255, 255, 0)

--color-product-card-background

#ffffff00
rgba(255, 255, 255, 0)

--color-product-card-background-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-product-media-gallery-image-background

#fafafa
rgba(250, 250, 250, 1)

--color-product-media-gallery-image-background-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background-gradient-1

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background-gradient-1-inverse

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background-gradient-2

#fafafa
rgba(250, 250, 250, 1)

--color-product-card-image-background-gradient-2-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-minicart-threeshold-goal-accent

#adddb7
rgba(173, 221, 183, 1)

--color-minicart-threeshold-goal-accent-inverse

#e6e6e6
rgba(230, 230, 230, 1)

--color-minicart-threeshold-goal-background-accent

#666666
rgba(102, 102, 102, 1)

--color-minicart-threeshold-goal-background-accent-inverse

#1a1a1a
rgba(26, 26, 26, 1)

--color-forms-text

#ffffff
rgba(255, 255, 255, 1)

--color-forms-text-inverse

#cccccc
rgba(204, 204, 204, 1)

--color-forms-text-disabled

#666666
rgba(102, 102, 102, 1)

--color-forms-text-disabled-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-forms-background

#666666
rgba(102, 102, 102, 1)

--color-forms-background-inverse

transparent

--color-forms-background-disabled

transparent

--color-forms-background-disabled-inverse

#666666
rgba(102, 102, 102, 1)

--color-forms-border

#999999
rgba(153, 153, 153, 1)

--color-forms-border-inverse

#1a1a1a
rgba(26, 26, 26, 1)

--color-forms-border-hover

#cccccc
rgba(204, 204, 204, 1)

--color-forms-border-hover-inverse

#cccccc
rgba(204, 204, 204, 1)

--color-forms-border-disabled

#666666
rgba(102, 102, 102, 1)

--color-forms-border-disabled-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-positive

#adddb7
rgba(173, 221, 183, 1)

--color-positive-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-positive-on

#ffffff
rgba(255, 255, 255, 1)

--color-positive-on-inverse

#e6f1ec
rgba(230, 241, 236, 1)

--color-positive-container

#adddb7
rgba(173, 221, 183, 1)

--color-positive-container-inverse

#065d36
rgba(6, 93, 54, 1)

--color-positive-on-container

#ffffff
rgba(255, 255, 255, 1)

--color-positive-on-container-inverse

#dd0000
rgba(221, 0, 0, 1)

--color-critical

#dd0000
rgba(221, 0, 0, 1)

--color-critical-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-critical-on

#ffffff
rgba(255, 255, 255, 1)

--color-critical-on-inverse

#fdf2f2
rgba(253, 242, 242, 1)

--color-critical-container

#dd0000
rgba(221, 0, 0, 1)

--color-critical-container-inverse

#dd0000
rgba(221, 0, 0, 1)

--color-critical-on-container

#ffffff
rgba(255, 255, 255, 1)

--color-critical-on-container-inverse

#583186
rgba(88, 49, 134, 1)

--color-info

#583186
rgba(88, 49, 134, 1)

--color-info-inverse

#ffffff
rgba(255, 255, 255, 1)

--color-info-on

#ffffff
rgba(255, 255, 255, 1)

--color-info-on-inverse

#faf1fb
rgba(250, 241, 251, 1)

--color-info-container

#583186
rgba(88, 49, 134, 1)

--color-info-container-inverse

#583186
rgba(88, 49, 134, 1)

--color-info-on-container

#ffffff
rgba(255, 255, 255, 1)

--color-info-on-container-inverse

#adddb7
rgba(173, 221, 183, 1)

--color-green

#ffdd00
rgba(255, 221, 0, 1)

--color-yellow

#583186
rgba(88, 49, 134, 1)

--color-blue

#ea5800
rgba(234, 88, 0, 1)

--color-orange

#faf1fb
rgba(250, 241, 251, 1)

--color-light-blue

#ffffff
rgba(255, 255, 255, 1)

--color-white

#000000
rgba(0, 0, 0, 1)

--color-black

#fafafa
rgba(250, 250, 250, 1)

--color-grey-100

#e6e6e6
rgba(230, 230, 230, 1)

--color-grey-200

#cccccc
rgba(204, 204, 204, 1)

--color-grey-300

#999999
rgba(153, 153, 153, 1)

--color-grey-400

#666666
rgba(102, 102, 102, 1)

--color-grey-500

#1a1a1a
rgba(26, 26, 26, 1)

--color-grey-600

#cddbc3
rgba(205, 219, 195, 1)

--color-loyalty-tier-1

#ae9dc8
rgba(174, 157, 200, 1)

--color-loyalty-tier-2

#f5d16f
rgba(245, 209, 111, 1)

--color-loyalty-tier-3

#cddbc3
rgba(205, 219, 195, 1)

--color-loyalty-tier-1-inverse

#ae9dc8
rgba(174, 157, 200, 1)

--color-loyalty-tier-2-inverse

#f5d16f
rgba(245, 209, 111, 1)

--color-loyalty-tier-3-inverse

var(--color-foreground)

--color-product-card-product-title

var(--color-foreground-inverse)

--color-product-card-product-title-inverse

var(--color-foreground-secondary)

--color-product-card-short-description

var(--color-foreground-secondary-inverse)

--color-product-card-short-description-inverse

Fluid Utility

We use fluid scaling for utility classes, meaning we don’t need to specify exact breakpoints. Instead, we define sizes for desktop & mobile and use relative units for the other values to allow the styles to scale seamlessly without much work.

Following are the utilities are available available:

fluid-text-[mobile|desktop]
fluid-line-height-[mobile|desktop]
fluid-gap-[mobile|desktop]
fluid-pl-[mobile|desktop]
fluid-pr-[mobile|desktop]
fluid-pb-[mobile|desktop]
fluid-pt-[mobile|desktop]
fluid-ml-[mobile|desktop]
fluid-mr-[mobile|desktop]
fluid-mb-[mobile|desktop]
fluid-mt-[mobile|desktop]
fluid-inset-[mobile|desktop]
fluid-top-[mobile|desktop]
fluid-right-[mobile|desktop]
fluid-bottom-[mobile|desktop]
fluid-left-[mobile|desktop]
fluid-size-[mobile|desktop]

Note: Replace mobile with Mobile Pixel Size Base and desktop with Desktop Size base

Examples:

Fluid, 12|16

Fluid, 30|70

fluid-size-[200|400]

Buttons

Spacing

Figma Space/* tokens. Mobile / desktop pairs from manifest. All fluid via min(max(...)) regardless of fluidTypography.

Space/3XS · 4px

Space/2XS · 8px

Space/XS · 12px

Space/SM · 16px

Space/MD · 24/32px

Space/LG · 36/40px

Space/XL · 48/56px

Space/2XL · 64/80px

Space/3XL · 80/120px

Border Radius

Figma Border Radius/* tokens.

Border Radius/None · 0

Border Radius/SM · 16px

Border Radius/MD · 24px

Border Radius/LG · 36px

Border Radius/Rounded · 1000px

Colors

Figma scheme entries from colorSchemes.default. Tailwind CSS variable names in parentheses; the *-inverse counterparts are applied automatically by the active color scheme.

Semantic — Default

Text (--color-foreground) Text Secondary (--color-foreground-secondary) Background (--color-background) Background Secondary (--color-background-secondary) Border (--color-border-01) Border Secondary (--color-border-02) Link (--color-link) Disabled (--color-disabled) Focus (--color-focus)

Status

Critical/Critical (--color-danger) Positive/Positive (--color-positive) Info/Info (--color-info) Info/Container (--color-info-container)

Accent & Tertiary (judgment-based — not in scheme)

Accent 01 (--color-accent-01) Accent 02 (--color-accent-02) Background Tertiary (--color-background-tertiary)

Utility

Yellow (--color-yellow) Orange (--color-orange) White (--color-white · Pure White) Black (--color-black · Pure Black)

Grey scale (light → dark)

Grey 100 (--color-grey-100) Grey 200 (--color-grey-200) Grey 300 (--color-grey-300) Grey 400 (--color-grey-400) Grey 500 (--color-grey-500) Grey 600 (--color-grey-600)

Form Controls

First Name

Some help text here

First Name

This field is required

First Name

Message

Provide a message

Message

Select a country

Please select a country

Switch

Some help text

Switch

Some help text

Switch

Some help text

Switch

Some help text

Radio

Some help text

Radio

Some help text

This is a custom Select field

Alerts

Inline (outline)

Default (filled)

Inline (outline), heading only

Default (filled), heading only

Default, no heading (cart notice)

Inverse, disable-close (samples panel)

Swiper Carousels

Slide1

Slide2

Slide3

Slide4

Slide5

Product Cards

Acne Solutions™ Clarifying Lotion, 200.0 ml, Product Shot

6.7 fl oz

Acne Solutions™ Clarifying Lotion

Medicated liquid exfoliator for acne-prone skin instantly helps reduce excess oil and shine.

$23.00

Acne Solutions™ Clinical Clearing Gel, 30.0 ml, Product Shot

Top rated

.5 fl oz

1 fl oz

Acne Solutions™ Clinical Clearing Gel

Prescription-strength topical acne treatment gel helps clear breakouts.

$34.00

Blackhead Solutions 7 Day Deep Pore Cleanse & Scrub, 125.0 ml, Product Shot

Blackhead Solutions 7 Day Deep Pore Cleanse & Scrub

4.2 fl oz

Blackhead Solutions 7 Day Deep Pore Cleanse & Scrub

3-In-1 cleanser-scrub-mask helps deep-clean skin to improve the look of blackheads.

$31.00

Icons

Dialogs / Modals

Dynamic Product Card

Tabs component

Typically, this component would be rendered dynamically as part of section blocks, or something similiar, and the attributes could all be controlled dynamically. For the sake of the styleguide, I've hardcoded three tabs.

content for tab 1

Icons

Every symbol in the sprite at icon-lg; brand builds swap the artwork, the names stay.

icon-account
icon-alert-error
icon-alert-info
icon-alert-success
icon-arrow
icon-arrow-down
icon-arrow-left
icon-arrow-up
icon-asterisk
icon-calendar
icon-caret
icon-cart
icon-cart-empty
icon-chat-bubble
icon-checkmark
icon-chevron
icon-chevron-left
icon-chevron-up
icon-circle-check
icon-close
icon-credit-card
icon-critical
icon-discount
icon-ellipsis
icon-empty-check
icon-envelope
icon-error
icon-facebook
icon-filters
icon-fullscreen
icon-fullscreen-exit
icon-ghs01
icon-ghs02
icon-ghs03
icon-ghs04
icon-ghs05
icon-ghs06
icon-ghs07
icon-ghs08
icon-ghs09
icon-gift
icon-globe
icon-hamburger
icon-instagram
icon-loyalty
icon-menu-arrow
icon-minus
icon-mute
icon-pause
icon-phone
icon-play
icon-plus
icon-radio-circle
icon-remove
icon-reset
icon-search
icon-select-arrow
icon-shipping
icon-shopping-bag
icon-star-empty
icon-star-filled
icon-star-half
icon-storefront
icon-subtitles
icon-success
icon-thumbs-down
icon-thumbs-up
icon-tooltip
icon-twitter
icon-unmute
icon-zoom

Type Styles

Tailwind Colors

Fluid Utility

Examples:

Buttons

Spacing

Border Radius

Colors

Semantic — Default

Status

Accent & Tertiary (judgment-based — not in scheme)

Utility

Grey scale (light → dark)

Form Controls

Alerts

Swiper Carousels

Product Cards

Acne Solutions™ Clarifying Lotion

Acne Solutions™ Clinical Clearing Gel

Blackhead Solutions 7 Day Deep Pore Cleanse & Scrub

Icons

Dialogs / Modals

Inner modal

Dynamic Product Card

Tabs component

Icons

Market Debug