Typography
Inter
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
Heading 1 (XL)
Heading XL
Heading 1
Title
Heading 2
Subtitle
Heading 3
Section Title
Paragraph
Typography is an essential element in the style guide for the Framer app interface. The typography guidelines will define the font choices, sizes, and styles for headers, body text, and buttons. The type scale is an important tool used in the typography guidelines to ensure consistency and hierarchy throughout the app.
Small
The type scale is a system of font sizes that are used consistently throughout the app to create a clear visual hierarchy. By using a limited set of font sizes, designers can create a consistent look and feel for the app while also making it easier for users to navigate and understand the interface.
Colors
Dynamic Colors (They change based on light/dark mode user settings)
Text Primary
Text Secondary
Background Primary
Background Secondary
Always Light Mode
Text Primary
No matter dark or white mode this color doesn't change
Text Secondary
No matter dark or white mode this color doesn't change
Background Primary
No matter dark or white mode this color doesn't change
Background Secondary
No matter dark or white mode this color doesn't change
Always Dark Mode
Text Primary
No matter dark or white mode this color doesn't change
Text Secondary
No matter dark or white mode this color doesn't change
Background Primary
No matter dark or white mode this color doesn't change
Background Secondary
No matter dark or white mode this color doesn't change