Why H1 to H6 Tags Are Important for SEO
Heading tags (H1 to H6) are important for SEO because they show search engines the structure and main topic of a webpage. The H1 tag should be used only once, as it defines the primary focus of the page.
H2 tags divide the content into major sections, while H3 to H6 organize smaller subsections. Using headings in proper order helps search engines understand your content better, improves readability for users, and increases the chances of ranking higher in search results.
Heading H1
H1: 64px or 4rem / Bold
Heading H2
H2: 40px or 2.5rem / Semi-Bold
Heading H3
H3: 26px or 1.625rem / Semi-Bold
Heading H4
H4: 22px or 1.375rem / Semi-Bold
Heading H5
H5: 20px or 1.25rem / Semi-Bold
Heading H6
H6: 18px or 1.125rem / Semi-Bold
Available H2 Size Variants
We use different H2 size variations to match various layout designs while still following proper SEO structure and accessibility standards.
H2: Heading Variant 02
H2: 30px or 1.875rem
H2: Heading Variant 03
H2: 28px or 1.75rem
H2: Heading Variant 04
H2: 26px or 1.625rem
H2: Heading Variant 05
H2: 24px or 1.5rem
H2: Heading Variant 06
H2: 22px or 1.375rem
H2: Heading Variant 07
H2: 20px or 1.25rem
H2: Heading Variant 07
H2: 18px or 1.125rem
H2: Heading Variant 07
H2: 16px or 1rem
H2: Heading Variant 07
H2: 14px or 0.875rem
Typography
HTML All Paragraph
HTML paragraph (<p>) tags define the primary body content of a webpage and play a critical role in both structure and SEO. In Divi and modern website design systems, paragraphs ensure content is organized, readable, and semantically correct. Search engines rely on properly structured paragraph content to understand topic relevance, keyword context, and overall content quality.
Consistent paragraph styling within the design system also maintains visual hierarchy, improves accessibility, and delivers a professional user experience. Clear paragraph structure is not just a design choice it directly supports search visibility and content performance.
Large-Paragraph
Paragraph: 20px or 1.25rem / Semi-Bold
Paragraph: 20px or 1.25rem / Medium
Paragraph: 20px or 1.25rem / Regular
Medium-Paragraph
Paragraph: 18px or 1.125rem / Semi-Bold
Paragraph: 18px or 1.125rem / Medium
Paragraph: 18px or 1.125rem / Regular
Small-Paragraph
Paragraph: 16px or 1rem / Semi-Bold
Paragraph: 16px or 1rem / Medium
Paragraph: 16px or 1rem / Regular
Extra small-Paragraph
Paragraph: 14px or 0.875rem / Semi-Bold
Paragraph: 14px or 0.875rem / Medium
Paragraph: 14px or 0.875rem / Regular
Primary color
Primary color
Primary is the loudest voice - we use it carefully
Primary color is reserved for the most important actions and brand moments. We limit its usage so it always feels intentional and strong.
Primary Color – Usage Rules
-
Used for brand identity and main actions
-
Limited to one primary CTA per section
-
Used for active states and key highlights
-
Never used for large repetitive backgrounds
Primary-900
Primary-800
Primary-700
Primary-600
Primary-500: Base Color
Primary-400
Primary-300
Primary-200
Primary-100
Primary-50
Primary-25
Primary-0
Secondary color
Secondary color
Secondary adds balance; Accent adds focus
Secondary color gives structure and variation to the layout without overpowering the brand. It helps users scan content more easily.
Secondary Color – Usage Rules
-
Used for layout grouping and section separation
-
Used for secondary actions
-
Used in large surfaces where Primary would feel heavy
-
Never used for urgent actions or emphasis
Secondary-900
Secondary-800
Secondary-700
Secondary-600
Secondary-500: Base Color
Secondary-400
Secondary-300
Secondary-200
Secondary-100
Secondary-50
Secondary-25
Secondary-0
Neutral colors
Neutral color
Secondary adds balance; Accent adds focus
Secondary color gives structure and variation to the layout without overpowering the brand. It helps users scan content more easily.
Secondary Color – Usage Rules
-
Used for layout grouping and section separation
-
Used for secondary actions
-
Used in large surfaces where Primary would feel heavy
-
Never used for urgent actions or emphasis
Neutral-900
Neutral-800
Neutral-700
Neutral-600
Neutral-500: Base Color
Neutral-400
Neutral-300
Neutral-200
Neutral-100
Neutral-50
Neutral-25
Neutral-0
Accent Color
Accent color
Secondary adds balance; Accent adds focus
Secondary color gives structure and variation to the layout without overpowering the brand. It helps users scan content more easily.
Secondary Color – Usage Rules
-
Used for layout grouping and section separation
-
Used for secondary actions
-
Used in large surfaces where Primary would feel heavy
-
Never used for urgent actions or emphasis
Accent-900
Accent-800
Accent-700
Accent-600
Accent-500: Base Color
Accent-400
Accent-300
Accent-200
Accent-100
Accent-50
Accent-25
Accent-0
Accent Color
Semantic Color
Secondary adds balance; Accent adds focus
We reuse brand-approved colors for system states to maintain visual consistency, reduce palette overload, and improve usability. Meaning is defined by context, not by adding unnecessary colors.
Semantic Colorsr – Usage Rules
- Brand colors can appear anywhere
- Semantic colors can appear only in system feedback
Success
Use on Success Message
Warning
Use on Warning Message
Info
Use on info Message
Error / Danger
Alert the user
Disabled / Muted State
Use on Disabled/Muted state
Surface
Mostly used in design
Eds:Spacing-0rem (0px)
Eds:Spacing-0.25rem (4px)
Eds:Spacing-0.5rem (8px)
Eds:Spacing-1rem (16px)
Eds:Spacing-1.5rem (24px)
Eds:Spacing-2rem (32px)
Eds:Spacing-2.5rem (40px)
Eds:Spacing-3rem (48px)
Eds:Spacing-3.5rem (56px)
Eds:Spacing-4rem (64px)
Eds:Spacing-4.5rem (72px)
Eds:Spacing-5rem (88px)
Eds:Spacing-5.5rem (88px)
Eds:Spacing-6rem (96px)
Eds:Spacing-6.5rem (104px)
Eds:Spacing-7rem (112px)
Eds:Spacing-7.5rem (120px)
Eds:Spacing-8rem (128px)