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

Body-2

Caption

Utility

Utility 2

Utility 3

Pullquote

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

Colors

Primitives Beige / Brand 04 / #ECDFCB Primitives Green / brand-05 / #515A4A Primitive Light / #E1E3E3 Primitive Lightest / #FFFFFF Primitives Neutral / #D0CECC Primitive Dark / #7E8593 Primitive Darkest / #000000 Foreground / Brand 06 / #1A3E33 Brand Primary / Brand 01 / #969D81 Brand Primary Contrast / Primitives Light Beige / Background Secondary / Brand 02 / #F6F5F1 Brand Secondary / Brand 03 / #FFC72D Brand/Brand Secondary: Contrast / #ECDEDA Background Disabled / #A5A7A8 Success / #25B900 Error / #EC0000 Focus / #0038FF

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

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

Accordion component

Pagination component