(843) 851-2417
Book My Appointment
Foundation Family Chiropractic Brand Guide v1.5

Brand Style Guide

Visual Identity & Design Standards

v1.2 | January 2026

Contents

  1. Brand Overview
  2. Brand Story & Positioning
  3. Brand Personality & Voice
  4. Logo Usage
  5. Color Palette
  6. Typography System
  7. Buttons & CTAs
  8. Photography & Imagery
  9. Accessibility Rules
  10. Do's and Don'ts
  11. Service Icons

Brand Overview

Company Information

Business Name Foundation Family Chiropractic
Service Area Charleston Low Country (Summerville, Mt Pleasant, Carnes Crossroads)
Industry Family Chiropractic Care
Specialties Prenatal, Pediatric, Family Wellness, SoftWave Therapy
Website foundationfamilychiropractic.com

Mission Statement

Brand Personality

Family-centered, professional, natural, and approachable. We're the trusted wellness partner who helps families thrive through compassionate, science-backed chiropractic care. Warm but knowledgeable. Nurturing but evidence-based.

Core Values

Pending: Core values to be defined with client input.

Brand Story & Positioning

Brand Positioning

Foundation Family Chiropractic positions itself as the trusted guide for Charleston-area families seeking natural, root-cause healthcare. Unlike conventional symptom-focused care, FFC uses objective neurological testing and specialized techniques to deliver measurable health improvements for the whole family.

Target Audience

Primary: Expectant mothers and parents of young children (25-45), predominantly female (~70%+), middle to upper-middle class. Summerville, Mt Pleasant, and Charleston metro area residents, with approximately 40% military families. They seek natural, medication-free healthcare and value expertise with compassion.

Key Differentiators

  • Webster Technique certified (all doctors)
  • CACCP certified pediatric specialists (Dr. Kyle, Dr. Molly)
  • INSiGHT neurological scanning technology
  • Partnership with Charleston Birth Place
  • SoftWave Therapy for accelerated healing
  • Three convenient Lowcountry locations (Summerville, Mt Pleasant, Carnes Crossroads)

StoryBrand Framework

The Hero (Customer)

Families seeking natural healthcare solutions - expectant mothers wanting healthy pregnancies, parents concerned about their children's wellness, and individuals frustrated with symptom-only treatment.

The Problem

  • External: Pain, pregnancy discomfort, children's recurring health issues
  • Internal: Feeling unheard by traditional medicine, worried about family health, frustrated by lack of answers
  • Philosophical: People shouldn't have to rely on medication when natural solutions exist

The Guide (FFC)

Foundation Family Chiropractic understands the frustration of seeking answers for your family's health. With specialized training, advanced technology, and genuine compassion, they partner with families to address root causes and deliver measurable improvement.

The Plan

  1. Book My Appointment — Schedule your initial consultation
  2. Get Evaluated — Comprehensive examination with INSiGHT scanning
  3. Start Your Care Plan — Personalized, measurable path to wellness

Success

Pain-free living, healthy pregnancy and birth, thriving children, measurable neurological improvements, and a family that functions at its best.

Brand Personality & Voice

Brand Personality Traits

  • Family-Centered — Warm, nurturing environment for all ages
  • Professional — Evidence-based care with advanced technology
  • Natural/Wellness — Drug-free, root-cause approach to health
  • Approachable — Honest, compassionate communication
  • Community-Focused — Strong ties to Charleston Birth Place and local families

Brand Voice

FFC's voice is warm, knowledgeable, and empowering—like a trusted friend who happens to be a health expert. We educate without condescension and encourage without pressure.

Voice Characteristics

We Are We're Not
Warm & Nurturing Clinical or Sterile
Knowledgeable & Confident Condescending or Preachy
Empathetic & Understanding Dismissive of Concerns
Encouraging & Empowering Pushy or Sales-focused
Straightforward & Honest Overpromising Results

Terminology

Use This Not This
Practice members Patients
Wellness / Health optimization Treatment / Fixing
Root cause Symptoms
Family / Your loved ones Clients

Color Palette

v1.1 Update: Burnt Orange (#ed7200) removed from palette — it was defined but never used. Palette now contains only actively-used colors.

Color Strategy

Following the 60-30-10 rule for visual hierarchy:

  • 60% Primary: White, Warm Cream (#fff8ef), neutrals
  • 30% Secondary: Olive Sage (#555c49), Sage Light (#c9d29c)
  • 10% Accent: Charcoal buttons (#333333)

Primary Brand Colors

Olive Sage

HEX: #555c49

RGB: 85, 92, 73

Token: --ffc-primary

Usage: Primary backgrounds, footer, section headers

Sage Light

HEX: #c9d29c

RGB: 201, 210, 156

Token: --ffc-primary-light

Usage: Accent backgrounds, highlights

⚠️ Black text only

Warm Cream

HEX: #fff8ef

RGB: 255, 248, 239

Token: --ffc-cream

Usage: Hero card backgrounds, warm sections

Supporting Colors

Sage Muted

HEX: #798575

Token: --ffc-primary-muted

Usage: Subtle accents

Light Sage

HEX: #e6ead1

Token: --ffc-sage-light

Usage: Very light backgrounds

Warm Taupe

HEX: #eae4db

Token: --ffc-taupe

Usage: Alternate warm backgrounds

Neutral Colors

Charcoal

HEX: #333333

Token: --ffc-charcoal

Usage: Button backgrounds (default)

Black

HEX: #000000

Token: --ffc-black

Usage: Primary text, headers

White

HEX: #FFFFFF

Token: --ffc-white

Usage: Backgrounds, text on dark sections

Typography System

v1.1 Update: Consolidated to 2-font system. Barlow Condensed removed — Barlow Condensed now handles all headline levels for improved performance and consistency.

2-Font System

Display/Headlines: Barlow Condensed (bold, impactful, condensed for headlines)
Body/Everything Else: Open Sans (clean, readable, versatile)

Primary Typeface: Barlow Condensed

Font Family Barlow Condensed, Helvetica, Arial, sans-serif
Weights Used Medium (500), Bold (700)
Use Case All headlines (H1, H2, H3), display text
Token --ffc-font-display

Body Typeface: Open Sans

Font Family Open Sans, Helvetica, Arial, sans-serif
Weights Used Regular (400), Medium (500), Semi-Bold (600)
Use Case Body text, buttons, card content, names, labels
Token --ffc-font-body

Google Fonts Link

Type Scale (8pt Grid Aligned)

Element Font Size Weight Line Height
H1 (Hero) Barlow Condensed 40px 700 1.1
H2 (Section) Barlow Condensed 32px 700 1.1
H3 (Subsection) Barlow Condensed 24px 500 1.2
H4 (Card Title) Open Sans 16px 600 1.4
Body Open Sans 16px 400 1.6
Buttons Open Sans 16px, uppercase 500 1
Small Text Open Sans 14px 400 1.5

Type Examples

H1 — Hero Headlines

Summerville Area Chiropractor Supports Your Family's Health

H2 — Section Headings

Our Services

H3 — Sub-sections

Pregnancy Chiropractic Care

Body Text

Foundation Family Chiropractic provides comprehensive care for the whole family. From prenatal support to pediatric wellness, our doctors use advanced technology and proven techniques to help your family thrive.

Font Loading Best Practices

  • Use font-display: swap to prevent invisible text during load
  • Preload critical fonts for above-fold content
  • Limit to 2 font families for performance

Buttons & CTAs

Primary CTA Button

The charcoal primary button is the main button style. Reserve for primary calls-to-action: "Book My Appointment", "Book My Appointment Now", "Schedule Today".

Book My Appointment

Button Specifications

Background (Default)#333333 (--ffc-charcoal)
Background (Hover)#555c49 (--ffc-primary)
Text Color#FFFFFF
FontOpen Sans, Medium (500)
Size16px, uppercase
Padding16px vertical, 24px horizontal (8pt grid)
Border Radius100px (pill shape)
Hover EffectBackground to Olive Sage + transform: scale(1.02)
Focus State3px solid Olive Sage outline, 2px offset

Button Rules

  • One primary CTA per section maximum
  • Button text should be action-oriented ("Book My Appointment" not "Submit")
  • Buttons always transition to Olive Sage on hover
  • Touch targets minimum 48px height for mobile (8pt grid)
  • Standardize CTA language to "Book My Appointment" across site
  • Use transform: scale() for hover effects, not font-size changes

CTA Hierarchy

Type Examples
Primary CTA "Book My Appointment", "Book My Appointment Now"
Secondary CTA "Meet Our Doctors", "Learn More", "View Our Services"
Supportive "Contact Us", "New Practice Members"

Hyperlink Specifications

Color (Default)#555c49 (--ffc-primary)
Color (Hover)#333333 (--ffc-charcoal)
Font Weight600 (semibold)
Text Decorationnone (no underlines)

Hyperlink Rules

  • Use heavier font weight (600) instead of underlines for visual distinction
  • Color changes to Charcoal on hover for feedback
  • Avoid generic link text like "Click Here", "Learn More", or "Read More"
  • Use action-oriented, descriptive link text (e.g., "Explore Prenatal Care")
  • Links on dark backgrounds should use #FFFFFF with opacity change on hover

Photography & Imagery

Subject Matter

  • Families: Real patients and families in the practice
  • Team: Dr. Kyle, Dr. Molly, and staff in authentic settings
  • Facility: Building exteriors, treatment rooms
  • Lifestyle: Pregnant mothers, happy babies, active families

Photography Style

  • Warm, natural lighting — not clinical or sterile
  • Authentic — real patients, real moments
  • Earth tones — sage greens, warm creams complement brand
  • Lifestyle focus — show health outcomes, not just treatments

Image Treatment

Border Radius8px (--ffc-radius-sm) — 8pt grid aligned
Hero Card Radius40px (--ffc-radius-lg)
Decorative Shadow (Desktop)-64px offset in Olive Sage (8pt grid)
Max File SizeUnder 200KB each
FormatWebP preferred, JPEG fallback
Alt TextRequired on ALL images

Accessibility Rules

WCAG AA Compliance Required: All text must meet minimum contrast ratios. Failure to comply creates legal and usability risks.

Color Contrast Requirements

Text Size Minimum Ratio WCAG Level
Body text (under 16px) 4.5:1 AA (Required)
Large text (16px+ bold or 24px+) 3:1 AA (Required)
All text (enhanced) 7:1 AAA (Recommended)

Approved Text/Background Combinations

Text Background Ratio Status
White Charcoal (#333333) 12.6:1 ✓ AAA
White Olive Sage (#555c49) 5.8:1 ✓ AA
Black Warm Cream (#fff8ef) 19.4:1 ✓ AAA
Black Sage Light (#c9d29c) 12.6:1 ✓ AAA
Charcoal White 12.6:1 ✓ AAA

⚠️ Forbidden Combinations

Never use these combinations:
  • ❌ White text on Sage Light (#c9d29c) — Ratio: 1.67:1 (FAIL)
  • ❌ White text on Warm Taupe (#eae4db) — Ratio: 1.29:1 (FAIL)
  • ❌ Olive Sage text on Sage Light — Ratio: 2.88:1 (FAIL)

Focus States

All interactive elements must have visible focus indicators:

Focus Ring3px solid Olive Sage (#555c49)
Offset2px (prevents overlap)
CSS Token--focus-ring, --focus-offset

Additional Requirements

  • All images must have descriptive alt text
  • Decorative images use alt=""
  • Touch targets minimum 48px × 48px
  • Animations respect prefers-reduced-motion
  • Color alone never conveys meaning
  • Link text is descriptive (never "click here")

Do's and Don'ts

✓ BRAND DO'S

  • Use warm, family-focused imagery
  • Maintain consistent voice across all touchpoints
  • Use "practice members" instead of "patients"
  • Emphasize natural, root-cause approach
  • Show real photos of doctors and families
  • Use Charcoal for primary CTAs
  • Standardize to "Book My Appointment"
  • Use Barlow Condensed for all headlines
  • Use Open Sans for body text and buttons
  • Follow the 8pt grid spacing system
  • Use design tokens for all values
  • Check contrast ratios on all text
  • Include visible focus states

✗ BRAND DON'TS

  • Use clinical or sterile imagery
  • Sound corporate or impersonal
  • Use colors outside the approved palette
  • Use white text on light backgrounds
  • Overpromise results
  • Make FFC the hero instead of the family
  • Use "patients" (say "practice members")
  • Use more than 2 font families
  • Stretch, crop, or recolor the logo
  • Use inline styles instead of global CSS
  • Use magic numbers instead of 8pt grid tokens
  • Use font-size changes for hover effects

Service Icons

Custom SVG icons will be created to replace current PNG icons for service cards and marketing materials.

Coming Soon
Service icons will be designed as inline SVGs with consistent styling.

Current Icons (To Be Replaced)

Service Current File
General Chiropractic soreback.png, chiropractic.png
Pregnancy Care pregnant.png
Pediatric Care baby.png
Postpartum Care postpartum.png
SoftWave Therapy sfotwave.png

Planned Icon Specifications

StyleClean, professional line art
Stroke2px weight, rounded caps
Primary ColorOlive Sage (#555c49)
Hover ColorSage Light (#c9d29c)
Display Size64px standard, 48px mobile (8pt grid)
FormatInline SVG
Foundation Family Chiropractic Logo

Foundation Family Chiropractic Brand Guide v1.5

Created by Modern Pixel | January 2026

Questions? Contact [email protected]

Design System Contents

  1. Design Philosophy
  2. 8pt Grid System
  3. Spacing System
  4. CSS Design Tokens
  5. Layout Principles
  6. Component Specifications
  7. Third-Party Widget Styling
  8. Animation & Transitions
  9. Accessibility Standards
  10. Page Audit Checklist

Design Philosophy

Every design decision should support FFC's brand positioning as a warm, trustworthy, family-centered wellness practice. The visual system creates a cohesive experience that feels nurturing yet professional.

Core Principles

Warmth + Professionalism

Nurturing without being soft. Clinical expertise without being cold. Balance earth tones with clean modern design.

Family-First Focus

Every element should resonate with families. Show real people, real results, real connection.

Conversion-Focused

Guide users naturally toward booking. One clear CTA per section. Remove friction from the journey.

8pt Grid System

All spacing and sizing use multiples of 8px for consistent rhythm and easier implementation.

Condensed Layouts

Prefer tighter section spacing for better content flow. Not cluttered, but not wastefully sparse.

Performance as Trust

Fast loading builds confidence. 2 fonts max, optimized images, minimal CSS. Target 90+ PageSpeed.

Mobile-First

Design for thumb-reach first. Touch targets minimum 48px (8pt grid aligned). Responsive at all breakpoints.

Global Over Inline

Use global CSS classes and tokens. Avoid inline styles. Maintain single source of truth.

8pt Grid System

v1.1 Update: All spacing values now follow strict 8pt grid. This ensures visual consistency and easier design-to-development handoff.

What is the 8pt Grid?

The 8pt grid is a spacing system where all values are multiples of 8 pixels:

  • Base unit: 8px
  • Scale: 8, 16, 24, 32, 40, 48, 56, 64, 72, 80...
  • Half-step: 4px allowed for fine adjustments only

Why 8pt Grid?

  • Consistency: Creates predictable visual rhythm across all pages
  • Simplicity: Easy math — everything divisible by 8
  • Retina-Ready: Works perfectly on all screen densities
  • Collaboration: Designers and developers speak the same language

8pt Grid Scale

4px
half
8px
1×
16px
2×
24px
3×
32px
4×
40px
5×
48px
6×
56px
7×
64px
8×
72px
9×
80px
10×

Spacing System

v1.1 Update: Condensed spacing is now the default. Sections are tighter for improved content flow without feeling cluttered.

Spacing Tokens (8pt Grid)

Token Value 8pt Multiple Usage
--space-1 4px 0.5× Fine adjustments only
--space-2 8px 1× Tight gaps, icon spacing
--space-3 16px 2× Standard padding, margins
--space-4 24px 3× Card padding, form spacing
--space-5 32px 4× Section inner padding
--space-6 40px 5× Standard section padding
--space-8 48px 6× Between-section gaps
--space-10 56px 7× Large section padding
--space-12 64px 8× Hero sections
--space-14 72px 9× Major sections
--space-16 80px 10× Feature sections

Section Spacing (Condensed Default)

Context Padding Token
Hero sections 64px top/bottom --space-12
Feature sections 56px top, 40px bottom --space-10 / --space-6
Standard sections 40px top/bottom --space-6
Between sections (max) 48px --space-8
Card padding 24px --space-4
Button padding 16px × 24px --space-3 × --space-4
Spacing Philosophy: FFC prefers condensed layouts that keep content flowing smoothly. Sections should feel connected, not isolated by excessive whitespace. This creates a warmer, more engaging experience.

CSS Design Tokens

Use these CSS variables throughout. Never hardcode values. Current file: ffc-global-v2.1.css

Colors (Burnt Orange Removed)

  • --ffc-primary#555c49
  • --ffc-primary-light#c9d29c
  • --ffc-primary-muted#798575
  • --ffc-sage-light#e6ead1
  • --ffc-cream#fff8ef
  • --ffc-taupe#eae4db
  • --ffc-charcoal#333333
  • --ffc-near-black#141414
  • --ffc-black#000000
  • --ffc-white#ffffff

Typography (2-Font System)

  • --ffc-font-display'Barlow Condensed', sans-serif
  • --ffc-font-body'Open Sans', sans-serif
  • --ffc-font-normal400
  • --ffc-font-medium500
  • --ffc-font-semibold600
  • --ffc-font-bold700

Font Sizes (8pt Grid Aligned)

  • --ffc-text-sm14px
  • --ffc-text-base16px
  • --ffc-text-lg16px
  • --ffc-text-xl20px
  • --ffc-text-2xl24px
  • --ffc-text-3xl32px
  • --ffc-text-4xl40px
  • --ffc-text-5xl48px

Spacing (8pt Grid)

  • --space-14px (half-step)
  • --space-28px
  • --space-316px
  • --space-424px
  • --space-532px
  • --space-640px
  • --space-848px
  • --space-1056px
  • --space-1264px
  • --space-1472px
  • --space-1680px

Border Radius (8pt Grid)

  • --ffc-radius-sm8px
  • --ffc-radius-md16px
  • --ffc-radius-lg40px
  • --ffc-radius-full100px (pill buttons)

Line Heights (Unitless)

  • --ffc-leading-tight1.1
  • --ffc-leading-snug1.2
  • --ffc-leading-normal1.4
  • --ffc-leading-relaxed1.6

Focus States

  • --focus-ring3px solid #555c49
  • --focus-offset2px

Layout Principles

Container Widths (8pt Grid)

ContainerMax WidthUsage
Small640pxText-heavy content, forms
Medium768pxStandard content
Large1024pxService grids
XL1280pxWide layouts
2XL1440pxMaximum content width

Section Structure

  • Hero sections: 64px top/bottom padding
  • Feature sections: 56px top, 40px bottom padding
  • Standard sections: 40px top/bottom padding
  • Maximum gap between sections: 48px
  • Alternate background colors for visual rhythm (white / cream / sage)
  • One clear CTA per section maximum

Decorative Elements

Offset Shadow (Desktop)-64px horizontal, -64px vertical in Olive Sage (8pt grid)
Offset Shadow (Mobile)Removed (0px)
Tree IconUsed as accent between content sections

Component Specifications

Hero Card

Background#fff8ef (--ffc-cream)
Border Radius40px (--ffc-radius-lg)
Width25vw (desktop), 90vw (mobile)
Padding24px (8pt grid)
CSS Class.ffc-hero-card

Hero Gradient Overlay

Approved gradient for hero sections with background images. Creates readable text area while revealing imagery on the right.

Direction90deg (left to right)
Left Edge (0%)rgba(255,255,255,0.9) - 90% white
25%rgba(255,255,255,0.85) - 85% white
35%rgba(255,255,255,0.82) - 82% white
54%rgba(255,255,255,0.15) - 15% white (fade begins)
56%rgba(255,255,255,0.05) - 5% white
Right Edge (80-100%)rgba(255,255,255,0) - Fully transparent
CSS Variable--hero-gradient
background: linear-gradient(90deg, 
  rgba(255,255,255,0.9) 0%, 
  rgba(255,255,255,0.85) 25%,
  rgba(255,255,255,0.82) 35%, 
  rgba(255,255,255,0.15) 54%,
  rgba(255,255,255,0.05) 56%,
  rgba(255,255,255,0) 80%);

Image with Shadow

Border Radius8px (8pt grid)
Shadow (Desktop)-64px -64px 0px -40px #555c49 (8pt grid)
Shadow (Mobile)None
CSS Class.ffc-image-shadow

Buttons

Background (Default)#333333
Background (Hover)#555c49
TextWhite, Open Sans, 16px, Medium, Uppercase
Padding16px × 24px (8pt grid)
Border Radius100px (pill)
Min Height48px (touch target, 8pt grid)
Hover Effecttransform: scale(1.02)
Focus State3px solid Olive Sage, 2px offset
CSS Class.ffc-btn-primary

Cards

BackgroundWhite
Border Radius8px (8pt grid)
Padding24px (8pt grid)
Shadow--ffc-shadow-md
Hover EffectLift -4px, shadow increase
CSS Class.ffc-card

Forms

Input Padding16px (8pt grid)
Border Radius8px (8pt grid)
Focus StateOlive Sage border + 3px ring
Min Height48px (touch target, 8pt grid)

Third-Party Widget Styling

When integrating third-party widgets (reviews, scheduling, etc.), apply these brand-consistent overrides.

Elfsight Reviews Widget

Widget TypeAll-in-One Reviews (Slider)
Card Background#e6ead1 (--ffc-sage-light)
Card Border1px solid #c9d29c (--ffc-primary-light)
Card Border Radius8px (--radius-sm)
TypographyOpen Sans (--font-body)
Reviewer Name16px, 600 weight, Black
Review Text15-16px, 400 weight, Muted Gray
Star Color#555c49 (--ffc-primary)
Navigation ArrowsOlive Sage background, white icon

Elfsight CSS Overrides

/* Elfsight Reviews - Brand Overrides */
.eapps-google-reviews-review {
  background: var(--ffc-sage-light) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--ffc-primary-light) !important;
}

.eapps-google-reviews-review-author-name {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--ffc-black) !important;
}

.eapps-google-reviews-review-text {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--ffc-text-muted) !important;
}

.eapps-google-reviews-review-stars svg {
  fill: var(--ffc-primary) !important;
}

General Widget Guidelines

  • Always use Light Sage (#e6ead1) for card backgrounds instead of white
  • Apply Open Sans font family to all text elements
  • Use Olive Sage (#555c49) for accent colors and interactive elements
  • Maintain 8px border radius on cards
  • Ensure sufficient contrast for accessibility
  • Configure widgets to pull from all location Google Business Profiles

Animation & Transitions

Transition Timing

Fast150ms ease
Base300ms ease
Slow500ms ease

Hover Effects

  • Buttons: Background to Olive Sage + transform: scale(1.02)
  • Cards: Lift -4px + shadow increase
  • Links: Color change only
  • Icons (future SVGs): Color to Sage Light + transform: scale(1.1)
Important: Never use font-size changes for hover effects — they cause layout shift. Always use transform: scale() instead.

Reduced Motion

Respect prefers-reduced-motion media query. Include this CSS:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Accessibility Standards

WCAG 2.1 AA Compliance

  • Color contrast: 4.5:1 minimum for body text
  • Color contrast: 3:1 minimum for large text (16px+)
  • Focus indicators visible on all interactive elements
  • Alt text on all meaningful images
  • Decorative images have empty alt=""
  • Proper heading hierarchy (H1 → H2 → H3)
  • Skip-to-content link for keyboard users
  • Touch targets minimum 48px (8pt grid aligned)
  • Form labels associated with inputs
  • No content conveys meaning by color alone

Screen Reader Compatibility

  • Landmark regions defined (header, main, footer)
  • Link text is descriptive (not "click here")
  • ARIA labels used appropriately
  • Tables have proper headers

Page Audit Checklist

Apply to every page before launch. Target: 95%+ compliance. v1.1 additions in bold.

Design System Checks (NEW)

# Checkpoint Criteria
1 8pt Grid Compliance All spacing values are multiples of 8px
2 2-Font System Only Barlow Condensed + Open Sans used
3 Color Palette Only approved palette colors used (no orange)
4 Contrast - Dark BG White text only on Olive Sage/Charcoal/darker
5 Contrast - Light BG Black/Charcoal text on Sage Light/Cream/Taupe
6 Focus States All interactive elements have visible focus ring
7 Button Hover Uses transform:scale, not font-size change
8 Section Spacing Condensed defaults (64px hero, 40px standard)
9 Touch Targets Buttons/links minimum 48px height
10 Reduced Motion Animations respect prefers-reduced-motion

Quick Reference (Full Audit)

Category Points Key Focus
SEO Meta 7 Title, meta desc, keywords
Header/Hero 6 H1, hierarchy, hero CTA
Typography 8 2 fonts only, sizes, weights
Colors 5 Approved palette, contrast
Buttons 6 CTA style, hover, focus states
Images 7 Alt text, WebP, compression
Spacing 5 8pt grid, condensed defaults
Mobile 4 Layout, 48px touch targets
Content 2 No placeholders, proofread
Design System 10 New v1.1 checks above

Must-Pass Items

  • ✓ SSL certificate valid
  • ✓ Forms submit to SKED
  • ✓ No broken links (404s)
  • ✓ Mobile layout functional
  • ✓ Color contrast meets WCAG AA
  • ✓ H1 present on every page
  • ✓ No placeholder content
  • ✓ 8pt grid spacing used
  • ✓ Only 2 fonts (Barlow + Open Sans)
  • ✓ Focus states visible
Foundation Family Chiropractic Logo

FFC Design System v1.2

Created by Modern Pixel | January 2026

Questions? Contact [email protected]