Atomic Design System

Project Overview

For my previous company, I developed a design system for a SaaS project using the Atomic Design methodology. We chose this approach because it helps break down complex interfaces into simpler, manageable components. Starting with basic elements like buttons and input fields (atoms), we combined these into functional units (molecules), and then into larger sections (organisms). This method made it easier to maintain consistency across the platform and allowed us to build and update features quickly. It was really effective for keeping our design uniform and scalable, which is super important for a growing SaaS product.

What is Atomic design system ?

The Atomic Design System is a method used in designing websites and apps that breaks down the interface into smaller, simpler components and then builds them up into more complex structures. This approach is inspired by how atoms and molecules work in science.

Atoms – These are the smallest parts, like buttons and text fields.
Molecules – When you combine atoms together, like putting a label with a text field to make a search box.
Organisms – Larger groups of molecules combined, like a whole header with a logo, navigation, and search box.
Templates – These are like blueprints or layouts made by placing organisms into a design.
Pages – Finally, templates turn into full pages when you add real content that people will see.

Starting With Atoms

Typography
Colors
Icons
Checkboxes
Avatar
Switch
Buttons
Links
Pills
Grid Actions

Welcome To Molecules

Headings

Alert
Page Actions
Attributes card
External Documentation
Filter Panel
Quick Actions
External Contacts
Implementer
Notify on Failure
Owner
Requester
Stakeholder
Subject Matter Experts
Autocomplete
Back to Link
Breadcrumbs
Card
Create Comment
Confirm Dialog
Data Quality Score Bar
Dual icon
Errors
Field Unavailable
Header Card
Header Add
Relative Time

Header Notifications
Header
Help
Markdown Renderer
Date Time Input
Duration Input
Replication Type
Score Meter
Select Categories
Select Users
Select
Status With Dot
Strategy Card
Text Area
Text Input
Daily Recurrence Fields
Recurrence Display
Hourly Recurrence Fields
Monthly Recurrence Fields
Recurrence Control
Weekly Recurrence Fields
Dictionaries Card
Inline Alert
Debounced Search
Search Bar
List Display
Landing Page Card

Welcome To Organisms

Tab Nav
Paginator
Static Grid
Components Grid

Building the Templates

Based on the foundation of atoms, molecules, and organisms, I developed templates, which then served as the groundwork for creating the final UI and pages.

Outcomes

The design system project turned out to be very successful and is currently in use. As this was the first version, we’ve made several improvements since its initial creation, enhancing its functionality and design significantly. For now, I only have the rights to showcase the design system itself in my portfolio, not the entire UI or any specific pages. This foundational work has set a strong precedent for further development and application within the project.