DESIGN SYSTEM
Global Fonts
A guide to help you visualize and keep your Global Fonts list organized.
Global Fonts
Primary
Secondary
Text
Accent
Extra Style 1
Extra Style 2
Note: Global Styles are perfect for a more detailed styling of a specific element. Use it as a layer on top of the default Theme Style.
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add Your Heading Text Here
Add your stylized font here
DESIGN SYSTEM
Theme Style Settings
A guide to help you define and visualize your Theme Style settings and keep the user interface consistent.
01. Typography
Font size, style, and weight does as much for your design personality as anything else. Here you’ll find suggested sizes but feel free to change settings according to your font choice. Add font name, size, weight and line height for each style. Add color if it’s part of the headline. Just remember that this is the default style, a fallback, a basic style (the white wall!)
You’re also welcome to have 2 different colors for a headline, for example light and dark backgrounds, as long as you keep it consistent (This is where you’ll use the Global Styles!)
Body (+ LINK)
Desktop: 18 px
Tablet: 17 px
Mobile: 16 px
Line Height: 1.6
Paragraph Spacing: 1.4 em
Use: Main body copy, best for text-heavy pages like blog posts.
Note: Suggested font size works for most fonts, but depending on your font choice you might need to go 2 points larger or even 2 points smaller (but stick to 16px minimum even for mobile). Keep your visitors in mind. You don’t want to make them strain their eyes. For comparison, the website Medium.com, a text-heavy page, has a default article text size of 21 px. Important: If you add underline for your links make sure you select none for all other headings below, unless you want them underlined if they are links.
The body font size is the base for all the others. That is why they are set in pixels and the others are set in ems, which are related to the font size. So if your size is 18px, then 1em = 18px / 2ems = 36px and so on so forth. If your size is 16px, then 1em = 16px / 2em=32px, and so on so forth.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
Heading 1 / H1
Desktop: 3.75 em
Tablet: 3 em
Mobile: 2.8 em
Line Height: 1.1
Tag Use: Page Title, Post Title
Note: Use only one H1 on your page and post. The presence of more than one H1 dilutes the SEO power of a single H1, where you use your main page/post keyword.
This is heading number one, use only once on the page.
Heading 2 / H2
Desktop: 3.25 em
Tablet: 2.5 em
Mobile: 2.3 em
Line Height: 1.2
Tag Use: Section Title, Post Subheading
Note: Before using H2, make sure you already used H1 as the main page title.
This is heading number two, use as heading for most sections on a page, and headings on posts
Heading 3 / H3
Desktop: 2.75 em
Tablet: 2 em
Mobile: 1.8 em
Line Height: 1.2
Tag Use: Section Title, Post Subheading
Note: Only use H3 under/after you’ve used H2, respecting hierarchy.
This is heading number three, use for sections or subsections on a page, and as child of H2 on posts
Heading 4 / H4
Desktop: 2.25 em
Tablet: 1.65 em
Mobile: 1.4 em
Line Height: 1.25
Tag Use: Section Title and/or Subtitle, Post Subheading
Note: Only use H4 under/after you’ve used H2 and H3, respecting hierarchy.
This is heading number four, use for less important sections, subsections, and box titles on a page, and as child of H3 on posts
Heading 5 / H5
Desktop: 1.75 em
Tablet: 1.4 em
Mobile: 1.3 em
Line Height: 1.25
Tag Use: Post Intro Paragraphs, Post Subheading respecting hierarchy. Subheadings, and overhead on pages.
Note: For smaller size headlines, use serif or sans serif typefaces. Stay away from script or display typefaces.
This is heading number five, use for post subheading respecting hierarchy, and intro paragraphs.
Heading 6 / H6
Desktop: 1.25 em
Tablet: 1.2 em
Mobile: 1.2 em
Line Height: 1.4
Tag Use: Post Intro Paragraphs, Post Subheading respecting hierarchy. Subheadings, and overhead on pages.
Note: For smaller size headlines, use serif or sans serif typefaces. Stay away from script or display typefaces.
This is heading number six, use for post subheading respecting hierarchy, intro paragraphs, footer title sections, and any other space an H6 (the last heading size) works on your pages.
02. Buttons
Include the button styling for both when hover or click, generally you would have a consistent style for all of your interactive elements of your site so you may only need to add one or two examples for both light and dark backgrounds if your brand includes it. Include at least 2 different sizes for different purposes (large, attention-grabbing CTA buttons, and smaller, not so important, “Read More” style buttons.)
BUTTON
Font Weight: Bold
Letter Spacing: 1.2
Transform: Uppercase
Desktop: Default / 1.1 em
Tablet: Default / 1.1 em
Mobile: Default / 1.1 em
Tag Use: Button font-size (and the button overall) varies depending on its relevance. For example, buttons to view more under a blog title are not as relevant as a button that offers a download or book a call and stands on its own inside a section.
Note: The minimum font size is 16px for the less relevant buttons.
03. Form Fields
Define how your default form fields will look like. Think about where you will eventually have them (footer, blog post, popup, etc). Don’t style them with too much detail because forms may have different looks depending on what they are for. Remember that you can add different styling within the widget once on the page. Focus more on a default look and how they will look under your blog/podcast post comment section.
form