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.

p.s. A few years later and over 1k clones + 9 coffees. Thanks for the love!❤️

-@basicsam | Webflow User

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

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

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

DL
‍Size: 92px

Display LG

DM
‍Size: 78px

Display MD

DS
‍Size: 66px

Display SM

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

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.

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.

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.

Numbered List Item
Numbered List Item
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.

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

Link 1
Arrow

Link 2
Underline Reveal

Link 3
Underline Retract

Link 4
Dash Reveal

Link W1
‍White Arrow

Link W2
‍‍White UL Reveal

Link W3
White UL Retract

Link Text

Link W4
White Dash Reveal

Form Block / Text Fields / Inputs

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Icons / Interface / Black

Icons / Social / Black

Icons / Interface / White

Icons / Social / White

Logo / Black

basicsam®
basicsam®

Logo Mark / Black

basicsam®
basicsam®

Logo / Black

basicsam®
basicsam®

Logo Mark / White

basicsam®
basicsam®

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

Type Scale | Visual calculator for scaling type.

www.type-scale.com

Material Icons | Icons based on Material Design principles by Google.

www.fonts.google.com/icons

Make Tints & Shades | Tints and shade generator.

www.maketintsandshades.com

Unsplash | Free to use images

www.unsplash.com

☕ BUY ME A COFFEE