Skip to Main Content

About Clone

What is Clone?

Clone is a few things: it's an open-source front-end framework first, but it's also a design system, a prototyping tool, and a project boilerplate. It is produced by the team at the Government of Canada Talent Cloud.

Clone the Framework

First and foremost, Clone is a front-end framework that leverages HTML5 data attributes to create an easy-to-use system of styles and components. Instead of classes, Clone uses key-value pairs written right in your HTML to style elements, allowing for easy manipulation, and requiring minimal knowledge to get started.

Clone the Design System

Clone is also a design system - by imposing thoughtful restrictions while still allowing for plenty of customization, it allows you to build your project with a consistent yet flexible design language. This ensures that your site feels unified without removing your ability to design things as you see fit.

Clone the Prototyping Tool

One of the main advantages to Clone due to it's use of data attributes is that the barrier to entry is extremely low - if you know basic HTML you can get building in almost no time at all. This allows for rapid, in-context prototyping using real web technology, which can have a tremendous impact on user testing and research.

Clone the Boilerplate

Finally, Clone is also a great way to get your project off the ground quickly. It provides a ready to go environment that will let you prototype and build in minutes with very little knowledge required. This allows you to worry less about getting started and more about building things that matter.

Why Clone?

Clone helps you get your project off the ground by doing the following:


Clone is an open source project using an MIT license. This means that anyone can contribute, build upon, rework, or improve it's code. Clone's code is hosted on Github. If you spot an issue, feel free to submit a ticket, or if you're interested in adding or improving a feature in Clone, you can fork the repository.

It is important to note that Clone is accessible by design, meaning anything included in the system must meet a minimum of WCAG AA.

Generally, adding something to Clone should follow these basic steps:

  1. Accessibility & Standards Research
  2. Design & Development
  3. General User Testing
  4. Accessibility Testing
  5. Submit a Pull Request on Github

Your pull request will then be reviewed and dicussed before being merged into the main repository. Contributing to Clone is a collaborative effort, so expect lots of fun discussion and testing!