Skip to main content

CivicTheme Overview for the Cardano Community

Are you a Cardano app developer focusing on developing decentralised applications (dApps) on the Cardano blockchain? Here are some resources about the CivicTheme design system that you may find useful. A well-thought-out design system can significantly streamline the development process, ensure consistency across your application, and enhance user experience.

Graphic design with circles and lines merging together in blues and greys with white background

Welcome Cardano world! Hello Cardano UX!

We've thrown our hat in the ring for the Cardano Partners and Real World Integrations grant! We're very excited, and want to tell you about the power a design system could bring to the Cardano ecosystem. We've gathered this info to give you a background on CivicTheme, and how it could be extended to provide transactional patterns to work with your Cardano apps.

Grant Info (Opens in a new tab/window)
  • Semantic HTML
  • Data Driven
  • WCAG AA

What is CivicTheme?

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.

CivicTheme health home page example with banner in teals and white

The CivicTheme Design System is...

An award winning design system with easy styling and customisation and flexible UI components.

Award-winning design system

The CivicTheme Design System designs start in Figma as the basis of a responsive, award-winning user experience.

A board with 6 tiles of icons

Figma Design File (Opens in a new tab/window)

The CivicTheme Design System is implemented as a Figma file that provides a visual representation of components and their usage within design templates.
(Opens in a new tab/window)
CivicTheme screenshot on multiple devices

Responsive Design (Opens in a new tab/window)

CivicTheme is fully responsive and provides a customisable grid utilising a flex-based system adapted from the SASS flexbox grid.
(Opens in a new tab/window)
CivicTheme Splash Award Winner Graphic with monitor and badge

Award Winning UX (Opens in a new tab/window)

CivicTheme won the Design/UX Award at the annual DrupalSouth Splash Awards held in Wellington, New Zealand, in 2023.
(Opens in a new tab/window)

Easy styling and customisation

CivicTheme lets you style your application to support branding requirements with light and dark mode options, color palette variations, and font adjustments.

 

CivicTheme Storybook showing how to choose colors

Configure Colors

CivicTheme allows you to change the color of all elements from the configuration page without additional development.

CivicTheme Storybook with switching from light to dark mode

Light and Dark Mode

CivicTheme lets you configure your components in light or dark mode for the best experience for your users.

CivicTheme Storybook typography settings

CSS Variables

CivicTheme UI kit contains a large number of variables to adjust colors, typography and spacing.

Slide 1

Flexible UI components

Over 60 atomic-design components can be used directly out-of-the-box or easily customised for your web applications.

Content Components (Opens in a new tab/window)

CivicTheme comes with many out-of-the-box components to build your web application.
(Opens in a new tab/window)

UI Kit Storybook (Opens in a new tab/window)

Storybook shows all components available in the library and lets you try different settings.
(Opens in a new tab/window)

UI Kit GitHub Repo (Opens in a new tab/window)

GitHub repository for the UI Kit component library with Storybook integration.
(Opens in a new tab/window)

The CivicTheme Design System has...

Solid compliance with digital standards and best practices, real-world implementations, documentation and guides, a strong governance model, and endorsement by leading authorities.

Compliance and implementations

We believe in open source, digital standards, and working with tried and true technologies. Check out our roadmap for additional standards and implementations on our radar such as React and world-recognized security frameworks.

Theme thumbnail

Accessibility Compliance

CivicTheme is a government-grade design system that has been reviewed for WCAG 2.2 AA compliance.
A board with 6 tiles of icons

Government Standards

CivicTheme was inspired by the former Australian Government Design System and has been uplifted with new features and functionality.
CivicTheme Splash Award Winner Graphic with monitor and badge

Drupal Implementation (Opens in a new tab/window)

Our first CivicTheme implementation was built to support the popular Drupal Content Management System.
(Opens in a new tab/window)
GovCMS and CivicTheme logos in blues and teals and white

GovCMS Implementation (Opens in a new tab/window)

The CivicTheme Design System has been included in the Australian whole-of-government CMS program, GovCMS.
(Opens in a new tab/window)

Documentation and examples

CivicTheme provides tools to create flexible web pages. Here are some docs and examples of how and what you can build with the out-of-the-box components.

CivicTheme Storybook showing how to choose colors

Using CivicTheme (Opens in a new tab/window)

Screenshot of CivicTheme

Documentation Site (Opens in a new tab/window)

Screenshot of CivicTheme on the laptop screen looking from above

Contribution Guide (Opens in a new tab/window)

CivicTheme checklist on clipboard

Releases (Opens in a new tab/window)

Australian government building at night

Government Site (Opens in a new tab/window)

Graduating student in cap and gown blowing confetti

Higher Ed Site (Opens in a new tab/window)

Woman having fun

Health Site (Opens in a new tab/window)

clouds reflecting on skyscraper glass windows

Corporate Site (Opens in a new tab/window)

Governance and endorsement

Good open source software is not enough; it needs proper governance and endorsement to be sustainable and successful. CivicTheme has both!

Steering Committee

The CivicTheme Steering Committee was formed to shape the project's strategic direction, oversee its governance, and help ensure its sustainability.

Roadmap (Opens in a new tab/window)

A high-level, strategic CivicTheme roadmap has been developed by the Steering Committee to show how the design system plans to evolve over the coming years.

Licensing

Our open source licensing policies apply to each aspect of CivicTheme: Figma design, photography, content, UI Kit code, implementation code and documentation.

Endorsement (Opens in a new tab/window)

CivicTheme has been endorsed by the Australian Digital Transformation Agency as a whole-of-government approved design system and by GovCMS for their platform.

More on the CivicTheme Design System...

Check out our articles and videos, join our community, and tell us what you need from a design system.

Submit an Idea (Opens in a new tab/window)

Have a great idea for making CivicTheme even better? Submit it! Or check out what the community has already suggested.
(Opens in a new tab/window)

Join Slack (Opens in a new tab/window)

Join our Slack channel to collaborate. While this is a Drupal channel, more channels will be added as we build more implementations.
(Opens in a new tab/window)

Start contributing (Opens in a new tab/window)

Ready to dive in and help out? We'd love you to join our contributors to help with design, code and documentation contributions!
(Opens in a new tab/window)

Immerse yourself...

Download our PDFs

We'd love to hear from you!

Have a question? Have feedback? Let us know!

Sign up

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