Find everything you need to create page designs in the GS1 web design system.

First steps

Familiarise yourself with the visual styles

Resources you may find most helpful:

Colour palette

Typography

Grid and spacing

UI icons

Familiarise yourself with the components

The components section has detailed information on each component in the design system, including usage guidance, best practices, colour variations and visual examples.

You can also ****review the full library below, which has developer specs and more detailed information on interaction and sizing.

gs1-web-component-library.sketch

Design resource files

We've provided a design kit in Sketch and Adobe XD. Both come with GS1 colours, type styles, icons, spacing and components so you can design web experiences for your Member Organisation (MO) without creating everything yourself.

Using Sketch? Download the library.

The Sketch library contains colours, type styles, spacers and symbols of all components.

gs1-web-component-library.sketch

gs1-web-icons.sketch

Using Adobe XD? Download the file.