There are many ways to get started with Data Standards CX Open Source Assets. It all depends on your team’s needs and whether you are a developer or a designer (or somewhere in between).

<aside>

• On this page </aside>

About CX Open Source Assets

The Data Standards CX Open Source Assets contain wireframes that demonstrate optional examples for how to put key CDR requirements into effect. These wireframes reflect CX guidelines published elsewhere on this website, and were informed by research, CDR agency collaboration, community consultation, and best practice.

Open Source Assets are version controlled and have been internally and externally reviewed for accessibility compliance. Assets are partially conformant to Web Content Accessibility Guidelines (WCAG) 2.1 level AA.

All our assets build on the GOLD Design System; component rationale, accessibility support, and code documentation are available on the GOLD Design System website.

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> A note on CX Guidelines

The CX Guidelines provide optional examples of key requirements and recommendations to help organisations build best practice consent models.

Wireframe designs do not necessarily prescribe how to put key requirements into effect, but the rules require CDR participants to have regard to the CX guidelines (see rules 4.10(1)(a)(ii) and 4.22(b)). Aligning with these guidelines is recommended to support a consistent and familiar CDR ecosystem that consumers can trust.

CDR Participants should also refer to the CDR Rules, data standards, and privacy guidelines for a complete view of obligations to facilitate compliance.

</aside>

Design assets

Open source design assets contain wireframes and working prototypes that reflect various parts of the Consent Model.

Figma is used for wireframe creation and interactive prototyping.

• About Figma

Figma files are available for download at the end of this page as well as on individual CX Guideline pages. Each file includes documentation layers that can provide more information and detailed design specifications for the build process. This includes:

• Wireframes with annotated rules, standards, and/or guidelines
• Focus order notes for ‘default example’. To help with WCAG Success Criterion, focus order notes highlight:
  • the intended navigation sequence of content when operated from the keyboard (2.4.3: Focus Order)
  • instances where link text is programatically determined to help users understand the purpose of each link (2.4.4: Link Purpose (In Context))
  • instances where a text alternative should be provided for non-text content (1.1.1: Non Text Content)
• Working prototype with limited interactions and screens for simplicity

Layers tab of left sidebar in Figma showing: [1] the section in ‘All pages’ for clickable prototypes; [2] the section in individual pages for ‘focus order notes’; and [3] the section in individual pages for annotated rules, standards, and/or guidelines.

<aside> <img src="/icons/book_gray.svg" alt="/icons/book_gray.svg" width="40px" /> Getting started

• Prerequisites: Sign up and create a free Figma Starter account.
• The open source asset files use the default system font for OSX, San Francisco. San Francisco is not usable in Figma by default, to use the typeface in Figma you have to download and install San Francisco.
• Download files from individual CX Guideline pages and open in Figma.

• Useful guides and video tutorials from Figma </aside>

Coded assets

Open source coded assets contain the coded prototype that reflect the Consent Flow, showing the “happy path” for Consent, Authenticate and Authorise.

Storybook is used to build User Interface (UI) components to develop and update a library of components. Each UI component is built and tested to align with CX standards and accessibility criteria of the Consent Flow.

• About other tools and technologies used