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

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

Primitives Colors

Indigo Blue 100 Indigo Blue 80 Indigo Blue 60 Indigo Blue 40 Indigo Blue 20 Yellow 100 Yellow 80 Yellow 60 Yellow 40 Yellow 20 Warm 100 Warm 60 Warm 40 Warm 20 White Cool 100 Cool 60 Cool 40 Cool 20 Danger Warning Success Focus

Tokens Colors

Background Background Inverse Foreground Foreground Inverse Brand 01 Brand 02 Brand 03 Brand 04 Brand 05 Brand 06 Brand 07 Brand 08 Brand 09 Brand 10 Brand 11 Link Danger Focus

Foundation Colors

Foreground Secondary Background Secondary Accent 01 Accent 02 Border 01 Border 02 Disabled Danger Yellow Grey 300 Blue White Grey 500 Grey 100 Orange Grey 200 Grey 600 Light Blue Black Grey 400

Form Controls

Inputs

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Some help text here

Controls

Selectors

Stepper

Stepper Blue

Stepper White

Stepper White Outlined

Textarea and Select

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

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

Toast Alerts

Toast alerts are used to provide feedback to users after they perform an action, such as adding a product to their cart. They appear temporarily and do not require user interaction to dismiss.

Success Alert

Tooltip

This is the tooltip content at the top
This is the tooltip content at the bottom
This is the tooltip content at the left