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

By Constantinos Evangelou, Interaction Design Lead

The design system has been updated to version 3.0.0. This is a total redesign of the design system, with branding and styling changes. The new version includes improvements on existing components, as well as new design elements to accommodate services and websites alike. 

Drawing from our experience developing gov.cy services, user research findings, and the feedback we received from other teams that used the design system, we 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. 

We have included recommendations and best practices on how to enhance accessibility using our 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. If you are implementing a gov.cy service or website, make sure you 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. 

If you are implementing a service or a website for gov.cy, make sure to go through the Get started page first. 

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 our 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 our design system we also enhanced the libraries we use for rapid design, development, prototyping and testing. These libraries are now available for all to use: 

• 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