Style Guide

This page documents the standard typography, spacing, and UI conventions for the Patricia Harvey Therapy website. Use these rules for all new pages and components to ensure a cohesive look and feel.

Color Palette

Typography

• H1 (Hero/Main):
  Font: Prata, serif
  Size: clamp(2.5rem, 3vw, 3.75rem) (40px–60px)
  Weight: 900
  Color: var(--headerColor)
  Sample H1 Title
• H2 (Section):
  Font: Prata, serif
  Size: clamp(1.9375rem, 3.9vw, 3.0625rem) (31px–49px)
  Weight: 900
  Color: var(--headerColor)
  Sample H2 Title
• H3 (Subsection):
  Font: Prata, serif
  Size: 1.5rem–2rem (24px–32px, custom per section)
  Weight: 400
  Color: var(--headerColor)
  Sample H3 Title
• Eyebrow:
  Font: Roboto, Arial, sans-serif
  Size: clamp(0.8125rem, 1.6vw, 1rem) (13px–16px)
  Weight: 700
  Color: var(--primary)
  Sample Eyebrow Text
• Body:
  Font: Roboto, Arial, sans-serif
  Size: clamp(1rem, 1.5vw, 1.125rem) (16px–18px)
  Weight: 400
  Color: var(--bodyTextColor)
  Sample body text for paragraphs and descriptions.

Section & Container Spacing

• Section padding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem
• Container max-width: 1280px (main), 800px (content), 550px (contact forms)
• Section margin-top: 64px (desktop), 168px (large screens)

Buttons & Forms

• Use .cs-button-solid for primary CTAs
• Inputs: font-size: 1rem, padding-left: 20px, height: 2.875–3.5rem
• Labels: font-size: 0.875rem (14px)

Example Section

<section>
    <div class="cs-container">
        <span class="cs-topper">Section Eyebrow</span>
        <h2 class="cs-title">Section Title</h2>
        <p class="cs-text">Body text goes here. Use .cs-text for all paragraphs.</p>
        <ul class="cs-ul">
            <li class="cs-li">List item</li>
        </ul>
        <a href="#" class="cs-button-solid">Call to Action</a>
    </div>
</section>

Cohesive Rules

• Always use .cs-title for h1/h2, .cs-h3 for h3, and .cs-topper for eyebrow text.
• Use .cs-text for all body copy.
• All sections should use the standard section padding variable.
• Containers should be centered and use max-widths as above.
• Use .cs-ul and .cs-li for lists.
• Use .cs-button-solid for all main actions.
• Use .cs-form, .cs-label, .cs-input for all forms.
• Use clamp() for font sizes and paddings for fluid scaling.
• Use media queries for layout adjustments at 600px, 1024px, and 1400px.