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)
CivicTheme health home page example with banner in teals and white
  • 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.

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.

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.

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.

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.

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.

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