Foundations The foundations of the design system define the core visual language and principles that ensure consistency across all Government of Alberta digital services.

Design principles

Our design principles guide every decision we make when building government services. They help teams create experiences that are consistent, accessible, and user-centered.
  • Start with user needs: Design services that meet the needs of Albertans, not the needs of government processes.
  • Be inclusive: Create services that work for everyone, regardless of ability, device, or connectivity.
  • Keep it simple: Remove complexity and help users accomplish their tasks with minimal effort.
  • Be consistent: Use familiar patterns so users can transfer their knowledge between services.

Typography

Typography creates hierarchy and rhythm in our interfaces. We use the Acumin Pro font family for headings and body text across all services.

Type scale

Our type scale is based on a modular scale that ensures consistent proportions between heading levels and body text. Use these sizes through design tokens:
  • --goa-typography-heading-xl - Page titles
  • --goa-typography-heading-l - Section headings
  • --goa-typography-heading-m - Subsection headings
  • --goa-typography-body-l - Lead paragraphs
  • --goa-typography-body-m - Body text
  • --goa-typography-body-s - Captions and labels

Color

Our color palette is designed to meet WCAG 2.1 AA contrast requirements while maintaining the Government of Alberta's visual identity.

Color categories

  • Brand colors: The primary blue represents the Government of Alberta brand.
  • Interactive colors: Used for links, buttons, and focusable elements.
  • Status colors: Communicate success, warning, error, and information states.
  • Greyscale: Used for text, borders, and backgrounds.
Color accessibility All color combinations in the design system have been tested to ensure they meet or exceed WCAG 2.1 AA contrast ratios. Interactive elements maintain a minimum 4.5:1 contrast ratio with their backgrounds.

Spacing

Consistent spacing creates visual rhythm and helps users scan content. Our spacing scale uses an 8-pixel base unit.

Spacing tokens

Use these tokens instead of hard-coded pixel values:
  • --goa-space-2xs - 4px (0.25rem)
  • --goa-space-xs - 8px (0.5rem)
  • --goa-space-s - 12px (0.75rem)
  • --goa-space-m - 16px (1rem)
  • --goa-space-l - 24px (1.5rem)
  • --goa-space-xl - 32px (2rem)
  • --goa-space-2xl - 48px (3rem)
  • --goa-space-3xl - 64px (4rem)

Accessibility

All Government of Alberta digital services must meet WCAG 2.1 Level AA requirements. The design system is built with accessibility as a core requirement, not an afterthought. We are actively updating components to meet WCAG 2.2 requirements as they become the standard for government digital services.