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.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body

Caption

Utility

S h o p   N o w

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

3xs 2xs xs sm md lg xl 2xl 3xl None

Negative Margins

Negative margins are useful for overlapping elements or pulling content outside containers. Below are examples to ensure all negative margin utilities are generated.

Note: Negative margin utilities (-mx-*, -my-*, -m-*, -mt-*, -mr-*, -mb-*, -ml-*) and positive margin utilities for 2xl and 3xl tokens (mx-2xl, my-2xl, m-2xl, mt-2xl, mr-2xl, mb-2xl, ml-2xl, mx-3xl, my-3xl, m-3xl, mt-3xl, mr-3xl, mb-3xl, ml-3xl) are included above in a hidden div to ensure they are generated during the build process. These are used throughout the theme for spacing and effects like logo overlaps and content positioning.

Border Radius

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

Colors

Foreground Foreground Inverse Foreground Secondary Background Background Inverse Background Secondary Background Secondary Inverse Border 01 Border 02 Disabled Accent 01 Accent 02 Focus Danger White Black Grey 200 Grey 400 Grey 600 Medium Grey Light Grey

Form Controls

Some help text here

This field is required

Provide a message

Select a country

Please select a country

This is a custom Select field

This is a custom Select field

Swiper Carousels

Slide1 Slide2 Slide3 Slide4 Slide5

Product Cards
Regular price Regular price -
Regular price Regular price -
Regular price Regular price -

Icons

Dialogs / Modals

Inner modal

Dynamic Product Card

Section Injection with Live Params

Enter something to search for

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