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
Primary
#8B9F7FPrimary Dark
#A8C69FSecondary
#D4C5A9Secondary Light
#E3D7CFHeader Color
#47473BBody Text
#47473BLight BG
#FBF5F1Blue Gray 1
#E9EBEEBlue Gray 2
#D9DCE0Typography
- 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-solidfor 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-titlefor h1/h2,.cs-h3for h3, and.cs-topperfor eyebrow text. - Use
.cs-textfor all body copy. - All sections should use the standard section padding variable.
- Containers should be centered and use max-widths as above.
- Use
.cs-uland.cs-lifor lists. - Use
.cs-button-solidfor all main actions. - Use
.cs-form,.cs-label,.cs-inputfor all forms. - Use
clamp()for font sizes and paddings for fluid scaling. - Use media queries for layout adjustments at 600px, 1024px, and 1400px.
