Welcome

Welcome to the Creator UI Style Guide.

This style guide comes with some extra utilities to help bridge functionality not yet part of the builder itself. These include CSS Grid, Fluid Responsive and some body classes.

To get started with using this guide, simply copy the Page Wrapper from the left navigator and paste it into your project.

Once pasted, remove your old breakpoints and you're ready to start building!
Primary CTA

Page structure

Page structure and body tokens for consistency across your project.
Body
Section
Container

Headings

Tokens to style any text based component as a heading.
heading-1

I'm an extra extra large heading.

heading-2

I'm an extra extra large heading.

heading-3

I'm an extra extra large heading.

heading-4

I'm an extra extra large heading.

heading-5
I'm an extra extra large heading.
heading-6
I'm an extra extra large heading.

Buttons

Tokens to style anything as a button. These work for box, link and button components.
btn
btn-sm
Primary Small
btn-s
btn-sm
Outline Small
btn-o
btn-sm
Primary Small
btn
Primary
btn-s
Outline
btn-o
Primary
btn
btn-lg
Primary Large
btn-s
btn-lg
Outline Large
btn-s
btn-lg
Primary Large
link
Simple Link

Text size

Tokens to adjust text sizing.
text-xs
The text you can edit
text-sm
The text you can edit
text-base
The text you can edit
text-lg
The text you can edit
text-xl
The text you can edit
text-2xl
The text you can edit

Font weight

Tokens to adjust font weight.
font-light
The text you can edit
font-normal
The text you can edit
font-medium
The text you can edit
font-semibold
The text you can edit
font-bold
The text you can edit
font-black
The text you can edit

Text alignment

Tokens to adjust the alignment of your text.
text-left
The text you can edit
text-center
The text you can edit
text-right
The text you can edit

Letter spacing

Tokens to adjust the spacing between letters of your text.
tracking-tighter
The text you can edit
tracking-tight
The text you can edit
tracking-normal
The text you can edit
tracking-wide
The text you can edit
tracking-wider
The text you can edit
tracking-widest
The text you can edit

Line height

Tokens to adjust the spacing/height between each line of your text.
leading-none
The text you
can edit
leading-tight
The text you
can edit
leading-snug
The text you
can edit
leading-normal
The text you
can edit
leading-relaxed
The text you
can edit
leading-lose
The text you
can edit

Colors

Tokens to style with color. Each color comes with a border, background and font token.
p-50
p-100
p-200
p-300
p-400
p-500
p-600
p-700
p-800
p-900
p-950
n-50
n-100
n-200
n-300
n-400
n-500
n-600
n-700
n-800
n-900
n-950

Border radius

Tokens to adjust the border radius.
rounded-none
rounded-sm
rounded
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full