gov.cy Design System update (V.3.0.0) – Unified Design System

The Digital Services Factory (DSF), released of version 3.0.0 of the gov.cy design system. This is a total redesign of the design system, with branding and styling changes, updated and new components, to accommodate both services and websites.

The new version includes improvements on existing components, as well as new design elements to accommodate services and websites alike.

Drawing from the DSF’s experience developing gov.cy services, user research findings, and the feedback they received from other teams that used the design system, they incorporated lessons learned, to:

• define the gov.cy design principles
• align design elements with these principles
• better explain the design system’s best practices
• accelerate the design and development of services
• make it easier for service teams to understand and implement the design system

Changes include:

• the introduction of the design system principles
• an updated Get started page for better understanding how to use the design system
• an updated pattern on structuring a gov.cy service, featuring example variants that have been tested and proven effective
• a dedicated page to help developers use the design system’s developer assets  to accelerate development
• an updated page template with sample pages, for websites, as well as services
• better guidance for implementing components with sections, explaining:
  • when to use a component
  • when not to use a component
  • how the component works
  • how to implement different variants of the component
  • how to display errors
  • what content to use
  • accessibility best practices

The design system also introduces the following new elements:

• Components
  • accordion
  • character count
  • cookie banner
  • data tables
  • date picker
  • inset text
  • phase banner
  • summary list
  • tag
  • textarea
  • warning text
• Styles
  • images
• Patterns
  • addresses
  • bank details
  • confirm an email address
  • confirmation pages
  • contact page
  • cookies page
  • filter results
  • gender or sex
  • numeric inputs
  • social insurance number
  • step by step navigation
  • task list page

Accessibility enhancements

The new version of the design system emphasises accessibility. All elements have been tested and comply with the  include everyone principle.

The DSF has included recommendations and best practices on how to enhance accessibility using their components and patterns (for example see the  input text accessibility recommendations).

However, that does not mean that any implementation that uses the developer assets, automatically complies with the Standard. When implementing a gov.cy service or website, make sure to always test for compliance with the EN 301 549 Standard.

Design system website

The  design system’s website has been updated with the new styling and guidance.

Anyone implementing a service or a website for gov.cy, should first go through the Get started page.

Developer assets

The developer assets (CSS and JavaScript) have also been updated for the new version. Check out the developer assets page for information on how to use the prebuilt CSS and JavaScript.

This is a major release and the changes on CSS and JavaScript are not backward compatible with version 2. For more information about the older version visit the v2 documentation.

Related tools and libraries

In updating the design system, DSF also enhanced the libraries used for rapid design, development, prototyping and testing:

• excalidraw library to create rapid wireframes and sketches.
• figma library to rapidly create designs and prototypes the gov.cy way
• dsf-email-templates NPM package to create HTML email templates
• govcy-frontend-tester NPM package to perform front end tests in terms of the accessibility and generic guidelines of the design system

Launch the gov.cy Design System