talk to us

we’re here to help you get started and stay on track

  • 1 Planning phase

  • 2 Design & build

  • 3 Approval & Delivery

ask questions

get answers

If you have any questions about getting started, want to know the best way to approach your project utilising GEL, or want to share some ideas, please get in contact with the GEL team via If you have a Slack account, join the conversation at

Do we have to use the Design System source code?

No, you do not have to use the Design System source code. You can build from scratch using wireframes and visual designs if you prefer, but your final output must match the look and functionality of the Design System from a front end perspective.

Which browsers does the Design System support?

Our current browser support philosophy recommends one version forward and two versions back with the exception of IE10 and up.

The Design System uses progressive enhancement, therefore older browsers may not optimally render the interface elements. If using an older browser, you must ensure that your interface elements meet the following requirements:

  • Enable the user to complete a task
  • Meet standard usability guidelines
  • Comply to WCAG 2.1 AA accessibility guidelines

    This philosophy is based on the following factors:

    • The ROI of tweaking elements for older browsers (with declining usage rates) for small enhancements which do not directly enhance the customer experience or task completion rate e.g. rounded corners.
    • Simplifying code by minimising styling with anything other than CSS
    • Less dependency on visual designers to provide graphic assets and support
    • More efficient workflow when building interfaces intended for multi-brand
    • Future proofing graphic quality for high definition screens

Interface rendering concerns in older browsers can be raised with CX but ultimately the AFS Digital Brand Director will decide whether the brand presentation is acceptable or if an alternative needs to be explored.

Who is responsible for bug fixing and testing?

You are responsible for testing and bug fixes when you download an instance of the Design System and use it in your project. Please let us know if you notice any bugs in the Design System and we’ll fix it up. Even better... send in a pull request. We’d be very grateful.

If we use the Design System do we still need UX and UI designers?

Yes. Every project should have a UX designer and a UI designer, no matter how small. This practice will ensure that the interaction design and interface designs are consistent.

Can I change LESS files, css or JavaScript?

We do not recommend changing the files. To alter or add styles in your project please use an override css file and concatenate it at the bottom. This will ensure that you stay upgradeable in case we fix things and create a new version of a module.

Can we use our own JavaScript library?

Yes you can use your own JavaScript library, however you are responsible for the implementation. The Design System code is available in React and HTML/CSS/jQuery.

Is the Design System accessible?

Yes as of version 1.0.0. the Design System complies to WCAG AA accessibility standards. We have been through a formal accessibility review to meet this requirement.

How are modules affected by new releases?

Each module is affected differently by each release. But don't worry if you don't have the resources to upgrade, as we'll always keep the past versions online. This ensures that when a fix is issued or an improvement is made to a module, only teams that are using that particular module are affected.

Do we have to use the updated release?

No, you do not have to use the updated release. The Blender is specifically built to cater for every version, meaning that you can continue to use your preferred version. However, we encourage you to assess the effort required to upgrade, as it may only be minimal but could enable you to leverage the community fixes and testing.

Which frameworks are used to create the Design System?

GEL Design System v3.0 is built in React. React components are available via npm packages, we also offer a CSS/HTML/jQuery solution: GEL Design System download.

Do I have to use GEL Design System v3.0?

With improved versioning in the release, projects who are using a version of the GEL Design System v2.0 will continue to be able to use and implement their corresponding version. Each project should review the GEL Design System v3.0 and assess the value, effort and impact of updating their projects before proceeding with the upgrade.