For optimal readability and user experience, font sizes should be responsive, meaning they adjust to the size of the screen—desktop, tablet, and mobile. Below are recommended font sizes for each device, ensuring both functionality and aesthetic appeal.

1. Desktop Font Sizes

• Headline (H1):
  • 48px – 64px (large, bold, attention-grabbing; scales based on design)
• Subheadline (H2/H3):
  • H2: 32px – 40px
  • H3: 24px – 28px
• Body Text:
  • 16px – 18px (readable and comfortable for long text)
• CTA/Button Text:
  • 18px – 20px (ensures the call-to-action stands out)

2. Tablet Font Sizes

• Headline (H1):
  • 36px – 48px (slightly smaller than desktop but still prominent)
• Subheadline (H2/H3):
  • H2: 28px – 32px
  • H3: 22px – 26px
• Body Text:
  • 16px – 18px (same as desktop for readability)
• CTA/Button Text:
  • 18px – 20px (same as desktop)

3. Mobile Font Sizes

• Headline (H1):
  • 24px – 36px (compact, yet bold for small screens)
• Subheadline (H2/H3):
  • H2: 20px – 24px
  • H3: 18px – 22px
• Body Text:
  • 14px – 16px (comfortable to read without scrolling too much)
• CTA/Button Text:
  • 16px – 18px (ensures buttons are easy to tap and readable)

Line Heights and Spacing

• Headline Line Height:
  • 1.2 – 1.3 (a bit tighter to make headlines stand out without too much spacing)
• Body Text Line Height:
  • 1.5 – 1.7 (provides comfortable spacing for reading paragraphs)
• Letter Spacing:
  • For headlines, use slightly tighter spacing (-0.5px to 0px).
  • For body text, use normal spacing (0px).

Font Weight

• Headlines:
  • Bold or semi-bold (600–700 weight for emphasis)
• Body Text:
  • Regular or light (300–400 weight for easy readability)
• CTA/Button Text:
  • Bold or medium-bold (500–700 weight to draw attention)

Considerations for Responsive Design

• Scalable Fonts: Use responsive units like em or rem instead of pixels (px). This makes it easier for font sizes to scale with screen size, ensuring readability on different devices.
  • Example:
    • 1rem = 16px by default, so you can scale based on that.
  • For headlines, you can set values like 3rem for H1, which would scale with the user’s base font size.

---

Summary: Recommended Sizes (Desktop, Tablet, Mobile)

Element	Desktop Size	Tablet Size	Mobile Size
Headline (H1)	48px – 64px	36px – 48px	24px – 36px
Subheadline (H2)	32px – 40px	28px – 32px	20px – 24px
Subheadline (H3)	24px – 28px	22px – 26px	18px – 22px
Body Text	16px – 18px	16px – 18px	14px – 16px
CTA/Button Text	18px – 20px	18px – 20px	16px – 18px

---

By keeping these sizes and responsive practices in mind, you can ensure that your website is accessible and easy to navigate across all devices. Let me know if you’d like more specific recommendations or help implementing these!

Primary Color

The primary color should dominate the design and represent your brand. It should be present in key visual elements to create consistency and trust.

Where to Use Primary Color:

1. Headers and Headings:
   • Use the primary color for headlines (H1, H2, H3) to make them stand out without overwhelming the design.
   • This color will give a cohesive look across all pages when used in titles and section headings.
2. Navigation Bar:
   • Use the primary color for the navigation bar background or links, so it’s easy to identify and stays consistent throughout the user journey.
   • If using a light primary color, ensure the text contrast is sufficient.
3. Icons and Visual Elements:
   • Apply the primary color to icons or key visual elements (e.g., borders or separators) to tie them into the overall brand look.
4. Links:
   • Use the primary color for standard text links to create a subtle but noticeable emphasis.
5. Buttons (Secondary Actions):
   • For secondary action buttons (not your main CTA), like “Learn More” or “Explore,” use the primary color. It creates consistency without competing with the accent-colored CTA buttons.
6. Background Elements:
   • Use primary color for larger background sections (like hero section overlays or content blocks) to give your site structure and make it visually engaging.

Accent Color

The accent color is meant to attract attention to specific actions or focal points on the page. Use it sparingly to create contrast and make important elements stand out.

Where to Use Accent Color:

1. Call-to-Action (CTA) Buttons:
   • The most important use for the accent color is on primary CTA buttons (e.g., “Book a Free Consultation,” “Download Free Guide”). These buttons should draw immediate attention and encourage clicks.
   • Make sure the button text contrasts well with the accent color (e.g., white text on an orange or gold button).
2. Important Highlights or Key Text:
   • Use the accent color to highlight important keywords, phrases, or points in your body text or headings (e.g., bold or underline key takeaways in your blog posts or service descriptions).
3. Pricing or Offers:
   • If you have a pricing section or special offers, use the accent color to highlight the price or offer details, making it immediately clear to visitors where the value is.
4. Forms (Submit Buttons/Focus Fields):
   • Use accent colors on form submit buttons or for focused fields (like when a user clicks on a form input) to provide visual cues.
5. Hover Effects:
   • Use the accent color for hover states (e.g., when users hover over buttons, links, or images) to create an interactive and engaging experience.
6. Badges or Labels:
   • For attention-grabbing elements like “New,” “Sale,” or “Featured,” apply the accent color to make them pop out from the rest of the content.

---

Example Application on a Website:

Let’s assume your primary color is a soft blue (#4A90E2), and your accent color is a warm orange (#F39C12).

• Primary Color (Soft Blue):
  • Main headlines (H1, H2)
  • Navigation bar background and text
  • Icons and separators
  • Links within the body text
  • Secondary buttons like “Learn More”
• Accent Color (Warm Orange):
  • Main CTA buttons like “Book a Free Consultation”
  • Hover states on buttons and links
  • Highlighting important offers or sale badges
  • Key text highlights in the body content
  • Form submit buttons

By limiting the use of the accent color, you maintain focus on essential actions, while the primary color maintains brand consistency across the site.

Special Color #F5E9DC