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