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

Links

Inline Link Contrast Inline Link Contrast
Inline Link Reverse Inline Link Contrast

Spacing

2xs xs sm md lg xl 2xl 3xl

Border Radius

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

Colors

Brand Colors
Brand Primary Brand Secondary Brand Primary Contrast Brand Secondary Contrast Brand Tertiary Brand Quaternary
Accent Colors
Golden Yellow Slate Green Forest Green Glacier Blue Silk Blue Deep teal Lavender Deep Purple Persian Red Deep Red Cheery Red Pale Yellow Wine Red
Neutral Colors
Foreground Foreground Secondary Border Quaternary Border Primary Border Secondary Border Quinary Border Tertiary Brand Primary Contrast
Utility
Success Error Focus

Form Controls

Text Input

Some help text here

This field is required

Select Input

Select a country

Please select a country

Custom Select

This is a custom Select field

Please select a country

Text Area Input

Provide a message

This field is required

Radio
(N/A)
Checkbox
(N/A)

Swiper Carousels

Slide1 Slide2 Slide3 Slide4 Slide5

Product Cards

ACANA Adult Large Breed Nourriture sèche pour chiens adultes de grande race ACANA Adult Large Breed Nourriture sèche pour chiens adultes de grande race

Non classé

ACANA Adult Large Breed Nourriture sèche pour chiens adultes de grande race

11.4 kg

ACANA Premium Chunks Recette de Canard dans un bouillon d'os Nourriture humide pour chiens ACANA Premium Chunks Recette de Canard dans un bouillon d'os Nourriture humide pour chiens

ACANA Premium Chunks Recette de Canard dans un bouillon d'os Nourriture humide pour chiens

12.8 oz

ACANA Recette de galettes de Poulet en liberté Nourriture pour chiens lyophilisée sans grains, 14-oz ACANA Recette de galettes de Poulet en liberté Nourriture pour chiens lyophilisée sans grains, 14-oz

Non classé

ACANA Recette de galettes de Poulet en liberté Nourriture pour chiens lyophilisée sans grains, 14-oz

14.0 oz

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