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 1 (italic)

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body (regular)

Body light

Body bold (medium)

Body Small (regular)

Body Small light

Body Small bold (medium)

Caption

Utility

Blockquote - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

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

CTA snippet

Spacing

2xs xs sm md lg xl 2xl 3xl

Border Radius

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

Colors

Utilities

Utility/_Focus Utility/_Error Utility/_Success Utility/_Overlay

Checkout

Checkout/_Buttons Checkout/_Accent Checkout/_Form BG Checkout/_Order Summary BG

Primitives

Primitives/_Brand-04 Primitives/_Neutral Primitives/_Brand-01 Primitives/_White Primitives/_Dark Primitives/_Darker Primitives/_Lightest Primitives/_Brand-02 Primitives/_Light Primitives/_Darkest Primitives/_Brand-03 Primitives/_Black Primitives/_Brand-05

Tokens

Tokens/Brand Primary Tokens/Brand Primary Contrast Tokens/Brand Secondary Tokens/Brand Secondary Contrast Tokens/Foreground Tokens/Foreground Secondary Tokens/Background Tokens/Background Secondary Tokens/Border Tokens/Border-01 Tokens/Border-02 Tokens/Disabled Tokens/Link Tokens/Link Hover

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

A man in a light pink Psycho Bunny Men's Bryce Performance Tee (B6U490F200), made from a Modal-Pima cotton blend in Peru, stands against a white background. He has short curly hair and a neutral expression. The tee features a small embroidered logo on the left chest. A confident man with short curly hair wears the light pink Psycho Bunny MENS BRYCE PERFORMANCE TEE (B6U490F200), crafted from a luxurious Modal-Pima cotton blend with a small embroidered logo, against a plain white background.
Quick view

Mens bryce performance tee

Prix habituel $60.00
A man in a light pink Psycho Bunny Men's Bryce Performance Tee (B6U490F200), made from a Modal-Pima cotton blend in Peru, stands against a white background. He has short curly hair and a neutral expression. The tee features a small embroidered logo on the left chest. A confident man with short curly hair wears the light pink Psycho Bunny MENS BRYCE PERFORMANCE TEE (B6U490F200), crafted from a luxurious Modal-Pima cotton blend with a small embroidered logo, against a plain white background.
Limited
Quick view

[sean test 1]

Prix habituel $60.00
A bearded man confidently stands against a plain background, wearing the Psycho Bunny BIG AND TALL ALEXANDER HOODIE - B9H154E200. This eye-catching black pullover hoodie features a striking bunny and crossbones design on the front. Complemented by matching black pants, it offers a stylish choice perfect for big and tall individuals. The BIG AND TALL ALEXANDER HOODIE - B9H154E200 by Psycho Bunny is a comfortable black pullover featuring a prominently centered stylized bunny logo with crossed bones on the chest. Designed for a big and tall fit, it includes a spacious front pocket and adjustable drawstrings.
Quick view

Chandail à capuchon grandes tailles alexander

Prix habituel $100.00
50% OFF
A man wearing the BIG AND TALL CLASSIC CREW NECK TEE by Psycho Bunny in light blue, made from 100% Pima cotton, stands against a nature-inspired mural of trees. With short hair and a beard, he gazes downward calmly, hands in pockets. A bearded man with short hair wears a light blue Psycho Bunny BIG AND TALL CLASSIC CREW NECK TEE (B9U014Z1PC) made of 100% Pima cotton, featuring a small embroidered logo on the left chest. He faces forward against a plain light background, paired with beige pants for a timeless look.
Quick view

Homme t-shirt classique col rond grandes tailles

Prix habituel $70.00

Icons

Success Checkmark Checkbox Tick Error

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