Atomic Design

What is Atomic Design?

Atomic design is a methodology for creating design systems that promotes consistency, scalability, and maintainability. Created by Brad Frost, this approach breaks interfaces down into fundamental building blocks and works up from there to create increasingly complex components and layouts.

The methodology draws inspiration from chemistry, where all matter is comprised of atoms that bond together to form molecules, which combine into complex organisms. Similarly, user interfaces can be broken down into fundamental building blocks and assembled into complete pages.

"We're not designing pages, we're designing systems of components." — Stephen Hay

The Five Levels of Atomic Design

Atomic design consists of five distinct levels that progress from abstract to concrete:

1. Atoms

Atoms are the basic building blocks of matter. In web interfaces, atoms are the foundational HTML elements and design tokens that can't be broken down any further without losing their meaning.

Examples include:

• Form elements (labels, inputs, buttons)
• Typography elements (headings, paragraphs)
• Basic HTML tags (div, span, section)
• Design tokens (colors, fonts, spacing values, animations)

Atoms on their own are fairly abstract and often not useful in isolation. However, they serve as an important reference showing all available foundational elements at a glance. They establish the visual language and constraints that govern the entire design system.

[Placeholder: Diagram showing examples of atoms - button, input field, color swatches, typography samples]

2. Molecules

Molecules are groups of atoms bonded together to form the smallest functional units of a design system. These components are relatively simple but serve specific purposes and can be reused throughout the interface.

Examples include:

• Search form (label + input + button)
• Form field group (label + input + error message)
• Card header (image + heading + description)
• Navigation link (icon + text)

Molecules embody the "do one thing and do it well" philosophy. While they can be complex, they typically remain focused combinations of atoms built specifically for reuse. Breaking down interfaces into molecules helps maintain consistency and makes components portable across different contexts.

[Placeholder: Diagram showing molecules composed of atoms - search form, card component, form field]

3. Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms. They form distinct sections of an interface with specific functionality.

Examples include:

• Website header (logo + navigation + search + CTA buttons)
• Footer (logo + navigation links + social media + newsletter form)
• Product grid (multiple product cards arranged in layout)
• Testimonial section (heading + testimonial cards + navigation controls)

Organisms can consist of similar or different molecule types. For instance, a header might contain diverse elements (logo, navigation, search), while a product grid might repeat the same molecule (product card) multiple times.

The organism level is where designs start to become concrete and recognizable as actual interface sections. This is often where stakeholders begin to see the design coming together.

[Placeholder: Diagram showing organisms built from molecules - header, footer, content section]

4. Templates

Templates consist of groups of organisms stitched together to form complete page structures. At this stage, we move away from the chemistry metaphor into language that's more relevant to the final output.

Templates establish the overall page layout and demonstrate how components work together. They show:

• Grid systems and spacing
• Component placement and hierarchy
• Responsive behavior patterns
• Content structure and flow

Templates typically start as wireframes showing layout and structure without final content. They provide crucial context for all the abstract molecules and organisms, demonstrating how everything fits together. This is where clients begin to see the actual page designs taking shape.

[Placeholder: Diagram showing template layouts with organism placements - homepage template, blog template]

5. Pages

Pages are specific instances of templates with real representative content replacing placeholder content. This is the highest level of fidelity in atomic design.

Pages demonstrate:

• What the interface looks like with actual content
• How the design system handles edge cases
• Content variations (long headlines vs. short headlines)
• Different states (empty states, error states, success states)

The page stage is essential for testing the effectiveness of the design system. Real content reveals issues that weren't apparent at earlier stages. For example:

• How does a headline look with 10 characters vs. 100 characters?
• What happens when a user has 1 item in their cart vs. 50 items?
• How do error messages appear in context?

These discoveries inform improvements that loop back through the system, from modifying atoms and molecules to updating templates.

[Placeholder: Diagram showing full page designs with real content - homepage, product page, blog post]

---

How Together Agency Uses Atomic Design

At Together Agency, we implement atomic design principles throughout our workflow, from initial design in Figma through to development in Next.js. This creates a consistent methodology that improves collaboration, speeds up development, and ensures scalable, maintainable design systems.

Figma Structure

Our Figma files follow a structured two-page approach that mirrors the atomic design methodology:

Page 1: Components Library

The first page serves as the design system library, organized by atomic design hierarchy:

• Atoms Section: All foundational elements including buttons, form inputs, typography styles, color swatches, icons, and spacing tokens
• Molecules Section: Reusable component combinations like form fields, card headers, navigation items, and search bars
• Organisms Section: Complex interface sections such as headers, footers, hero sections, and content blocks

This page acts as the single source of truth for all reusable components. Designers work here to:

• Maintain consistency across the design system
• Create and update components with variants and properties
• Establish design tokens and variables
• Document component usage and guidelines

[Placeholder: Screenshot showing Figma components library organized by atomic levels]

Page 2: Full Website Design

The second page contains complete page designs (templates and pages in atomic design terms):

• Full page mockups utilizing components from the library
• Real or representative content in context
• Responsive breakpoint variations
• Different page types and templates
• Edge cases and state variations

This separation provides several benefits:

• Clarity: Designers and developers can easily reference the component library while viewing full designs
• Consistency: Using library components ensures design consistency across all pages
• Efficiency: Updates to library components automatically propagate to all page designs
• Handoff: Developers can inspect both individual components and their implementation in context

[Placeholder: Screenshot showing full website designs using library components]

Next.js Implementation

When translating designs into code, we maintain the atomic design structure in our component organization and development approach.

Component Folder Structure

Our Next.js projects organize components to reflect the atomic hierarchy:

/components
  /atoms          # Basic building blocks
  /molecules      # Simple component combinations
  /organisms      # Complex interface sections
  /templates      # Page layout structures
  /pages          # Full page components

While we don't strictly enforce this folder structure in every project (see our Codebase Structure documentation), the principle of composing larger components from smaller, reusable pieces remains central to our development approach.

Component Composition

The atomic design methodology guides how we build and compose components:

Atoms are implemented as small, focused components:

• Button components with variants
• Input field components
• Typography components
• Icon components

Molecules combine atoms into functional units:

• SearchBar (input + button)
• FormField (label + input + error message)
• NavLink (icon + text + link)

Organisms assemble molecules and atoms into complex sections:

• Header (logo + navigation + search + CTA)
• Footer (multiple navigation groups + social links + newsletter form)
• ProductGrid (layout + multiple product cards)

Templates define page-level layouts:

• Layout components that define structure
• Section wrappers that establish spacing and grid
• Responsive layout patterns

Pages render complete views:

• Next.js page routes that consume templates
• Dynamic content from CMS or APIs
• Real data replacing placeholder content

Benefits of This Approach

Maintaining atomic design principles in development provides:

• Consistency: Components built from the same atoms look and behave consistently
• Reusability: Small, focused components can be easily reused across different contexts
• Maintainability: Updates to foundational components cascade through the system
• Scalability: New pages and features can be built quickly from existing components
• Designer-Developer Alignment: Shared vocabulary and structure between Figma and code
• Testing: Smaller components are easier to test in isolation
• Performance: Component reuse promotes code efficiency and smaller bundle sizes

Mapping Figma to Code

When implementing designs, we maintain traceability between Figma and code:

1. Reference the Components Library: Identify which Figma components map to which code components
2. Build from the Bottom Up: Start with atoms, then molecules, then organisms
3. Match Variants: Figma component variants translate to component props and conditional rendering
4. Maintain Naming Consistency: Use similar naming conventions between Figma and code
5. Document Deviations: Note when technical constraints require different implementations

This systematic approach ensures that the design system remains coherent from design through development, making handoffs smoother and reducing miscommunication.

Why Atomic Design Matters

Atomic design provides a clear methodology for crafting design systems that:

• Promotes Consistency: Reusing components ensures visual and functional consistency
• Enables Scalability: New features build on existing foundations rather than starting from scratch
• Improves Collaboration: Shared language between designers and developers
• Accelerates Development: Reusable components speed up both design and development
• Facilitates Maintenance: Centralized components make updates efficient and predictable
• Traverses from Abstract to Concrete: Allows work at any level while maintaining system integrity

By implementing atomic design principles throughout our workflow at Together Agency, we create more efficient processes, deliver higher quality work, and build design systems that stand the test of time.

Learn More

For a deeper dive into atomic design methodology, read Brad Frost's original article:
Atomic Web Design by Brad Frost

Brad Frost has also written a comprehensive book on the subject called Atomic Design, which explores the methodology in greater detail.