Design system standards and criteria

Before creating a new component or foundation

To be accepted into the design system, the new component or foundation must be unique and reusable.

Unique

It should solve new problems and not replicate functionality that already exist in the design system.

If you would like to improve or replace a current component or foundation, contact the Improving User Experience team on the #design-system Slack channel.

Reusable

It should be flexible enough that it can be reused across products. This includes breaking components down into smaller, reusable components.

It should be easy to use and implement. It should also be easy to update to support the roll-out of global changes.

Criteria when building a new component or foundation

The component or foundation must also meet the following criteria and standards.

Accessibility

It meets Web Content Accessibility Guidelines (WCAG) 2.2 AA as minimum compliance, and AAA where possible.

Responsive

• It is responsive to container width and not breakpoints.
• It responds to the content passed to it.
• It responds to adjustments made by users in the browser settings or by third-party plug-ins.

Consistent

• It uses the design system foundations where relevant.
• It fits with the UK Parliament visual identity.
• Both the guidance and content follow the digital content style guide.

Modular build

It makes use of other components within the design system where relevant.

Naming conventions

• It is not named after a specific cluster or product but named so it can be used across platforms.
• It follows established conventions, including plain language and common terms.

Meets coding best practice

The code follows the Parliamentary Digital Service frontend coding standards.

Analytics

It is tagged so it can be measured by analytics.

Only use JavaScript if necessary

If it uses JavaScript, it includes a non-JavaScript experience.

No third-party dependencies

It has no dependencies on third party technology.

Testing

It has undergone testing where relevant to meet usability standards.

Documenting a new component or foundation

Once you have built the new component or foundation, you need to document how to use it.

Use the documenting a new component or foundation guidance to write your guidance. This will make sure it is consistent with documentation on the design system website.