Atomic Design System

In a design system, colors are essential for visual consistency, brand identity, and enhancing user experience across digital products. For this company, the primary color scheme features white, black, and grey shades. All color combinations used in components were tested for accessibility, meeting at least AA standards, and often AAA.

The Jost font family is used in this design system. The chart below breaks down the different sizes for headings, subheadings, body text, links, buttons, and more for desktop, tablet, and mobile platforms.

This design system mostly uses line icons with the rare exception of filled icons within some components.

The image below provides the breakpoints for all the platforms and also details the margins, column widths, and gutter space for each platform. Spacing refers to the consistent use of margins, padding, and other spatial relationships between elements to create visual harmony, improve readability, and enhance user experience. The spacing uses multiples of 8 with the smallest unit being 4px.

Given this is a beauty supplier company, images and color swatches play an integral role in the design system as placeholder images are requisite in creating mockups and prototypes. Four main categories were created comprising of at least 5 to 15 images and color swatches.

The set of buttons shown below are divided into three groups — primary, secondary, and tertiary — and are sized in big and small variants. The chart illustrates the various states of the buttons.

Form inputs are essential elements of user interfaces that allow users to provide data or interact with a system. In this case, they are categorized as:

• Text inputs: Single-line or multiline text fields where users can input text data.
• Select dropdowns: Dropdown menus that present a list of options for users to choose from.
• Checkboxes: Switches that allow users to select one or more options from a list.
• Radio buttons: Single-choice buttons that allow users to select one option from a list.
• Number Stepper: Allows users to select a quantity.
• Toggles: Options to select a particular size or amount of a product.

In this section, chips, badges, tooltips, and notifications have been clubbed together because they share several common characteristics and purposes, despite serving different functions within the user interface. These are all visual elements that provide additional information or feedback to users within the interface which are typically small, non-intrusive components that augment the user experience without dominating the screen. Each of these components serves to provide contextual information or feedback related to specific elements or actions within the UI.

Fulfillment and shipping/store tiles are organisms representing complex UI components that provide information and functionality related to order fulfillment processes. These tiles serve as visual summaries or containers for displaying key details and actions.

This date picker allows users to select dates from a calendar or input field. It provides a visual interface for users to choose a general period or a custom date range displayed as a dropdown menu.

The accordion in this design system allows users to toggle the visibility of content sections. It consists of collapsible panels, with each panel containing a header, a subtitle, a body, a search bar, and a list of options. The user has the option of toggling the visibility of all the elements, with the exception of the header. This is typically displayed on a PLP page. This accordion can also be used as a substitute for tabs on smaller devices displaying detailed information that is contained in each panel.

‘My Account’ cards, as the name suggests, are components that go into building the ‘My Account’ page. These provide users access to their purchase history, their ordering habits, address and payment settings.

PLP cards provide key information about each product in an easily scannable manner. These components include essential details about the product, such as the product name, price, image, color swatches, and availability status. Displaying this information prominently allows users to quickly evaluate each product without having to click into individual product pages.

A PDP swatch card is a UI component commonly used in e-commerce websites and applications to display product variations and options, typically in the form of color swatches. Swatch cards provide users with a visual representation of different product options and allow them to select their preferred variant.

This shopping bag dropdown provides users with a convenient way to view and manage items in their shopping cart. It appears as a dropdown panel that displays a summary of the items currently in the user’s shopping bag, along with options for reviewing, editing, or proceeding to checkout. The search dropdown shows search suggestions in the form of chips and also keyword suggestions along with the associated product. This allows users to quickly narrow down the result they are looking for.