Creator UI is a set of guidelines and strategies to help you build Webstudio websites.
Global Tokens
Tokens used to control repeated elements globally (This is required as we don't yet have components and we can't expect a user to (eg:) update ever single button manually just because their client changed the shade of blue.
Headings
Defined and flexible type tokens we can use on all or most pages.
heading-1
I'm an extra extra large heading.
heading-2
I'm an extra large heading.
heading-3
I'm a large heading.
heading-4
I'm a medium heading.
heading-5
I'm a small heading.
heading-6
I'm an extra small heading.
Links
Defined and flexible type tokens we can use on all or most pages.
btn
Primary Button
btn
btn-sm
Primary Small
btn
btn-lg
Primary Large
btn-s
Secondary Button
btn-s
btn-sm
Secondary Small
btn-s
btn-lg
Secondary Large
btn-o
Outline Button
btn-s
btn-sm
Outline Small
btn-s
btn-lg
Outline Large
link
Simple Link
Utility Tokens
Each token controls a single style. Combine tokens to achieve desired results.
Text Tokens
Defined and flexible type tokens we can use on all or most pages.
text-2xl
This text is extra extra large.
text-xl
This text is extra large.
text-lg
This text is large.
text-base
This is the base text size of your project.
text-sm
This text is small.
text-xs
This text is extra small.
Font Weight
Defined and flexible type tokens we can use on all or most pages.
font-black
This font is black.
font-bold
This font is bold.
font-semibold
This font is semi-bold.
font-medium
This font is medium.
font-normal
This is your normal font weight.
font-light
This font is light.
Text Alignment
Defined and flexible type tokens we can use on all or most pages.
text-left
This text is aligned to the left.
text-center
This text is centered.
text-right
This text is aligned to the right.
Letter Spacing
Defined and flexible type tokens we can use on all or most pages.
tracking-tighter
Letter Spacing
tracking-tight
Letter Spacing
tracking-normal
Letter Spacing
tracking-wide
Letter Spacing
tracking-wider
Letter Spacing
tracking-widest
Letter Spacing
Line Height
Defined and flexible type tokens we can use on all or most pages.
leading-none
Letter Spacing
leading-tight
Letter Spacing
leading-snug
Letter Spacing
leading-normal
Letter Spacing
leading-relaxed
Letter Spacing
leading-loose
Letter Spacing
Padding & Margin Direction
Defined and flexible type tokens we can use on all or most pages.
pb
mb
pt
mt
pl
ml
pr
mr
py
my
px
mx
Padding & Margin Sizes
Lorem ipsum
p-0
m-0
p-1
m-1
p-2
m-2
p-3
m-3
p-4
m-4
p-5
m-5
p-6
m-6
mx-auto
Primary Colors
Defined and flexible type tokens we can use on all or most pages.
p-50
p-100
p-200
p-300
p-400
p-500
p-600
p-700
p-800
p-900
p-950
Neutral Colors
Defined and flexible type tokens we can use on all or most pages.
n-50
n-100
n-200
n-300
n-400
n-500
n-600
n-700
n-800
n-900
n-950
Border Direction
Defined and flexible type tokens we can use on all or most pages.
border
border-t
border-b
border-l
border-r
border-x
border-y
Border Size
Defined and flexible type tokens we can use on all or most pages.
border-0
border
border-2
border-4
border-8
Border Radius
Defined and flexible type tokens we can use on all or most pages.