Hello. Hope you're having a good day. This is my first-ish project. If you appreciate my work, leave a like and buy me a coffee. My caffeine dependency is made possible by viewers like you. Thank you.

-@basicsam | Webflow User

01

Typeface Satoshi

Normal  /  400
Aa
Medium  /  500
Aa
Bold  /  700
Aa
Satoshi  /  Normal
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

N{1-8}
Neutral Background
N1
#0000
N2
#1a1a1a
N3
#3f3f3f
N4
#808080
N5
#bebebe
N6
#e6e6e6
N7
#f1f1f1
N8
#ffffff
G{1-4}
Gradient Background
G1
#e6f2ff → #ffe5e5
G2
#e5ffe5 #e5fffd
G3
#fff2e5 #ffe5ff
G4
#e6f2ff #e9e5ff
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
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

DL
Size: 92px

Display LG

Mobile
Size: 54px

Display LG

DM
Size: 78px

Display MD

Mobile
Size: 44px

Display MD

DS 
Size: 66px

Display SM

Mobile
Size: 36px

Display SM

05

Headings

H1  
Size: 54px

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
06

Text Blocks

Badge b
Badge w
Badge 1
Badge 2
Badge 3
Badge 4
Badge 5
Badge 6
Badge 7
Badge 8
TXS  
Size: 14px
© Copyright basicsam, inc.
TS
Size: 16px
© Copyright basicsam, inc.
TM
Size: 18px
© Copyright basicsam, inc.
TL  
Size: 22px
© Copyright basicsam, inc.
TXL
Size: 28px
© Copyright basicsam, inc.
TXXL 
Size: 36px
© Copyright basicsam, inc.
07

Paragraphs

Paragraph XS
Size: 14px
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.
08

Rich Text

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sunt in culpa qui officia deserunt mollit anim id est laborum.

1. Main Point

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Bold Text:

  • Ordered List Item
  • Ordered List Item
  • Ordered List Item
  • Ordered List Item

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

“Typefaces are to the written word what different dialects are to different languages.” ― Steven Heller

2. Main Point

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea italics consequat. Excepteur sint occaecat cupidatat non proident.

- Supporting paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

  1. Numbered List Item
  2. Numbered List Item
  3. Numbered List Item

- Supporting paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident.

3. Main Point

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat. This is a link.

09

Buttons

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
11

Form Fields

Form Block  /  Text Fields  /  Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
12

Icons

Icons  /  Interface  /  Black
Icons  /  Social  /  Black
Icons  /  Interface  /  White
Icons  /  Social  /  White
13

Logos

Logo  /  Black
Logo Mark  /  Black
Logo  /  Black
Logo Mark  /  White

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
1100px
Square Ol.
Round Ol.

D{Size}

Displays
DS
DM
DL
Display Small
Display Medium
Display Large

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

Wrap

Wrap
Wrap

Wrap Element
15

Resources

Type Scale | Visual calculator for scaling type.
Material Icons | Icons based on Material Design principles by Google.
Make Tints & Shades | Tints and shade generator.
Unsplash | Free to use images
xx

Global Style Classes

Neuatral
Lights
Solids
Gradients
Invert
Height Pixels
Spacers
☕ BUY ME A COFFEE
THANK YOU :)
THANK YOU :)
THANK YOU :)
THANK YOU :)