Atomic System
This page represents the core of our Atomic Design System, where all foundational elements are structured.
Each atom, molecule, and organism is defined here to ensure consistency, scalability, and maintainability throughout the project.
Any adjustments or refinements should be implemented here first, ensuring a unified and systematic approach to design across the entire website.
How It Works
Atomic design provides a clear methodology for crafting design systems by breaking interfaces down into five distinct levels:
Start with Atoms
Atoms are the most fundamental visual elements. They are not functional UI elements on their own, but basic styles or visuals that are used as building blocks for more complex components.
- Icons (navigation, social, utility)
- Typography styles (headings, paragraphs)
- Color palette tokens
- Grid system or spacing units
- Visual dividers or dots
Combine into Molecules
Molecules are combinations of atoms that work together to form small, functional UI elements. Each molecule serves a specific user interaction purpose, making them the smallest functional units in the interface.
- Buttons (primary, secondary, with icons)
- Input fields (with labels, error states, validations)
- Dropdown menus
- Radio button groups
- Toggles / Switches
Assemble Organisms
Organisms are larger, reusable sections made up of molecules and atoms. They form distinct sections of interfaces that can function independently and be placed in different contexts.
- Cards (product, user, article, etc.)
- Lists (search results, collections)
- Forms (multi-field, complex validation)
- Filter panels or sidebars
- Hero blocks with functional elements
Create Templates
Templates define the layout structure of full pages, but using placeholder or generic content. They show how organisms are arranged spatially to create coherent page layouts without final content.
- Hero section layout
- Feature section layout
- Project section
- Testimonials section
- Call to Action section
Implement Pages
Pages are final compositions based on templates, with real or sample content. These simulate a complete real end-user experience and represent the final output of the atomic design process.
- Home
- About Us
- Services
- Contact
- Order Confirmation
Atoms
The basic building blocks of matter, like HTML tags, form labels, inputs, and buttons.
Typography
Basic text elements used throughout the interface.
Iconography
Basic text elements used throughout the interface.
Molecules
Groups of atoms bonded together, functioning as a unit, like a form label, input, and button.
- Form Elements
- Groups of basic form controls that work together
- Search & Filtering Tools
- Functional modules combining inputs, tags, and filters
Organisims
Groups of molecules joined to form a complex, relatively autonomous section of an interface.
General
Description
Eyebrow Text Here
Lorem ipsum dolor sit amet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Eyebrow Text Here
Lorem ipsum dolor sit amet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Template
Page-level objects that place components into a layout and articulate the design's structure.
Section Full
Section Base
Section / Hero
Juan Lebron
Global / Section
Footer
Pages
Specific instances of templates that show what a UI looks like with real content in place.
Title Section
Description