# Pawtology.com Divi Style Guide
**Version:** 1.0
**Last Updated:** 2026-02-09
**Site:** https://wpdev.pawtology.com/
**Purpose:** Complete style reference for maintaining visual consistency across all Divi pages
—
## Overview
This guide ensures all pages on Pawtology maintain a **professional, educational, and trustworthy** aesthetic. The design emphasizes clarity, accessibility, and a medical/veterinary feel appropriate for pet health products.
—
## Typography
### Font Family
**Primary Font:** `Montserrat` (all elements)
“`
font-family: Montserrat, Helvetica, Arial, Lucida, sans-serif
“`
**Why Montserrat?**
– Professional, medical feel
– Excellent readability at all sizes
– Clean, modern aesthetic
– Strong brand voice for veterinary/health content
### Font Weights & Hierarchy
| Element | Font | Weight | Size (Desktop) | Size (Tablet) | Size (Phone) | Line Height |
|———|——|——–|—————-|—————|————–|————-|
| **H1** | Montserrat | 700 | 56px | 42px | 32px | 1.2em |
| **H2** | Montserrat | 500 | 42px | 36px | 28px | 1.3em |
| **H3** | Montserrat | 500 | 32px | 28px | 24px | 1.3em |
| **H4** | Montserrat | 500 | 22px | 18px | 16px | 1.6em |
| **Body Text** | Montserrat | 500 | 17-18px | 16px | 15px | 1.6em |
| **Blurb Titles** | Montserrat | 500 | 20px | 18px | 17px | 1.3em |
| **Blurb Body** | Montserrat | 500 | 15px | 14px | 14px | 1.6em |
| **Button Text** | Montserrat | 600 | 17px | 16px | 16px | – |
| **Testimonial Body** | Montserrat | 300 italic | 17px | 16px | 15px | 1.6em |
| **Testimonial Author** | Montserrat | 500 | 18px | 17px | 16px | – |
### Divi Builder Settings
**For H1:**
“`
header_font=”Montserrat|700|||||||”
header_font_size=”56px”
header_font_size_tablet=”42px”
header_font_size_phone=”32px”
header_font_size_last_edited=”on|phone”
header_line_height=”1.2em”
“`
**For H2:**
“`
header_2_font=”Montserrat|500|||||||”
header_2_font_size=”42px”
header_2_font_size_tablet=”36px”
header_2_font_size_phone=”28px”
header_2_font_size_last_edited=”on|phone”
header_2_line_height=”1.3em”
“`
**For Body Text:**
“`
text_font=”Montserrat|500|||||||”
text_font_size=”17px”
text_font_size_tablet=”16px”
text_font_size_phone=”15px”
text_font_size_last_edited=”on|phone”
text_line_height=”1.6em”
“`
**For Blurb Modules:**
“`
header_font=”Montserrat|500|||||||”
header_font_size=”20px”
header_font_size_tablet=”18px”
header_font_size_phone=”17px”
header_font_size_last_edited=”on|phone”
body_font=”Montserrat|500|||||||”
body_font_size=”15px”
body_font_size_tablet=”14px”
body_font_size_phone=”14px”
body_font_size_last_edited=”on|phone”
body_line_height=”1.6em”
“`
—
## Color Palette
### Primary Colors
| Color Name | Hex Code | RGB | Usage |
|————|———-|—–|——-|
| **Deep Navy** | `#08162E` | rgb(8, 22, 46) | Primary brand color, hero backgrounds, dark sections, primary headings |
| **Light Gray** | `#F6F8F8` | rgb(246, 248, 248) | Section backgrounds, alternating sections, clean neutral |
| **Medium Gray** | `#555555` | rgb(85, 85, 85) | Body text, descriptions, secondary content |
| **White** | `#FFFFFF` | rgb(255, 255, 255) | Section backgrounds, card backgrounds, text on dark |
### Accent Colors
| Color Name | Hex Code | RGB | Usage |
|————|———-|—–|——-|
| **Orange (CTA)** | `#D96C2C` | rgb(217, 108, 44) | Primary buttons, CTAs, icons, highlights |
| **Orange Hover** | `#c45d22` | rgb(196, 93, 34) | Button hover states |
### Supporting Colors (Use Sparingly)
| Color Name | Hex Code | RGB | Usage |
|————|———-|—–|——-|
| **Light Border** | `#E8E8E8` | rgb(232, 232, 232) | Card borders, subtle dividers |
| **Muted Text** | `#888888` | rgb(136, 136, 136) | Captions, meta information, job titles |
| **Success Green** | `#4CAF50` | rgb(76, 175, 80) | Icons for safety/approval |
| **Purple** | `#7854C5` | rgb(120, 84, 197) | Icons for science/research |
### Color Application Rules
**Section Backgrounds (Alternating Pattern):**
1. Hero Section: `#08162E` (Deep Navy)
2. Content Section: `#F6F8F8` (Light Gray)
3. Content Section: `#FFFFFF` (White)
4. Content Section: `#F6F8F8` (Light Gray)
5. Dark Section: `#08162E` (Deep Navy)
6. Repeat pattern…
**Text Colors:**
– Headings on light backgrounds: `#08162E` (Deep Navy)
– Headings on dark backgrounds: `#FFFFFF` (White)
– Body text on light backgrounds: `#555555` (Medium Gray)
– Body text on dark backgrounds: `rgba(255,255,255,0.85)` (85% white)
**Buttons:**
– Primary CTA: Background `#D96C2C`, Text `#FFFFFF`
– Secondary CTA: Background transparent, Border `#FFFFFF` or `#08162E`, Text matches border
– Hover: Background `#c45d22` (primary) or `rgba(255,255,255,0.1)` (secondary)
—
## Spacing & Layout
### Section Padding
**Standard Section Padding:**
“`
custom_padding=”60px||60px||true|false”
custom_padding_tablet=”60px||60px||true|false”
custom_padding_phone=”60px||60px||true|false”
“`
**Hero Section Padding (Exception):**
“`
custom_padding=”10vh||10vh||true|false”
custom_padding_tablet=”12vh||12vh||true|false”
custom_padding_phone=”10vh||10vh||true|false”
“`
### Container Widths
| Element | Width | Tablet | Phone |
|———|——-|——–|——-|
| **Standard Row** | 90% | 90% | 95% |
| **Narrow Row** | 85% | 90% | 95% |
| **CTA Row** | 60% | 80% | 90% |
| **Max Width** | 1200px | – | – |
### Margins
**Heading Bottom Margins:**
– H1: `30px` (desktop), `25px` (tablet), `20px` (phone)
– H2: `25px` (desktop), `20px` (tablet), `15px` (phone)
– Section Headers: `50px` (desktop), `40px` (tablet), `30px` (phone)
**Module Spacing:**
– Blurb modules: `30px` bottom margin (desktop), `25px` (tablet), `20px` (phone)
– Card modules: `25px` bottom margin (all devices)
—
## Component Styles
### Buttons
**Primary Button (CTA):**
“`
custom_button=”on”
button_text_size=”17px”
button_text_color=”#FFFFFF”
button_bg_color=”#D96C2C”
button_border_width=”0px”
button_border_radius=”50px”
button_font=”Montserrat|600|||||||”
custom_padding=”16px|40px|16px|40px|true|true”
button_bg_color__hover_enabled=”on|hover”
button_bg_color__hover=”#c45d22″
“`
**Secondary Button (Outline):**
“`
custom_button=”on”
button_text_size=”17px”
button_text_color=”#FFFFFF” (or #08162E on light backgrounds)
button_bg_color=”rgba(0,0,0,0)”
button_border_width=”2px”
button_border_color=”#FFFFFF” (or #08162E on light backgrounds)
button_border_radius=”50px”
button_font=”Montserrat|600|||||||”
custom_padding=”14px|38px|14px|38px|true|true”
button_bg_color__hover_enabled=”on|hover”
button_bg_color__hover=”rgba(255,255,255,0.1)” (or #08162E on light)
“`
### Cards & Containers
**White Card Style (Testimonials, Content Boxes):**
“`
background_color=”#FFFFFF”
custom_padding=”40px|40px|40px|40px|true|true”
custom_padding_tablet=”35px|35px|35px|35px|true|true”
custom_padding_phone=”30px|25px|30px|25px|true|true”
custom_padding_last_edited=”on|phone”
border_radii=”on|20px|20px|20px|20px”
border_width_all=”1px”
border_color_all=”#E8E8E8″
box_shadow_style=”preset1″
box_shadow_vertical=”5px”
box_shadow_blur=”25px”
box_shadow_color=”rgba(0,0,0,0.05)”
“`
**Testimonial Card Style:**
“`
background_color=”#FFFFFF”
custom_padding=”30px|30px|30px|30px|true|true”
border_radii=”on|16px|16px|16px|16px”
box_shadow_style=”preset1″
box_shadow_vertical=”5px”
box_shadow_blur=”20px”
box_shadow_color=”rgba(0,0,0,0.06)”
quote_icon=”off”
body_font=”Montserrat|500|||||||”
body_text_color=”#555555″
body_font_size=”15px”
author_font=”Montserrat|500|||||||”
author_text_color=”#08162E”
position_font=”Montserrat||||||||”
position_text_color=”#888888″
“`
**Star Rating Display:**
“`html
<span style=”color: #d96c2c; font-size: 18px;”>★★★★★</span>
“`
### Blurb Modules
**Standard Blurb (Icon + Title + Description):**
“`
header_font=”Montserrat|500|||||||”
header_text_color=”#08162E”
header_font_size=”20px”
header_font_size_tablet=”18px”
header_font_size_phone=”17px”
header_font_size_last_edited=”on|phone”
body_font=”Montserrat|500|||||||”
body_text_color=”#555555″
body_font_size=”15px”
body_font_size_tablet=”14px”
body_font_size_phone=”14px”
body_font_size_last_edited=”on|phone”
body_line_height=”1.6em”
text_orientation=”center”
custom_margin=”||30px||false|false”
custom_margin_tablet=”||25px||false|false”
custom_margin_phone=”||20px||false|false”
custom_margin_last_edited=”on|phone”
image_max_width=”70px”
image_max_width_tablet=”60px”
image_max_width_phone=”55px”
image_max_width_last_edited=”on|phone”
“`
### Video Modules
**Standard Video Embed:**
“`
border_radii=”on|20px|20px|20px|20px”
box_shadow_style=”preset3″
box_shadow_vertical=”15px”
box_shadow_blur=”40px”
play_icon_color=”#D96C2C”
“`
—
## Page Structure Patterns
### Hero Section (Full-Width with Background Image)
**Structure:** 1 Section → 1 Row (2 columns: 1_2, 1_2) → Text in left column
**Section Settings:**
“`
background_color=”#08162E”
use_background_color_gradient=”on”
background_color_gradient_direction=”90deg”
background_color_gradient_stops=”rgba(8,22,46,0.7) 0%|rgba(8,22,46,0.4) 100%”
background_image=”[URL]”
min_height=”80vh”
min_height_tablet=”70vh”
min_height_phone=”60vh”
min_height_last_edited=”on|phone”
custom_padding=”10vh||10vh||true|false”
custom_padding_tablet=”12vh||12vh||true|false”
custom_padding_phone=”10vh||10vh||true|false”
“`
**Text Module in Hero:**
– H1: White text, 700 weight, text shadow
– H4 subtitle: White text (90% opacity), 300 weight, text shadow
– Center aligned on tablet/phone
### Alternating Section Pattern
**Pattern for multi-section pages:**
1. Hero: Dark Navy (#08162E)
2. Section 2: Light Gray (#F6F8F8)
3. Section 3: Light Gray (#F6F8F8) or White (#FFFFFF)
4. Section 4: White (#FFFFFF)
5. Section 5: Dark Navy (#08162E)
6. Section 6: White (#FFFFFF)
7. Section 7: Light Gray (#F6F8F8)
8. Section 8: Dark Navy (#08162E) – Footer CTA
**Rule:** Alternate between light backgrounds, use dark navy for emphasis sections (hero, video, footer CTA)
### Content Section with Centered Heading
**Structure:** 1 Section → 1 Row (full width) → Text Module (H2 centered)
“`
text_orientation=”center”
header_2_font=”Montserrat|500|||||||”
header_2_text_color=”#08162E”
header_2_font_size=”42px”
header_2_font_size_tablet=”36px”
header_2_font_size_phone=”28px”
custom_margin=”||50px||false|false”
custom_margin_tablet=”||40px||false|false”
custom_margin_phone=”||30px||false|false”
“`
### 4-Column Feature Grid
**Structure:** 1 Section → 1 Row (1_4, 1_4, 1_4, 1_4) → Blurb in each column
**Row Settings:**
“`
width=”85%”
width_tablet=”90%”
width_phone=”95%”
width_last_edited=”on|phone”
max_width=”1200px”
“`
**Blurb Settings:** Use standard blurb settings (see Component Styles above)
### 3-Column Testimonial Grid
**Structure:** 1 Section → 1 Row (1_3, 1_3, 1_3) → Testimonial in each column
**Row Settings:**
“`
width=”90%”
width_tablet=”95%”
width_phone=”95%”
width_last_edited=”on|phone”
max_width=”1200px”
“`
**Testimonial Settings:** Use testimonial card style (see Component Styles above)
### Footer CTA Section
**Structure:** 1 Section (Dark Navy) → 1 Row (narrow) → Text + Signup/Button
**Section Settings:**
“`
background_color=”#08162E”
custom_padding=”60px||60px||true|false”
“`
**Row Settings:**
“`
width=”60%”
width_tablet=”80%”
width_phone=”90%”
width_last_edited=”on|phone”
max_width=”600px”
“`
**Text Settings:**
– H2: White, 500 weight, 38px (desktop), centered
– Body: White 80% opacity, 500 weight, 17px, centered
—
## Responsive Design Rules
### Breakpoints
– **Desktop:** 981px and above
– **Tablet:** 768px – 980px
– **Phone:** 767px and below
### Mobile-First Principles
1. **Always specify responsive sizes** for:
– Font sizes (`_tablet` and `_phone` variants)
– Padding (`custom_padding_tablet`, `custom_padding_phone`)
– Margins (`custom_margin_tablet`, `custom_margin_phone`)
– Widths (`width_tablet`, `width_phone`)
– Image sizes (`image_max_width_tablet`, `image_max_width_phone`)
2. **Text Alignment:**
– Desktop: Left or center (as designed)
– Tablet/Phone: Center for hero sections
“`
text_orientation_tablet=”center”
text_orientation_phone=”center”
text_orientation_last_edited=”on|tablet”
“`
3. **Button Alignment:**
– Desktop: Left or center (as designed)
– Tablet/Phone: Center
“`
button_alignment_tablet=”center”
button_alignment_phone=”center”
button_alignment_last_edited=”on|tablet”
“`
4. **Column Stacking:**
– Divi automatically stacks columns on mobile
– Ensure content reads logically when stacked
### Typography Scaling Pattern
**Standard scaling ratio:**
– Desktop → Tablet: ~85% (e.g., 42px → 36px)
– Tablet → Phone: ~78% (e.g., 36px → 28px)
**Examples:**
– H1: 56px → 42px → 32px
– H2: 42px → 36px → 28px
– H3: 32px → 28px → 24px
– Body: 17px → 16px → 15px
—
## Accessibility Guidelines
### Color Contrast (WCAG AA Compliant)
All color combinations meet WCAG AA standards:
| Foreground | Background | Contrast Ratio | Status |
|————|————|—————-|——–|
| #08162E (Navy) | #FFFFFF (White) | 14.8:1 | ✅ AAA |
| #555555 (Gray) | #FFFFFF (White) | 7.4:1 | ✅ AAA |
| #555555 (Gray) | #F6F8F8 (Light Gray) | 7.2:1 | ✅ AAA |
| #FFFFFF (White) | #08162E (Navy) | 14.8:1 | ✅ AAA |
| #FFFFFF (White) | #D96C2C (Orange) | 4.6:1 | ✅ AA |
### Best Practices
1. **Alt Text:** Always provide descriptive alt text for images
2. **Heading Hierarchy:** Use proper H1 → H2 → H3 structure
3. **Link Text:** Use descriptive link text (avoid “click here”)
4. **Focus Indicators:** Maintain visible focus states on interactive elements
5. **Text Shadows:** Use sparingly, only on hero sections for readability
—
## Common Divi Shortcode Patterns
### Section with Light Gray Background
“`
“`
### Section with White Background
“`
“`
### Section with Dark Navy Background
“`
“`
### Standard Row (90% width)
“`
“`
### Centered H2 Heading
“`
<h2>Your Heading Here</h2>
“`
### Primary CTA Button
“`
“`
### Blurb Module with Icon
“`
”Your
” _builder_version=”4.24.0″ header_font=”Montserrat|500|||||||” header_text_color=”#08162E” header_font_size=”20px” header_font_size_tablet=”18px” header_font_size_phone=”17px” header_font_size_last_edited=”on|phone” body_font=”Montserrat|500|||||||” body_text_color=”#555555″ body_font_size=”15px” body_font_size_tablet=”14px” body_font_size_phone=”14px” body_font_size_last_edited=”on|phone” body_line_height=”1.6em” text_orientation=”center” custom_margin=”||30px||false|false” custom_margin_tablet=”||25px||false|false” custom_margin_phone=”||20px||false|false” custom_margin_last_edited=”on|phone” image_max_width=”70px” image_max_width_tablet=”60px” image_max_width_phone=”55px” image_max_width_last_edited=”on|phone” global_colors_info=”{}”]Your description text here
“`
### Testimonial Module
“`
<p>Your testimonial text here</p>
“`
—
## Quality Checklist
Before publishing any page, verify:
### Typography
– [ ] All headings use Montserrat font
– [ ] H1 is 700 weight, H2/H3 are 500 weight
– [ ] Body text is Montserrat 500 weight
– [ ] Responsive font sizes specified for tablet and phone
– [ ] Line heights set appropriately (1.2em for headings, 1.6em for body)
### Colors
– [ ] Headings on light backgrounds use #08162E
– [ ] Body text on light backgrounds uses #555555
– [ ] Section backgrounds alternate between #F6F8F8, #FFFFFF, and #08162E
– [ ] Primary buttons use #D96C2C background
– [ ] All color combinations meet WCAG AA contrast standards
### Spacing
– [ ] Standard sections use 60px padding (top and bottom)
– [ ] Hero sections use 10vh padding
– [ ] Responsive padding specified for tablet and phone
– [ ] Heading margins follow standard pattern (50px, 40px, 30px)
– [ ] Row widths are 90% (desktop), 90% (tablet), 95% (phone)
### Components
– [ ] Buttons have 50px border radius
– [ ] Cards have 16-20px border radius
– [ ] Box shadows applied to cards (5px vertical, 20-25px blur)
– [ ] Blurb icons sized at 70px (desktop), 60px (tablet), 55px (phone)
– [ ] Video modules have 20px border radius
### Responsive Design
– [ ] All font sizes have tablet and phone variants
– [ ] All padding has tablet and phone variants
– [ ] All margins have tablet and phone variants
– [ ] Text alignment set to center on tablet/phone for hero sections
– [ ] Button alignment set to center on tablet/phone
– [ ] Image sizes have responsive variants
### Accessibility
– [ ] All images have descriptive alt text
– [ ] Heading hierarchy is logical (H1 → H2 → H3)
– [ ] Link text is descriptive
– [ ] Color contrast ratios verified
– [ ] Focus states visible on interactive elements
—
## Common Mistakes to Avoid
### ❌ DON’T:
1. Use Poppins or any font other than Montserrat
2. Use font weights other than 700 (H1), 500 (H2/H3/body), 600 (buttons), 300 (testimonials)
3. Use colors outside the defined palette
4. Forget responsive font sizes, padding, or margins
5. Use inconsistent section padding (always 60px unless hero)
6. Mix different button styles on the same page
7. Use box shadows inconsistently
8. Forget to specify `_last_edited=”on|phone”` for responsive attributes
9. Use hard-coded pixel widths for containers (use percentages)
10. Skip the quality checklist before publishing
### ✅ DO:
1. Always use Montserrat for all text elements
2. Follow the alternating section background pattern
3. Specify responsive sizes for all typography and spacing
4. Use the standard component patterns provided
5. Maintain consistent spacing throughout the page
6. Test on mobile devices before publishing
7. Verify color contrast for accessibility
8. Use semantic HTML (proper heading hierarchy)
9. Keep the design clean and professional
10. Reference this guide for every page update
—
## Quick Reference Card
### Essential Settings at a Glance
**Fonts:**
– All elements: `Montserrat`
– H1: 700 weight | H2/H3: 500 weight | Body: 500 weight | Buttons: 600 weight
**Colors:**
– Primary: `#08162E` (Deep Navy)
– Background: `#F6F8F8` (Light Gray) or `#FFFFFF` (White)
– Text: `#555555` (Medium Gray)
– CTA: `#D96C2C` (Orange)
**Spacing:**
– Section padding: `60px||60px||true|false`
– Hero padding: `10vh||10vh||true|false`
– Row width: `90%` (desktop), `95%` (phone)
– Max width: `1200px`
**Responsive Pattern:**
– Desktop → Tablet: ~85% size reduction
– Tablet → Phone: ~78% size reduction
– Always specify: `_tablet`, `_phone`, `_last_edited=”on|phone”`
**Components:**
– Button radius: `50px`
– Card radius: `16-20px`
– Box shadow: `5px` vertical, `20-25px` blur
– Icon size: `70px` (desktop), `60px` (tablet), `55px` (phone)
—
## Version History
**Version 1.0** (2026-02-09)
– Initial style guide created
– Based on homepage and medication guide page analysis
– Comprehensive typography, color, spacing, and component documentation
– Includes responsive design rules and accessibility guidelines
– Provides Divi shortcode patterns and quality checklist
—
## Support & Questions
For questions about this style guide or to report inconsistencies:
1. Review the medication guide page: https://wpdev.pawtology.com/senior-dog-anxiety/medication-guide/
2. Review the homepage: https://wpdev.pawtology.com/
3. Consult this guide for all styling decisions
4. When in doubt, prioritize consistency over creativity
**Remember:** Consistency is key to maintaining a professional, trustworthy brand presence!