Brand Application Series

Website Branding Checklist

Use this comprehensive checklist to ensure your brand identity is consistently applied across your entire website. Part of the Website Branding Guide.

Checklist Progress0%

Logo Application

Logo in header (correct version, proper sizing)

Logo in footer

Favicon created from logo icon

Using correct logo version (full, icon-only, horizontal, vertical)

Clear space requirements maintained

Logo visible and properly sized on mobile

Logo links to homepage

Logo never stretched, distorted, or modified

Color Application

Brand colors defined as CSS variables

Primary colors used for CTAs and key elements

Secondary colors used for backgrounds and accents

Color combinations meet WCAG AA contrast ratios

Colors consistent across all pages

Typography Application

Using brand fonts (web-safe or custom)

Typography hierarchy maintained (H1-H6, body)

Font sizes match brand guidelines

Font weights correct (regular, medium, bold)

Line heights readable (1.5-1.6 for body text)

Links styled with brand colors and hover states

Button text uses brand typography

Typography scales properly on mobile

Font loading optimized (preload, font-display: swap)

Typography consistent across all pages

Imagery & Photography

Consistent photography style

Consistent filters and color treatments

Composition guidelines followed

Images optimized for web (WebP, proper sizing)

Descriptive alt text for accessibility

Homepage Branding

Logo placement correct

Brand colors in hero section

Typography matches brand guidelines

Imagery style is consistent

Value proposition uses brand voice

CTA buttons use brand colors

Navigation uses brand typography

Footer includes logo and brand colors

Mobile version maintains brand consistency

Loading states are on-brand

Error states reflect brand personality

Social proof uses brand styling

Product/Service Pages

Header matches homepage

Product imagery is on-brand

Description uses brand typography

CTA buttons are consistent

Color usage matches guidelines

Typography hierarchy correct

Logo placement is correct

Navigation is consistent

Footer matches site-wide style

Mobile experience is branded

Forms use brand styling

Blog Pages

Blog header matches site branding

Post templates use brand typography

Featured images are on-brand

Typography for readability

Author bylines use brand styling

404 Error Page

404 page uses on-brand messaging

Helpful navigation back to main pages

Reflects brand personality

Forms

Forms use brand colors

Forms use brand typography

Form buttons match brand styling

Error messages use brand voice

Mobile & Responsive

Logo sizing appropriate for mobile

Touch-friendly CTAs (44x44px minimum)

Typography readable without zooming (16px minimum)

Color contrast maintained on small screens

Mobile menu maintains brand styling

Images appropriately sized for mobile

Fast loading times maintain brand perception

Mobile experience feels like same brand as desktop

Next Steps

Review incomplete items and prioritize by impact
Start with high-impact pages (homepage, product pages)
Use the Website Branding Guide for detailed instructions
Set timeline for completing remaining items