01

Typeface Satoshi

Normal  /  400
Aa
Medium  /  500
Aa
Bold  /  700
Aa

Spacing System

Spacing - Desktop

screenshot

130 px

60 px

130 px

- Paddings Tops and Bottom for blocks - 130 px
- Inside of Blocks (between headlines and inside a content block) - 60px

Spacing - Tablet

screenshot

80 px

60 px

80 px

- Paddings Tops and Bottom for blocks - 80 px
- Inside of Blocks (between headlines and inside a content block) - 60px

Spacing - Mobile

screenshot

60 px

40 px

60 px

- Paddings Tops and Bottom for blocks - 60 px
- Inside of Blocks (between headlines and inside a content block) - 40px

02

Color Palettes

Primary

#8000ff

#eef4f8

#7987a1

Secondary

#ffffff

#fafafa

#180030

#2B1343

171717

03

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

TR Red

TO Orange

TY Yellow

TG Green

TC Cyan

TB Blue

TP Purple

TP Pink

04

Displays

Text 92xL
Size: 92px
Display LG
Mobile
Size: 54px
Display LG
Text 76xL
Size: 76px
Display MD
Mobile
Size: 44px
Display MD
Text 60xL
Size: 60px

Display SM

Display SM
Mobile
Size: 36px
Display SM
Text 48xL
Size: 48px

Display SM

Display SM
Mobile
Size: 36px
Display SM
Text 40xL
Size: 40px

Display SM

Display SM
Mobile
Size: 36px
Display SM
05

Headings

Desktop

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

Heading 1
H2  
Size: 44px

Heading 2

Heading 2
H3 
Size: 36px

Heading 3

Heading 3 -Text
H4
Size: 28px

Heading 4

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

Mobile

H1  
Size: 32px
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
H2  
Size: 26px

Heading 2

Heading 2
H3 
Size: 22px

Heading 3

Heading 3
H4
Size: 20px

Heading 4

Heading 4
H5 
Size:18 px
Heading 5
Heading 5
H6
Size: 16px
Heading 6
Heading 6
06

Text Blocks

Badge b
Badge w
Badge 1
Badge 2
Badge 3
Badge 4
Badge 5
Badge 6
Badge 7
Badge 8
Text-14xs
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-16Regular
Size: 16px
© Copyright basicsam, inc.
Text-18Medium
Size: 18px
© Copyright basicsam, inc.
Text-22Large  
Size: 22px
© Copyright basicsam, inc.
Text-28XLarge
Size: 28px
© Copyright basicsam, inc.
Text-36XXLarge 
Size: 36px
© Copyright basicsam, inc.
07

Paragraphs

Paragraph 14XS
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 16-regular
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 18Medium
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 22Large
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 28XLarge
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 36XXLarge
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.

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.

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

Main Button
Primary
Main Button White
Primary for dark back
Button Outline
Secondary
Button with Arrow
Secondary Icon

A

Align Text
AC
AL
AR

Align Center
Align Left
Align Right

Button #

Buttons
Button
Button-icon
Button -secondary
Button-text

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 940px
Container 1280px
Container 1440px
Container 1920px
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

Margin

Margin direction
Margin-4px
margin-left4px
margin-right4px
margin-top4px
margin-bottom4px
Margin X
Margin Y
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
Margin Left + Right (X Axis)
margin Top + Bottom (Y

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