01

Typeface Raleway

Down arrow
Normal  /  400
Aa
Medium  /  500
Aa
Bold  /  700
Aa
Satoshi  /  Normal
When it comes to typography, accessibility and inclusive design are important to consider when designing for the web. Format your text with search engines and accessibility in mind. Click to learn



A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b b d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 ! ?
02

Color Palettes

Down arrow
N{1-8}
Neutral Colors
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
#D8DCE7
N7
#f1f1f1
N8
#ffffff
G{1-4}
Gradient Background
G1
#e6f2ff → #ffe5e5
G2
#e5ffe5 #e5fffd
G3
#fff2e5 #ffe5ff
G4
#e6f2ff #e9e5ff
C{1-4}
Primary Colors
CR
#e53917
CO
#f28518
CY
#f2ce18
CG
#29a63e
C{5-9}
Secondary Colors
LR
#ffe5e5
LO
#fff2e5
LY
#ffffe5
LG
#e5ffe5
03

Text Colors

Down arrow
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

04

Displays

Down arrow
Text 6xL
Size: 60px
Display LG
Mobile
Size: 54px
Display LG
Text 5xL
Size: 45px
Display MD
Mobile
Size: 44px
Display MD
Text 4xL
Size: 30px
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

Display SM
Mobile
Size: 36px
Display SM
05

Headings

Down arrow
H1  
Size: 60px
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

Heading 1 -Text
H2  
Size: 45px

Heading 2

Heading 2 -Text
H3 
Size: 30px

Heading 3

Heading 3 -Text
H4
Size: 25px

Heading 4

Heading 4 -Text
H5 
Size: 22px
Heading 5
Heading 5 -Text
H6
Size: 18px
Heading 6
Heading 6 -Text

DESIGN

WEBFLOW

SEO

06

Text Blocks

Down arrow
Badge b
Badge w
Badge 1
Badge 2
Badge 3
Badge 4
Badge 5
Badge 6
Badge 7
Badge 8
Text-XS  
Size: 14px
Here's one of my favorite videos on the top 10 rules for typography to consider made by thefutur. Enjoy :)
© Copyright basicsam, inc.
Text-S
Size: 16px
© Copyright basicsam, inc.
Text-M
Size: 18px
© Copyright basicsam, inc.
Text-L  
Size: 22px
© Copyright basicsam, inc.
Text-XL
Size: 28px
© Copyright basicsam, inc.
Text-XXL 
Size: 35px
© Copyright basicsam, inc.
07

Paragraphs

Down arrow
Paragraph XS
Size: 14px
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/base
Size: 18px
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.

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.

Paragraph MD
Size: 20px
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.

Rich Text Styling

I was selling stuff probably since I could remember, like 6 or 7 years old. I was always out there helping my mom and dad sell watches, glasses, CDs, DVDs, stuff like that. Whatever we could put our hands on. I did it until I was around 17. But I was just doing it because I had to. There was no other option. Blow the dust off the clock. Your watches are behind the times. Throw open the heavy curtains which are so dear to you - you do not even suspect that the day has already dawned outside.

New Digital Performance

I have a large watch collection, and classic watches are especially important to me. I had a silver Rolex, and I actually gave it to my little brother. He wears it every day. He's an actor, so whenever he goes to an audition, he can look down, see it, and it gives him confidence. It was a great thing to pass on.

Friend drinking coffee image

When we are fearful and worried all the time, we are living as if we don't believe that we have a strong and able Shepherd who is tenderhearted toward us, who only leads us to good places, who protects us and lovingly watches over us.

Simple & Efficient

Ever since the end of Medieval feudalism, and the writings of John Locke, we have understood the importance of being able to buy and sell one's own property, including books and watches, both for reasons of economics and liberty. OCD about downloading my runs no matter where I go. I used it on an 18-mile run in Paris, a 12-miler in the mountains of Montana, a couple of runs in the Bahamas. Wherever I am, I try to run. That's what's so great about it.

The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency.

I think that just because the show is titled 'Awkward Black Girl' and it is a predominantly black cast doesn't mean that you shouldn't be able to relate to these people. We're all human beings. We all essentially go through the same things when it comes down to it, so I don't I think that should limit who watches it.

Template Features:

  • Beautifully Designed
  • Fully Responsive
  • CMS Content
  • Smooth Interactions

I think that just because the show is titled 'Awkward Black Girl' and it is a predominantly black cast doesn't mean that you shouldn't be able to relate to these people. We're all human beings. We all essentially go through the same things when it comes down to it, so I don't I think that should limit who watches it.

Perfect Template for Creative People

Now we live in this DVD, iTunes, Hulu age, and show creators and networks are realizing that and letting shows develop on those terms rather than 'We gotta just punch it week to week, man.' Now they're like, 'What will happen if someone watches the entire show?'

Template Features:
  1. Beautifully Designed
  2. Fully Responsive
  3. CMS Content
  4. Smooth Interactions

Now that I have a daughter, I've been thinking about how I'll define beauty to her. I watched a video of Kendall when she was three, and she was putting on makeup. I don't know how I feel about that. But my daughter already watches me do it. When do you let them start wearing it? I don't know yet.

Rich Text Styling

I was selling stuff probably since I could remember, like 6 or 7 years old. I was always out there helping my mom and dad sell watches, glasses, CDs, DVDs, stuff like that. Whatever we could put our hands on. I did it until I was around 17. But I was just doing it because I had to. There was no other option. Blow the dust off the clock. Your watches are behind the times. Throw open the heavy curtains which are so dear to you - you do not even suspect that the day has already dawned outside.

New Digital Performance

I have a large watch collection, and classic watches are especially important to me. I had a silver Rolex, and I actually gave it to my little brother. He wears it every day. He's an actor, so whenever he goes to an audition, he can look down, see it, and it gives him confidence. It was a great thing to pass on.

Friend drinking coffee image

When we are fearful and worried all the time, we are living as if we don't believe that we have a strong and able Shepherd who is tenderhearted toward us, who only leads us to good places, who protects us and lovingly watches over us.

Simple & Efficient

Ever since the end of Medieval feudalism, and the writings of John Locke, we have understood the importance of being able to buy and sell one's own property, including books and watches, both for reasons of economics and liberty. OCD about downloading my runs no matter where I go. I used it on an 18-mile run in Paris, a 12-miler in the mountains of Montana, a couple of runs in the Bahamas. Wherever I am, I try to run. That's what's so great about it.

The first rule of any technology used in a business is that automation applied to an efficient operation will magnify the efficiency. The second is that automation applied to an inefficient operation will magnify the inefficiency.

I think that just because the show is titled 'Awkward Black Girl' and it is a predominantly black cast doesn't mean that you shouldn't be able to relate to these people. We're all human beings. We all essentially go through the same things when it comes down to it, so I don't I think that should limit who watches it.

Template Features:

  • Beautifully Designed
  • Fully Responsive
  • CMS Content
  • Smooth Interactions

I think that just because the show is titled 'Awkward Black Girl' and it is a predominantly black cast doesn't mean that you shouldn't be able to relate to these people. We're all human beings. We all essentially go through the same things when it comes down to it, so I don't I think that should limit who watches it.

Perfect Template for Creative People

Now we live in this DVD, iTunes, Hulu age, and show creators and networks are realizing that and letting shows develop on those terms rather than 'We gotta just punch it week to week, man.' Now they're like, 'What will happen if someone watches the entire show?'

Template Features:
  1. Beautifully Designed
  2. Fully Responsive
  3. CMS Content
  4. Smooth Interactions

Now that I have a daughter, I've been thinking about how I'll define beauty to her. I watched a video of Kendall when she was three, and she was putting on makeup. I don't know how I feel about that. But my daughter already watches me do it. When do you let them start wearing it? I don't know yet.

09

Buttons

Down arrow
Button
Primary
Button 2
Primary Icon
Button 3
Secondary
Button 4
Secondary Icon
Button W
White Primary
Button W2
White Icon
Button W3
White Secondary
Button W4
White Icon

A

Align Text
AC
AL
AR

Align Center
Align Left
Align Right

Button #

Buttons
Button
Button 2
Button 3
Button 4

Button W
Button W2
Button W3
Button W4
Primary
Primary+Icon
Secondary Ol.
Secondary+Icon Ol.

White Primary
White Primary+Icon Ol.
White Secondary Ol.
White Secondary+Icon Ol.

C{R-P}

Colored Backgrounds
CR
CO
CY
CG
CC
CB
CPP
CP
Red
Orange
Yellow
Green
Cyan
Blue
Purple
Pink

Card #

Card Variants
Card
Card 2
Card 3
Card 4

Default
No Pad
No T/B Pad
No L/R Pad

Container #

Container
Container
Container 940
Container 1280
Container 1440
Container 1920
Default Preference
940px
1280px
Square Ol.
Round Ol.

D{Size}

Displays
Text 6xL
Text 5xL
Text 4xL
Display Text 92px
Display Large 78px
Display Small 66px

F

Flex
FH
FV
Flex Horizontal
Flex Vertical

G1-4

Gradient Backgrounds
G1
G2
G3
G4
Gradient 1
Gradient 2
Gradient 3
Gradient 4

H1-6

Headings
H1
H2
H3
H4
H5
H6
Heading 1
Heading 2
Heading 4
Heading 5
Heading 6
Heading 7

100110

Hax

Hide

Hide Element
Hide

Hide Element

Invert

Invert Filter
Invert

Invert Element

Link #

Links
Link 1
Link 2
Link 3
Link 4

Link W
Link W2
Link W3
Link W4
Arrow
Underline Reveal
Underline Retract
Dash Reveal

White Arrow
White UL Reveal
White UL Retract
White Dash Reveal

L{R-P}

Light Colors
LR
LO
LY
LG
LC
LB
LPP
LP
Lt. Red
Lt. Orange
Lt. Yellow
Lt. Green
Lt. Cyan
Lt. Blue
Lt. Purple
Lt. Pink

N{1-8}

Neutral Backgrounds
N1
N2
N3
N4
N5
N6
N7
N8
Black
Lt. Black
Dk. Grey
Grey
Lt. Grey
Dk. White
Lt. White
White

P{Size}

Paragraphs
PXS
PS
PM
PL
PXL
PXXL

Extra Small
Small
Medium
Large
Extra Large
Extra Extra Large

T{Size}

Text Blocks
TXS
TS
TM
TL
TXL
TXXL
Extra Small
Small
Medium
Large
Extra Large
Extra Extra Large

T{R-P}

Text Colors
TR
TO
TY
TG
TC
TB
TPP
TP
Red
Orange
Yellow
Green
Cyan
Blue
Purple
Pink

T{1-8}

Text Neutrals
T1
T2
T3
T4
T5
T6
T7
T8
Black
Lt. Black
Dk. Grey
Grey
Lt. Grey
Dk. White
Lt. White
White

Weight

Text Weight
Normal
Medium
Bold

400 Weight
500 Weight
700 Weight

Grid

Grid Layout
Grid-1
Grid-2
Grid-3
Grid-4
Grid-5
Grid-2 Col align center
Grid-2 Col align Left

Grid 1 Column
Grid 2 Column
Grid 3 Columns
Grid 4 Columns
Grid 5 Columns
Grid 2 Columns Center
Grid 2 Columns Align Left

Wrap

Wrap
Wrap
Flex row
Flex row reversed
Flex align center
Flex align left


Wrap Element
Div flex row
Div row inverted columns
Div columns align center
Div align left