A design system is the documented foundation that makes a digital product visually and behaviourally coherent at scale. It typically comprises three layers: design tokens (the atomic values), components (the reusable building blocks), and patterns (the higher-order combinations). **Design tokens.** The atomic design values: colour palette (primary, secondary, accent, semantic colours for success/warning/error/info, plus neutrals); typography scale (font families, weights, sizes, line heights); spacing scale (consistent multiples like 4px, 8px, 16px, 24px); border radii; shadows; animation timing curves. Tokens are typically defined as CSS custom properties or platform-equivalent variables, so changing the token in one place updates every component using it. **Components.** The reusable UI building blocks: buttons (primary, secondary, ghost; sizes; states), form fields (input, textarea, select, checkbox, radio, file picker), navigation elements (header, footer, sidebar, breadcrumb, tabs), feedback elements (alerts, toasts, modals, tooltips), data display (tables, cards, lists), and brand-specific patterns. Each component has documented variants, states (default, hover, focus, disabled, loading, error), and usage guidelines. **Patterns.** Higher-order combinations: hero sections, feature grids, testimonial layouts, pricing tables, contact forms, FAQ accordions. Patterns combine multiple components in standardized layouts that ensure consistent user experience across pages and over time. **Why design systems matter for Canadian businesses:** **Consistency.** Without a design system, each new page or feature gets styled ad-hoc. Over time, the site develops visual drift — slightly different button styles on different pages, inconsistent spacing, mismatched typography. Design systems prevent drift by making the consistent path the easy path. **Speed.** Once the system is established, building new pages or features is faster because the components already exist. A new landing page can be assembled from documented components in hours rather than designed from scratch. **Accessibility.** Building accessibility into reusable components means every new page automatically inherits accessibility. Without a system, accessibility must be re-implemented on every page, and inevitably some pages fall short. **Brand integrity.** The visual identity is encoded in the system rather than in individual designers' implementations. Brand evolution updates the system tokens once; every page reflects the change automatically. **Long-term cost.** Design systems require upfront investment but reduce long-term cost as the site grows. Sites without design systems typically accumulate technical debt as content scales, until the team eventually rebuilds from scratch — at much higher cost than maintaining a system from the start would have been. **When a design system is overkill:** Single-page brochure sites that won't grow beyond 10 pages don't need a formal design system. The breakeven typically appears around 25–50 pages or when the site supports multiple template types (services, blog, products, locations, case studies, etc.). **Implementation approaches:** - For small Canadian businesses: a lightweight design system documented in Figma plus a CSS variables file in code is sufficient. Component primitives can use a UI library (shadcn-ui, Radix UI, headless UI patterns) with brand tokens applied. - For mid-market businesses: a more substantial component library (Storybook documentation, comprehensive variants and states) becomes worthwhile. - For enterprises: full design system teams with dedicated maintenance, versioning, multi-product support. The critical success factor for any design system is sustained governance — the system only delivers value if new work continues to use it rather than creating one-off implementations. Establish a governance pattern from the start (design review, code review, periodic system audits) or the system will erode within 12–18 months.