Base

Text elements and classes are used strictly for sizing, not styling.
Usually these elements are wrapped with a title-wrapper or a text-wrapper to have access to frequently used modifiers as combo classes.

Headings

HTML tags have matching classes for their styles. Heading levels should follow the correct hierarchy in the HTML, but styles can be overriden with classes. We recommend always using the class to make separating the tag from the style a habit. Avoid combo classes when possible.

Heading 1

HTML H1

Heading 1

font-size: 5rem; (80px)
line-height: 1.2;

Heading 2

HTML H2

Heading 2

font-size: 4rem; (64px)
line-height: 1.2;

Heading 3

HTML Heading 3

Heading 3

font-size: 3rem; (48px)
line-height: 1.2;

Heading 4

HTML Heading 4

Heading 4

font-size: 2.5rem; (40px)
line-height: 1.2;

Heading 5

HTML Heading 5

Heading 5

font-size: 2rem; (32px)
line-height: 1.2;

Heading 6

HTML Heading 6

Heading 6

font-size: 1.75rem; (28px)
line-height: 1.2;

Text

Text classes are strictly used for font-size and line-height. If you need bigger sizes, you should use heading classes. Any other styling usually comes from a parent element. Sometimes you need to override the parent element's color or font-weight, in which case you can use combo classes or spans.

text-xl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

font-size: 1.5rem; (24px)
line-height: 1.4;

text-lg

font-size: 1.25rem; (20px)
line-height: 1.4;

text-base

font-size: 1.125rem; (18px)
line-height: 1.4;

text-sm

font-size: 1rem; (16px)
line-height: 1.4;

text-xs

font-size: 0.875rem; (14px)
line-height: 1.4;

paragraph

font-size: not set (resets to base)
line-height: not set

Rich text

Other HTML tag defaults

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat

Lists:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Blockquote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat

Link inside the rich text element

In the global CSS we are removing the top margin from the first element and the bottom margin from the last element

Other

Other HTML tag defaults

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat

font-size: 1.2rem;
line-height: 1.5;

padding-top: 0.75rem;
padding-right: 0.75rem;
padding-bottom: 0.75rem;
padding-left: 1.25rem;

Links

Link

color: inherit;
(from CSS embed)
‍
Note: Avoid setting a font-size to links. Instead, add a link block and then add a text block to it.

Unordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

display: flex;
flex-direction: column;
row-gap: 0.5rem;

Ordered Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

display: flex;
flex-direction: column;
row-gap: 0.5rem;

Colors

This area is not to set specific classes, but rather a checkpoint to add your project's colors to the global swatches and describe how they're used.

Surface

Used as the main background color.

Surface 2

Used as the secondary background color, like the sidenav on this page.

Accent

Used for highlighting, CTAs, details.

Text

Base text color of the project.

Text Muted

Slightly softer text color.

Stroke

Base border color of UI elements of the project.

Card Stroke

Border color of cards, if needed.

Gradients

Having to apply gradients each time on new classes is annoying. So is having a class that takes up space just for a gradient.
That's why you can copy them from Figma into the global custom code block designated for gradients, allowing you to apply gradient backgrounds using an attribute.

For clipping text, make sure the property is background-image, not background

gradient="1"

Background clipping

gradient="2"

Background clipping

Shadows

Shadows are set in the global CSS embed block to make it easier to copy layered shadows from Figma and avoid adding an extra combo-class to your elements by assigning them to attributes.

shadow

Hero sections are often unique compared to other sections, whether because of a fixed nav or just being 100vh.
Use this class for your hero sections if needed, or remove it and make your own.

Containers

Sections usually need a container to keep layouts from becoming too wide. Containers also control the horizontal padding in order to maintain the same spacing throughout your project.
A default container acts as "12 columns", as it takes up the full design width (usually 1440px). That's why combo class names mention columns.

container

max-width: 1440px

padding-right & left: 2.5rem (40px)

Heading

container

cc-10col

max-width: 1210px (1130px+40+40)

Heading

container

cc-8col

max-width: 982px (902px+40+40)

Heading

container

cc-6col

max-width: 752px (672px+40+40)
‍

Usually used for articles.

Heading

Layout

Layouts will usually have more unique names depending on the design. In a lot of cases, there are some basic layout options that can act as building blocks.

[name]-layout

Custom Layout

What's going on here?
This is what you would mostly use. This name can either be page-specifc or of a reusable component. Try to find opportunities to make things reusable, but don't overthink it. Just try not to have page-specific names for components you are using in multiple pages.
Plan well.

grid-cols

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

grid-cols defaults to 2 even columns. You can then add modifiers for different sizes or more columns.

image-wrapper

image-wrapper is a generic base class that has overflow hidden, position relative, and width 100%. This is useful to avoid creating a new class for standard-sized images in columns. It is also aligned top to avoid stretching for the whole column (you can change that by placing it in a flex parent). Use a combo class to give it full height.
If you have images with unique sizes and positioning, create a new class for it.

image

image is set to cover by default and has combo classes to control its aspect ratio or set it to contain. You can add more or modify them. Default:
cc-1x1 cc-4x3 cc-16x9

image

cc-contain

title-wrapper

cc-sm

cc-lg

cc-xl

Heading inside a title-wrapper

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Put titles inside a div with this class to give them bottom margin. Comes with combo classes for reducing or increasing the margin, but you can also add your own.

text-wrapper

cc-max-320

cc-align-center

Some heading

All this text is in a text-wrapper which constrains width. Even this paragraph got its own text-wrapper.

General purpose class to control text max-width and alignment.

cta-wrapper

Some heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a CTA

Similar to title and text wrappers, this class controls spacing, this time from the top. Use combo classes for different sizes and alignment.

Spacer

Spacers are useful when you need some extra space in a layout but you don't want to create a new wrapper or class for it.

Spacer

Has props for height in all the breakpoints.

Utilities

Utilities have a u- prefix to separate them from base styles. They can work on their own, but usually you use them to modify a base element, like a title-wrapper.
On sections, avoid them as much as possible since you usually apply paddings on them, but background changes are fine.
Things like text alignment should be on the layout layer.

Text Color

These can be added to any element, although it's recommended to place it as high as possible according to your needs.
For example, if you want a two text blocks to have this color and they are sibling elements, you could apply it to their parent element.
If you have a lot of colored headings, it is a good idea to apply it on the element instead of the parent or in a span, to make it easier to access next time.

Font

Font utilities change the font and weight of an element.
You could replace sans & serif with other variations
(i.e. main & display).

u-font-sans

Lorem ipsum dolor sit amet.

u-font-serif

Lorem ipsum dolor sit amet.

u-font-regular

Lorem ipsum dolor sit amet.

u-font-bold

Lorem ipsum dolor sit amet.

u-font-italic

Lorem ipsum dolor sit amet.

Alignment

Use to align text in layouts, or individual text elements.

u-text-left

Lorem ipsum dolor sit amet.

u-text-center

Lorem ipsum dolor sit amet.

u-text-right

Lorem ipsum dolor sit amet.

u-text-justify

Lorem ipsum dolor sit amet.

Other

Other useful utilities.

u-hide

hidden

u-hide_tablet

it's hidden on tablet

u-hide_landscape

it's hidden on mobile landscape

u-hide_mobile

it's hidden on mobile portrait

u-align-center

margin-left: auto;
margin-right: auto;

u-opacity-50

opacity: 50%;

u-width-full

width: 100%;

u-height-full

height: 100%;

u-height-screen

height: 100vh;