Design: Brand Consistency (Colors, Typography, Logo)

  Property: ChurchWiseAI   Category: UI / Visual Tier: all Persona: designer Touchpoint: all pages

Preconditions

• Design tokens/brand guidelines defined
• Tailwind config or CSS vars match brand

Steps

#	Action	Expected Result
1	Verify primary color usage	All CTAs, buttons use brand primary color. Consistent across pages.
2	Check logo placement	Logo in header on all pages. Consistent size and placement (left-aligned or centered).
3	Verify typography	All headings use brand font (Poppins or configured). Consistent font weight (bold, semibold).
4	Check button styles	All buttons use consistent styling. Hover states work. Disabled state visible.
5	Verify color contrast	Text on backgrounds meets WCAG AA contrast (4.5:1 for body, 3:1 for large text).
6	Check spacing consistency	Padding, margin follow grid (8px, 16px, 24px units). No random spacing.
7	Verify icon usage	All icons use consistent set (Lucide or configured). Sizes consistent (24px, 32px).
8	Check link styling	Links underlined or color-differentiated. Hover state clear.

Known Failure Modes

• Colors inconsistent — looks unprofessional, breaks brand recognition
• Typography mismatched — difficult to read, unprofessional
• Logo missing or wrong size — brand visibility lost
• Contrast too low — inaccessible for vision-impaired

References

• Playwright spec: e2e (visual regression)
• Code files:
  • tailwind.config.js
  • src/lib/theme.ts
  • src/app/layout.tsx
  • src/components/Header.tsx

Notes

Visual consistency and brand adherence. Brand recognition and trust depend on consistent colors, fonts, and styling. Design system maintenance prevents visual debt. Run after design system updates or major refactor.