Cezanne HR Design System
At Cezanne, the collaboration between designers, developers, and testers is crucial to creating usable features for our cloud-based HR system. Creating a design system using Brad Frost's atomic design methodology is an effective way to ensure consistency and efficiency in the design process. By breaking down the design elements into atoms, molecules, and organisms, it becomes easier to understand and navigate the design process and to make changes or updates without affecting the overall design.
Using a modular approach, it's also easy to scale up or down the design and add or remove elements as needed. Additionally, our design system allows for more efficient collaboration among designers and developers, as everyone is working with a shared set of design elements and guidelines that they can follow and use as needed.
You can find the link here
Design System Homepage
Quick Links to Useful Content
Breakdown of the design system
Atoms, Molecules & Organisms
Our components are broken down into Atoms, Molecules, and organisms, each category follows the same breakdown (as seen in some areas of the Figma component library) they are broken down into variations, so the varying styles that the component has for example badges will have generic and notification types that have varying styles. to differentiate this we implemented a visual example that shows the component and the code that creates that component in our system. While atoms are the smallest component types in our system, Molecules and Organisms contain additional information in the form of ‘variables’ that are needed to style them as well as related components (usually atoms) that make up the molecule or organism components.
Atoms - Badges example
Molecules - Breadcrumbs example
Organisms - Dialogs example
Core Styles & Patterns
Core styles in our design system include typography, color, iconography, and spacing. These styles serve as the foundation for all design decisions and ensure consistency across our system. Typography defines the typeface, font size, and line spacing used in the interface. Color is used to create a visual hierarchy and convey meaning as well as indicate specific events, and information types and we have opted to include the variable name and hex code so it can be used regardless of context when developing. Iconography is used to provide visual cues and simplify navigation for our users and includes guidance for designers on how to use illustrator to design new ones, as well as tooltips to display the icon name. Spacing and layout determine the arrangement of elements on the page and how they relate to one another. Together, these core styles create a cohesive and user-friendly interface.
While our patterns refer to the specific ways in which the core styles are used to create common UI elements, such as breakpoints, empty states, pagination, etc. These patterns are reusable, modular components that can be used across different products and platforms to ensure consistency in the user experience. By establishing these patterns, our design system helps to streamline the design process and make it more efficient, while also providing a consistent experience for our users.
Patterns - Breakpoints example
Core Styles - Spacing example
Core Styles - Colour Palette example
Core Styles - Icons example