DESIGN SYSTEM - Noodle.ai


 

Atomic Design System

Atomic Design is a methodology created by Brad Frost for building scalable and consistent design systems. It breaks UI components into smaller reusable pieces and combines them to create complex interfaces.

1. Atoms

The smallest building blocks of a UI.

Examples:

• Buttons

• Labels

• Icons

• Colors

• Typography styles

• Input fields

Button Icon Text Field Avatar

2. Molecules

A group of atoms working together as a single functional unit.

Examples:

• Search Bar

• Login Field

• Form Input + Label

• Button Group

[Search Icon] [Search Input]

3. Organisms

Complex UI components made up of multiple molecules and atoms.

Examples:

• Navigation Bar

• Product Card

• Header

• Sidebar

• User Profile Panel

Navigation Bar ├─ Logo ├─ Menu Items └─ Profile Menu

4. Templates

Page-level layouts that define structure without real content.

Examples:

• Dashboard Layout

• Shopping Page Layout

• Product Listing Layout

Header Sidebar Content Area Footer

5. Pages

Actual screens with real content and data.

Examples:

• Home Page

• Product Details Page

• Checkout Page

• User Profile Page

Example: AR Shopping Experience

Atom

• Gesture Icon

• Product Thumbnail

• Price Label

• Category Icon

Molecule

• Product Preview Card

• Hand Gesture Indicator

• Product Information Panel

Organism

• Product Carousel

• Shopping Menu

• Cart Panel

• Recommendation Section

Template

• AR Shopping Layout

• Product Comparison Layout

Page

• AR Home Screen

• Product Browsing Screen

• Product Details Screen

• Checkout Screen

Benefits

Consistent UI across products

Faster design and development

Reusable components

Easier maintenance

Faster prototyping

Better collaboration between Designers and Developers

Atomic Design Hierarchy

 

Atoms

↓

Molecules

↓

Organisms

↓

Templates

↓

Pages