This web design system contains everything one might need to put together work for RapidRatings, especially some of our most frequent work: web landing pages, and advertisements. The goal was to make this accessible and understandable for anyone, so that it can be easily passed to new designers or non-designers and utilised whenever needed.

In order to achieve this, I broke the system down into three groups.

ATOMS builds out the base of everything someone might need: the brand colour palette, typography, logos in varying sizes, buttons, icons, graphics, imagery, and an extensive photography library that can be added to. Theoretically, a user could grab any one of these items to use — all have built-in variants within Figma as well, so for example, when selecting a logo, you would only ever need to do it once, and then use the Figma variant dropdown to choose alternating colours or sizes.

MOLECULES collects all the atoms together to create more cohesive layouts for both web landing pages and advertisements. LP molecules include things like footers, forms, and header options, all with individual atoms, making them easy to customise.

Finally, ORGANISMS collects everything together in templates. Here, utilising a template base, a user with any skill level can swap out photography, colours, graphics, and text, resulting in a final piece of work that meets brand and design standards.