Stylebook for Framer

Version 1.0

Stylebook for Framer

Version 1.0

Stylebook for Framer

Version 1.0

Jump to:

Jump to:

Jump to:

1.0 Color System
Helps you to create a color theme that reflects your brand’s style.
1.0 Color System
Helps you to create a color theme that reflects your brand’s style.
1.1 Primary
Blue
#0000FF
AAA

Yellow

#EAFF00

AAA

1.2 Secondary

Black
#000000
AAA
White
#FFFFFF
Fail
Black
#000000
AAA
White
#FFFFFF
Fail
1.3 Shades of Grey
Grey 7
#A8A8A8
Fail
Grey 8
#C6C6C6
Fail
Grey 9
#E0E0E0
Fail
Grey 10
#F4F4F4
Fail
Grey 1
#161616
AAA
Grey 2
#262626
AAA
Grey 3
#393939
AAA
Grey 4
#525252
AAA
Grey 5
#6F6F6F
AA
Grey 6
#8D8D8D
Fail
1.3 Shades of Grey
Grey 7
#A8A8A8
Fail
Grey 8
#C6C6C6
Fail
Grey 9
#E0E0E0
Fail
Grey 10
#F4F4F4
Fail
Grey 1
#161616
AAA
Grey 2
#262626
AAA
Grey 3
#393939
AAA
Grey 4
#525252
AAA
Grey 5
#6F6F6F
AA
Grey 6
#8D8D8D
Fail
1.0 Color System
Helps you to create a color theme that reflects your brand’s style.
1.1 Primary
Blue
#0000FF
AAA

Yellow

#EAFF00

AAA

1.2 Secondary

Black
#000000
AAA
White
#FFFFFF
Fail
1.3 Shades of Grey
Grey 7
#A8A8A8
Fail
Grey 8
#C6C6C6
Fail
Grey 9
#E0E0E0
Fail
Grey 10
#F4F4F4
Fail
Grey 1
#161616
AAA
Grey 2
#262626
AAA
Grey 3
#393939
AAA
Grey 4
#525252
AAA
Grey 5
#6F6F6F
AA
Grey 6
#8D8D8D
Fail
2.0 Typography
Headlines, subtitles, body, and captions are creating a cohesive typography experience for your product.
2.0 Typography
Headlines, subtitles, body, and captions are creating a cohesive typography experience for your product.
2.0 Typography
Headlines, subtitles, body, and captions are creating a cohesive typography experience for your product.

Responsive Headlines

Headline 1

Headline 2

Headline 3

Responsive Paragraphs

Lead Paragraph – Fusce dapibus, tellus ac cursus commodofermentum.

Standard Paragraph – Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Responsive Headlines

Headline 1

Headline 2

Headline 3

Responsive Paragraphs

Lead Paragraph – Fusce dapibus, tellus ac cursus commodofermentum.

Standard Paragraph – Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Responsive Headlines

Headline 1

Headline 2

Headline 3

Responsive Paragraphs

Lead Paragraph – Fusce dapibus, tellus ac cursus commodofermentum.

Standard Paragraph – Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

3.0 Shadows
Shadows express the degree of elevation between surfaces. Usage needs to be consistent throughout the product.
3.0 Shadows
Shadows express the degree of elevation between surfaces. Usage needs to be consistent throughout the product.
Shadow 1
Shadow 2
Shadow 3
Shadow 4
3.0 Shadows
Shadows express the degree of elevation between surfaces. Usage needs to be consistent throughout the product.
Shadow 1
Shadow 2
Shadow 3
Shadow 4

4.0 Iconography

Icons are used to communicate an application, a capability, or some other concept or specific entity with meaning for the user.

4.0 Iconography

Icons are used to communicate an application, a capability, or some other concept or specific entity with meaning for the user.

5.0 Buttons

Buttons communicate actions that users can take.

5.0 Buttons

Buttons communicate actions that users can take.

4.1 Primary Button

4.2 Secondary Button

4.3 Link

4.1 Primary Button

4.2 Secondary Button

4.3 Link

4.0 Iconography

Icons are used to communicate an application, a capability, or some other concept or specific entity with meaning for the user.

5.0 Buttons

Buttons communicate actions that users can take.

4.1 Primary Button

4.2 Secondary Button

4.3 Link