Typography Styleguide
Font Tips
Download Satoshi Font
Display
Line 02
This is the largest text size, ideal for the main title/hero text on the first section of each page. It should be clear, concise, and create a strong first impression. Limit its use to a single, prominent element.
Heading One
Line 02
Used for primary page sections or main content areas. This size is impactful but still scannable for titles and high-level information.
Heading Two
Line 02
Ideal for subsections within a major content area. Creates a clear hierarchy with differentiation from Heading 1.
Heading Three
Line 02
Used for subheadings within sections, further defining the content structure. Maintain a clear size distinction between Heading 2 and 3.
Heading Four
Line 02
Suitable for subheadings within subsections, or for titles in smaller components like widgets or sidebars. Ensure good visual hierarchy with enough contrast from Heading Three.
Heading Five
Line 02
This is the smallest recommended heading size. Use it sparingly for very specific subheadings or titles within small content blocks.
Paragraph/lg
Line 02
20px/1.25rem
1.5em
This is the standard size for body text in longer paragraphs. It should be comfortable to read and promote easy content consumption.
Paragraph/sm
Line 02
Use this size for shorter paragraphs, captions, or call-outs.
It offers slightly better readability for smaller amounts of text.
CTA/sm
Line 02
This is the smallest CTA size, ideal for very small buttons or secondary actions. Use it cautiously, prioritizing clarity over compactness.
CTA/md
Line 02
This is the standard CTA size for most buttons and primary actions. It provides good readability while maintaining a clear call to action.
CTA/lg
Line 02
Use this size for larger buttons or CTAs that require extra emphasis.
It conveys importance but ensure the button size is balanced within the interface.
50
100
200
300
400
500
600
700
800
900
950