Skip to main content

Create engaging, inclusive and consistent digital experiences quickly

CivicTheme is an open source, inclusive and component-based design system. It was created so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences.

More about our mission

Sunset in the mountains

Start designing

Start designing your CivicTheme web project with Figma.

Start building

Start building your web project with CivicTheme codebase in GitHub.

GOLD/AuG-Design System compliance

View a full listing of our component compliance and rationale.

WCAG assessments

See compliance statements for each component to WCAG 2.2.

Getting started with CivicTheme

Screenshot of CivicTheme

What is CivicTheme?

Theme thumbnail

How to use CivicTheme

Screenshot of CivicTheme

Documentation

CivicTheme showcase

Australian Parliament House at night

Government template site

The Department of Citizens website demonstrates common government content across areas like programs, services, policies and consultations.

Graduating student in cap and gown blowing confetti

Higher education template site

The My University website shows a sample university website focusing on university-centered design and content.

Slide 1

Features

User-centred design

User-centred design is imperative to the development process.

Inclusive and accessible — WCAG 2.2 AA compliant

Built and assessed to comply with WCAG accessibility standards 2.2 AA out-of-the-box.

Technology agnostic

A neutral design system that’s not tied to a specific technology, framework, platform or system.

Ready for government

CivicTheme also aligns to, and facilitates compliance with, many policies of leading digital nations. These policies include open source, unified government services, and whole-of-government architecture patterns.

An illustration of the people launching a rocket ship

CivicTheme showcase spotlight

The BenefitMe website combines CivicTheme and Rules as Code (RaC), providing a website where NZ citizens can check their eligibility for social security benefits.

BenefitMe Logo

Resources

Background swirl

Developers

Background swirl

Content authors and administrators

Background swirl

Accessibility analysts

Background swirl

Contributing back to the community

Sign up

Sign up for news and updates from our agency.
Sign up