Introduction
This page represents the core of our Atomic Design System, where all foundational elements are structured.
How It Works
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.
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.
Layout
Basic layouts components 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
- Navigation Components
- Elements used to build basic navigation experiences
- 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.
Step 1
What is web design?
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.
Step 1
Onboarding
Kickoff meeting and client brief to align vision and objectives.
Cards
Description
01
Research & Investigation
Deep dive into your audience, competitors, and market trends.
Traffic improved by
Webflow-based builds with style guides and CMS for easy updates.
+300%
Growth
Designing for conversion and scalability from day one
Adaptability
A brand identity designed to evolve fluidly as growth happens.
Filters
Description
%2520creative%2520process%2520in%2520web%2520design.avif)
%2520Brand%2520Identity%2520in%25206%2520Simple%2520Steps%2520Flowcard.avif)
Try removing filters and restart your search.
Try removing filters and restart your search.
Templates
Page-level objects that place components into a layout and articulate the design's structure.
Section Custom
Eyebrow Text Here
Lorem ipsum dolor sit amet elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Section Base
Section / Hero
Your Webflow Partner for Growth and Scalability
At Apogeo, we blend strategy, design, and technology to build modular solutions that grow with your brand—giving you control and measurable impact.
Footer
Pages
The basic building blocks of matter, like HTML tags, form labels, inputs, and buttons.