Type Styles

We use fluid scaling for typography, 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. With this in mind, it’s important to ensure line-height and letter-spacing are set in percentage (%) values, not pixels.

Display 2xl

Display xl

Display lg

Display md

Display sm
Display xs

Body 3xl

Body 2xl

Body xl

Body lg

Body md

Body sm

Body xs

Body

Caption

Utility

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

2xs xs sm md lg xl 2xl 3xl

Border Radius

rounded-sm rounded-md rounded-lg rounded-rounded

Background Colors

Bg Primary Bg Secondary Bg Tertiary Bg Quaternary Bg Overlay Bg Brand Primary Bg Brand Dark Bg Brand Light Bg Error Bg Warning Bg Success

Text Colors

Text Primary Text Secondary Text Tertiary Text Brand Primary Text Brand Secondary Text Brand Tertiary Text Secondary on Brand Text Tertiary on Brand Text Error Text Sale Text Warning Text Success Text Plain Text White Text Placeholder

Foreground Colors

Fg Brand Primary Fg Brand Secondary

Border Colors

Border Brand Primary Border Brand Solid Border Focus Element Border Error

Form Controls

Some help text here
This field is required
Provide a message
This field is required
Select a country
Please select a country

Switch

Switch

Some help text

Switch

Some help text
This is a custom Select field
This is a custom Select field

Swiper Carousels

Slide1 Slide2 Slide3 Slide4 Slide5

Product Cards

from
Liquid error (snippets/component-price line 185): comparison of String with 1999 failed
from
Liquid error (snippets/component-price line 185): comparison of String with 1999 failed
from
Liquid error (snippets/component-price line 185): comparison of String with 1999 failed

Icons

Reviews

component-reviews.liquid:
Liquid error (sections/component-styleguide line 515): Could not find asset snippets/component-reviews.liquid Liquid error (sections/component-styleguide line 516): Could not find asset snippets/component-reviews.liquid Liquid error (sections/component-styleguide line 517): Could not find asset snippets/component-reviews.liquid Liquid error (sections/component-styleguide line 518): Could not find asset snippets/component-reviews.liquid Liquid error (sections/component-styleguide line 519): Could not find asset snippets/component-reviews.liquid
component-review-stars.js:

Dialogs / Modals

Inner modal

Free Sample Card

Dynamic Product Card

Section Injection with Live Params

Enter something to search for

Accordions

Price

Price component to be used on Product Cards and PDP

PDP

With discount

Sale price From €19.99 Regular price €29.99

Without discount

Liquid error (snippets/component-price line 185): comparison of String with 1999 failed

Product Card

With discount

Sale price From €19.99 Regular price €29.99

Without discount

Liquid error (snippets/component-price line 185): comparison of String with 1999 failed

Tooltips

Arrow is hidden

Arrow is visible

Content is hidden

Chips

Chips display information in a clearly framed button-like shape. Filter chips are one of the most common types, which are used to communicate each applied filter to a product list. The Chip Buttons have three different states. Hover, Focus and Active. The icon is optional.

Badges

Badges help highlight important information, such as notifications or new and unread messages. They’re primarily used for communicating secondary or additional information to text.

Gray
Gray Solid
Blue
Blue Solid
Red
Red Solid
Yellow
Yellow Solid
Green
Green Solid
Luxury
40% OFF
Completed
Extra 15% off with code 15MORE

Tabs

Tabs organize similar content together into individual sections in the same page.

size: xl

Specifications Measuring Shipping Installing Tab 5

This is the product Specifications.

This is the product Measuring.

This is the product Shipping.

  • Weight: 1kg
  • Material: Cotton

Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page.

size: lg

Specifications Measuring Shipping Installing Tab 5

This is the product Specifications.

This is the product Measuring.

This is the product Shipping.

  • Weight: 1kg
  • Material: Cotton

Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page.

size: md

Specifications Measuring Shipping Installing Tab 5

This is the product Specifications.

This is the product Measuring.

This is the product Shipping.

  • Weight: 1kg
  • Material: Cotton

Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page.

size: sm

Specifications Measuring Shipping Installing Tab 5

This is the product Specifications.

This is the product Measuring.

This is the product Shipping.

  • Weight: 1kg
  • Material: Cotton

Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page.

size: sm, active index: 3

Specifications Measuring Shipping Installing Tab 5

This is the product Specifications.

This is the product Measuring.

This is the product Shipping.

  • Weight: 1kg
  • Material: Cotton

Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page. Tabs organize similar content together into individual sections in the same page.

Radio Button

Radio buttons allow users to select just one option from a set.

FREE

$49.99

Input Fields

Input fields allow users to enter text into a UI. They typically appear in forms and dialogs. Input fields on mobiles should be at least 16px text size to avoid auto zoom on mobile browsers.

Text Input Field

Buttons

Buttons communicate actions that users can take. Default size buttons should be used for a majority of use cases. Buttons can both hug button text or fill container width depending on the layout.

Anchor Tag Button

Checkboxes

Checkboxes allow users to select multiple options from a set, and they can be used to turn a singular option on or off.

$9.95

FREE

Checkbox Button Tiles

Checkbox button tiles are a great way to make checkboxes more interesting, or to add more information to the user’s options without adding clutter. When options are explicitly separated into cards, it’s obvious which elements belong to which group and easier to quickly distinguish between options.

Swatches Group

Product filters