Design

Creating components

Components should be built carefully - make sure you're following all of the guidelines here. To help ensure a component is ready to be published in a library, confirm all of the topics below are checked:

The component is responsive. If you add more content to it or change its width or height, it adapts perfectly.

The rules for responsiveness have been thought of and defined, e.g. paddings, text-wrap, content overflow, etc.

The component fits the edge cases or has enough rules to overcome them.

The component's name is compliant with the naming rules.

The component uses only the measures defined as our spacers.

The content is product-agnostic. This means that every piece of text needs to be generic and any image used must not refer to a single specific product.

The component makes efficient use of pre-existing atoms - i.e., the atoms can be applied as-is and do not require special changes just to fit that component.

In case the component has variants, they're scalable. For instance, make sure you didn't create a boolean option just because for now you only have two options.

If the component is themeable, the colours you've chosen are the theme colours. For example, you used Global's primary colour instead of the Digital black colour.