Typography

Headings

Heading levels should follow the correct hierarchy, but styles can be overridden with classes. For example, use h3 to style a Heading 1 element if it is too large for the design.

Heading 1
h1

HTML H1

Heading h1

Text h1
Heading 2
h2

HTML H2

Heading h2

Text h2
Heading 3
h3

HTML H3

Heading h3

Text h3
Heading 4
h4

HTML H4

Heading h4

Text h4
Heading 5
h5
HTML H5
Heading h5
Text h5
Heading 6
h6
HTML H6
Heading h6
Text h6

Text

text-3xl

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

text-2xl

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

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.

text-lg

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.

text-base
font-size: 1rem
line-height: 1.5
(same as body by default)

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.

text-sm

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.

text-xs

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.

text-2xs

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.

Paragraph
font-size: not set
line-height: not set

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.

Body
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

Unordered Lists
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Ordered Lists
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list-type=""
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list
spaced list items
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
list-icon
/
list-icon="spark"
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
list-item_image-icon
use a combo class to change the background-image for the bullets
  • Lorem ipsum dolor sit amet
  • 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.
  • Lorem ipsum
Unordered Lists
list-none / list-h
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
list-custom
Unordered Lists
list-custom
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
  • Sed posuere consectetur est at lobortis.
Ordered Lists
list-custom
  1. Sed posuere consectetur est at lobortis.
  2. Sed posuere consectetur est at lobortis.
  3. Sed posuere consectetur est at lobortis.
list-custom
cc-p-0
Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.
Sed posuere consectetur est at lobortis.

Other Typography Elements

Other default typography elements with modified styles.

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.
Links
Text Link
Text in Link Block
Superscript
Subscript

S2 version Framework version Title

S2 version Framework version Title

Lorem ipsumTM dolor sit amet, consectetur adipiscing elit. Suspendissevarius enim in eros elementum tristique. Duis cursus, mi quis viverraornare, eros dolorinterdum nulla.

code-block
<h3>Code Block Demo</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
<p>Lorem ipsum eget dolor aenean massa.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>

Presets

Colors

Main colors under the "Colors" variable group. Go to the variables panel to see all.

brand
(500)
brand-alt
(500)
accent
(500)

Palettes

The base of a color is usually "500". Use a generator to easily get color variations.

Brand
light
base
deep
subtle
50
100
200
300
400
500
600
700
800
900
950
Brand Alt
300
base
700
subtle
50
100
200
300
400
500
600
700
800
900
950
Accent
300
base
700
subtle
50
100
200
300
400
500
600
700
800
900
950
Neutral
300
base
700
subtle
surface
surface-muted
surface-alt
surface-alt-muted
white (Palette)
black (Palette)
50
100
200
300
400
500
600
700
800
900
950

Gradients

You can setup gradient attributes in custom styles inside Global-Code for time-saving and advanced gradients. Use background-image for property if you want the gradient to work on clipping text as well.

gradient
Background clipping
gradient="1"
Background clipping
gradient="1"
Background clipping
gradient="3"
Background clipping

Shadows

The shadow attributes are set up in the custom styles inside Global-Code by using shadow generators or codes from Figma.

shadow
xs
sm
lg
xl

Structure

Sections

Use the section class with its combo classes for all your sections to maintain consistency.

section

Heading

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.

section
cc-top-0

Heading

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.

section
cc-bottom-0

Heading

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.

section
cc-top-sm

Heading

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.

section
cc-bottom-sm

Heading

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.

section
cc-top-bottom-sm

Heading

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.

section
cc-top-lg

Heading

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.

section
cc-bottom-lg

Heading

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.

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.

container

Heading

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.

container
cc-10col

Heading

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.

container
cc-8col

Heading

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.

container
cc-6col

Heading

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.

container
cc-full

Heading

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.

Layouts

Heading and Paragraph elements are typically wrapped with title-wrapper or text-wrapper to access combo classes for styling.

title-wrapper
Heading inside a title-wrapper cc-xl
Heading inside a title-wrapper cc-lg
Heading inside a title-wrapper
Heading inside a title-wrapper cc-sm
Heading inside a title-wrapper cc-xs
Heading inside a title-wrapper cc-2xs
Heading inside a title-wrapper cc-0
title-wrapper
cc-align-center

This is a centered heading.

Another heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
cc-max-40rem
cc-max-20rem

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Some heading

This paragraph is wrapped by a text-wrapper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-wrapper
cc-align-center

This paragraph is wrapped by a text-wrapper and centered.

cta-wrapper

Some heading

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

Action button
image-wrapper
image
cc-1x1 / cc-4x3 / cc16x9
image
image
image
image-wrapper
image
cc-contain
image

Columns

A few simple setups of column layout structures.

flex-cols
col
cc-in-flex
cols-layout
col
cc-aside-col
col
cc-main-col
cols-layout
cc-vflex-at-md
col
cc-2col
grid-cols
col

Heading

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

grid-cols
cc-3col
col
cc-p-0
grid-cols
cc-h
note: -h for horizontal

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
enter height values in properties for different breakpoints

Utilities

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.

Text Colors Utilities

u-text-base
Lorem ipsum dolor sit amet.
u-text-mu
Lorem ipsum dolor sit amet.
u-text-brand
Lorem ipsum dolor sit amet.
u-text-stroke
Lorem ipsum dolor sit amet.

Font Utilities

Font utilities change the font and weight of an element.

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 Utilities

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.

Other Text Utilities

Other utilities for quick text styling.

u-text-underline
Lorem ipsum dolor sit amet.
u-text-strike
Lorem ipsum dolor sit amet.
u-text-uppercase
Lorem ipsum dolor sit amet.
u-text-lowercase
Lorem ipsum dolor sit amet.
u-text-capitalize
Lorem ipsum dolor sit amet.
u-text-nowrap
Lorem ipsum dolor sit amet
text-overflow="ellipsis"
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.
line-clamp
line-clamp="3"
more about truncating
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.
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.

Flexbox and Grid Utilities

Visit this page for utilities designed for flexbox and grid layouts.

Flexbox & Grid Layout Utilities

Background Utilities

u-bg-brand
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

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

Lorem ipsum
This is some text inside of a div block.
u-bg-surface
Lorem ipsum dolor sit amet.
u-bg-light
the "light" mode styles will always be applied
This one is special.
bg="light"
similar to u-bg-light but as an attribute
This one is special.
u-bg-dark
the "dark" mode styles will always be applied
This one is special.
bg="dark"
similar to u-bg-dark but as an attribute
This one is special.
u-bg-pattern
Text on pattern.

Other Utilities

Some other useful utilities.

u-hide
u-hide_md
u-hide_sm
u-hide_xs
u-align-center
u-height-100vh
u-height-100dvh
u-height-100svh