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!

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.

Text size

Tokens to adjust text sizing.
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl

Font weight

Tokens to adjust font weight.
font-light
font-normal
font-medium
font-semibold
font-bold
font-black

Text alignment

Tokens to adjust the alignment of your text.
text-left
text-center
text-right

Letter spacing

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

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