Design System & WordPress Guide

Complete reference for Anthony Nitti Executive Coaching website implementation

Color Palette

Primary brand colors and their usage throughout the website.

Executive Navy
#1a365d
Executive Gold
#d4af37
Executive Teal
#2a9d8f
Tropical Blue
#0077be
Tropical Green
#2e8b57
Tropical Coral
#ff7f50
Executive Cream
#f7fafc
Tropical Sand
#f4e4bc

Typography Scale

Font hierarchy and styling for consistent text presentation.

Heading 1 – 3rem

font-size: 3rem; color: var(–executive-navy);

Heading 2 – 2.5rem

font-size: 2.5rem; color: var(–executive-navy);

Heading 3 – 1.8rem

font-size: 1.8rem; color: var(–executive-navy);

Body Text – 1.1rem

font-size: 1.1rem; color: var(–executive-slate); line-height: 1.7;

Small Text – 0.9rem

font-size: 0.9rem; color: var(–executive-slate);

Component Library

Reusable UI components for consistent design implementation.

Buttons
Cards

Feature Card

This is an example of a feature card with icon, title, and description.

Navigation Items

WordPress Implementation Guide

Recommended plugins, theme structure, and optimization strategies.

Essential Plugins

  • Yoast SEO – On-page optimization
  • Advanced Custom Fields – Flexible content
  • WP Rocket – Performance caching
  • Gravity Forms – Lead capture forms
  • Calendly – Booking integration

Custom Post Types

  • Locations – Suburb-specific pages
  • Services – Coaching service types
  • Testimonials – Client success stories
  • Case Studies – Detailed results

Performance Optimization

  • Image optimization (WebP)
  • Lazy loading implementation
  • CDN integration
  • Database optimization
  • CSS/JS minification

Recommended Theme Structure

// Theme Directory Structure
anthony-nitti-theme/
├── assets/
│ ├── css/
│ ├── js/
│ └── images/
├── template-parts/
│ ├── header.php
│ ├── footer.php
│ └── components/
├── inc/
│ ├── cpt/
│ ├── acf/
│ └── functions/
└── page-templates/

Implementation Notes

Important considerations for WordPress development and SEO optimization.

SEO Structure

Maintain the location-based topical authority with proper internal linking between suburb pages and service types. Use schema markup for local business and FAQ content.

Content Management

Implement Gutenberg blocks for flexible page building. Create reusable components for testimonials, service cards, and location badges.

Performance Considerations

Optimize hero images and implement lazy loading. Use CSS variables for theming and consider critical CSS inlining for above-the-fold content.

Mobile Optimization

Ensure all components are mobile-responsive. Test booking forms and navigation on various device sizes. Implement touch-friendly interactions.

CSS Variables Reference

Global CSS custom properties for consistent theming.

/* Root CSS Variables */
:root {
  –executive-navy: #1a365d;
  –executive-gold: #d4af37;
  –executive-teal: #2a9d8f;
  –executive-slate: #4a5568;
  –executive-cream: #f7fafc;
  –tropical-blue: #0077be;
  –tropical-green: #2e8b57;
  –tropical-sand: #f4e4bc;
  –tropical-coral: #ff7f50;
  –tropical-dark: #1a3c40;
}

Next Steps for WordPress Development

Implementation roadmap for converting static HTML to WordPress.

  1. Set up WordPress development environment with local server
  2. Create custom theme based on this design system
  3. Implement custom post types for locations and services
  4. Set up Advanced Custom Fields for flexible content management
  5. Convert components to Gutenberg blocks for easy page building
  6. Implement SEO structure with proper schema markup
  7. Set up performance optimization and caching
  8. Create content migration plan from HTML to WordPress
  9. Implement analytics and tracking for conversion monitoring
  10. Set up security and backup protocols