El Diseño Atómico, concebido por Brad Frost, se basa en descomponer las interfaces de usuario en unidades básicas que, al combinarse, forman estructuras funcionales y estéticamente coherentes. Este enfoque sistemático, no solo organiza el proceso de diseño, sino que también promueve la consistencia y escalabilidad en los proyectos digitales.

Representan los bloques constructivos más simples del diseño, como colores, fuentes tipográficas, íconos y botones. Cada átomo es un componente independiente, esencial para construir elementos más complejos.

Surgen de la unión de dos o más átomos, para crear unidades con funcionalidad específica. Ejemplos comunes incluyen un campo de búsqueda con su botón asociado o un menú desplegable básico.

Éstas son estructuras más avanzadas que integran múltiples moléculas y átomos para desempeñar funciones completas dentro de una interfaz. Un ejemplo podría ser un encabezado que combine un logotipo, un menú de navegación y una barra de búsqueda.

Actúan como esquemas estructurales que definen cómo se organizan los organismos en una página. Estas plantillas aseguran que las interfaces mantengan una apariencia uniforme, incluso cuando se adapten a diferentes contextos.

Son el resultado final del proceso, donde las plantillas se personalizan con contenido específico, creando interfaces completas y listas para su implementación.