Set color swatches to be "global," so that if you edit them in one place, they update across your whole site wherever they appear. It's like symbols, but for color.
N1 #0000
N2 #1a1a1a
N3 #3f3f3f
N4 #808080
N5 #bebebe
N6 #e6e6e6
N7 #f1f1f1
N8 #ffffff
C{R-P} Colored Background
CR #e53917
CO #f28518
CY #f2ce18
CG #29a63e
CC #21d9d9
CB #175ce5
CPP #5c17e5
CP #d94cd9
L{R-P} Lightly Colored Background
LR #ffe5e5
LO #fff2e5
LY #ffffe5
LG #e5ffe5
LC #e5fffd
LB #e6f2ff
LPP #e9e5ff
LP #fff0ff
02
Text Colors
T{1-8} Neutral Colored Text
T1 Pure Black
T2 Light Black
T3 Dark Grey
T4 Pure Grey
T5 Light Grey*
T6 Dark White
T7 Light White
T8 Pure White
T{R-P} Solid Colored Text
Type TB1-8 & TC1-8 to change the color of your text the combo class panel of your toolbar. e.g. Typing [ TC4 ] will change your text color to - Green Text
TR Red
TO Orange
TY Yellow
TG Green
TC Cyan
TB Blue
TP Purple
TP Pink
03
Displays
DL Size: 92px
Display LG
Mobile Size: 54px
Display LG
DM Size: 78px
Display MD
Mobile Size: 44px
Display MD
DS Size: 66px
Think of Displays like 'fancy' headers. If you don't want to stick to the standard H1-6 headings, Displays make great variants. This is useful if you want headers that are larger than average or if you want to use a secondary font.
Display SM
Mobile Size: 36px
Display SM
04
Headings
H1 Size: 54px
Think of headings as content guides — anyone should be able to understand the way you’ve organized your content by glancing at your headings. So make sure your headings are clear and descriptive.
Heading 1
H2 Size: 44px
Heading 2
H3 Size: 36px
Heading 3
H4 Size: 28px
Heading 4
H5 Size: 22px
Heading 5
H6 Size: 18px
Heading 6
05
Text Blocks
TXS Size: 14px
Here's one of my favorite videos on the top 10 rules for typography to consider made by thefutur. Enjoy :)
When you want to add long blocks of text to your project, you will either choose to use a Paragraph element or a rich text element. Here we’ll go over all you need to know about Paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod est tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimego veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex each ab commodo divad consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraph SM Size: 16px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad miniatom veniam, quis nostrud exercitt cupidatat non proident, in culpa qui officia deserunt mollit anim id est laborum.
Paragraph MD Size: 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adim veniam, quids nostrud exercitation cupidatat non proident, sunt in culpa qui offici deserunt mollit anim id est laborum.
Paragraph LG Size: 22px
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt Excepteur sint occaecat cupidatat non proident, inta caulpa qui officia deserunt mollit anim id est laborum.
Paragraph XL Size: 28px
Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango. Excepteur sint occaecat cupidatat proident.
Paragraph XXL Size: 36px
Lorem ipsum dolor sit amet, consectetur adipiscing, sedowip dolore eiusmod tempor incididunt ut labore etdolore magna aliqua. Apac excepteur sint occaecat, sunt in tango.