1. Critical Rule #1: Color Overrides

Every color declaration in your CSS must include !important. No exceptions. This is what caused us the most trouble, and it’s the easiest mistake to make.

color: #ffffff;

color: #ffffff !important;

Where to apply !important:

• All text colors
• All background colors
• All border colors
• Hover state colors
• Button colors
• Link colors

2. Readability & Contrast

Dark text on dark backgrounds is unreadable. This seems obvious, but it’s easy to miss when you’re focused on other aspects.

3. Hero Section Formula

Hero sections need five separate text-align rules to work correctly. This is not negotiable.

.hero-section {
    text-align: center;
    /* Plus background image and overlay */
}

.hero-content {
    text-align: center !important;
    margin: 0 auto !important;
}

.hero-title {
    text-align: center !important;
    margin: 0 auto 20px !important;
    color: #ffffff !important;
}

.hero-subtitle {
    text-align: center !important;
    margin: 0 auto 30px !important;
    color: #ffffff !important;
}

Background Image Pattern:

background-image: linear-gradient(
    rgba(0, 0, 0, 0.65), 
    rgba(0, 0, 0, 0.65)
), url('your-image-url.jpg');
background-size: cover;
background-position: center;

4. Button Styling Standards

Use solid colors for buttons. Gradients look amateurish. Keep it professional.

.btn-primary {
    display: inline-block;
    padding: 15px 40px;
    background: #667eea !important;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: #5568d3 !important;
    transform: translateY(-2px);
}

5. Navigation Bar Standards

Start every page with a white navigation bar. 150px tall, logo on the left, clean and simple.

.navigation-bar {
    background: #ffffff !important;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
}

.nav-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
}

.nav-logo img {
    height: 80px;
    width: auto;
}

6. Section Layouts

Standard section structure with consistent padding and max-width containers:

.section {
    padding: 80px 40px;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2c2c2c !important;
    margin-bottom: 20px;
    text-align: center;
}

7. Two-Column Layouts

Perfect for text + image combinations. 60/40 split or equal columns work well.

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.column-image img {
    width: 100%;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
    }
}

8. Card Grid Patterns

Three-column grids for features, services, or benefits. Responsive and clean.

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    padding: 30px;
    background: #f8f9fa !important;
    border-radius: 8px;
    text-align: center;
}

9. Typography Hierarchy

• H1 (Hero): 3.2rem, bold, white on dark
• H2 (Section Titles): 2.5rem, bold, dark (#2c2c2c)
• H3 (Card Titles): 1.5rem, semibold
• Body: 1.05-1.2rem, regular weight
• Line Height: 1.6-1.8 for readability

10. Color Palette System

• Primary Brand: #667eea (purple-blue)
• Primary Dark: #764ba2 (darker purple)
• Text Dark: #2c2c2c or #333333
• Text Medium: #555555
• Text Light: #888888
• Background Light: #f8f9fa
• Border: #e0e0e0
• White: #ffffff

11. Responsive Design

Always include mobile breakpoints. Test on different screen sizes.

@media (max-width: 768px) {
    .two-column {
        grid-template-columns: 1fr;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .card-grid {
        grid-template-columns: 1fr;
    }
}

12. Canvas Mode Settings

When creating pages with Spence Style Manager, always use these settings:

canvas_mode: true
hide_header: true
hide_footer: true
spence_mcp_position: 'before' (default)

This gives you complete control without theme interference.

13. Image Sourcing Workflow

When you need images for pages:

1. Generate AI images with ML Image Editor when possible
2. Use MediaHub to search Google Images as backup
3. Import images to WordPress media library
4. Use full URLs in your HTML (not relative paths)
5. Optimize for web (compressed, appropriate dimensions)

For hero backgrounds: Use high-resolution images (1920×1080 minimum)

For content images: 600-800px width is usually sufficient

14. Complete Workflow Checklist

Follow this workflow for every page:

1. Understand the purpose and audience
2. Gather content and personalization details
3. Plan the structure (hero, sections, CTA)
4. Source/generate images
5. Write HTML structure first
6. Add CSS styling with !important on colors
7. Set canvas mode, hide header/footer
8. Test on desktop and mobile
9. Review contrast and readability
10. Publish and provide link

15. Common Mistakes to Avoid

16. Personalization Tips

What makes a page feel custom and personal:

• Use specific project names and addresses
• Reference actual neighborhoods and locations
• Include real numbers (prices, dates, statistics)
• Mention specific accomplishments
• Use industry-specific terminology
• Tell their unique story
• Don’t just fill templates—make it feel crafted for them