The Foundation-Hierarchy-Boundaries Framework: Architectural Factors Affecting Modular System Clarity

Modular systems are fundamental to information systems architecture, yet the factors contributing to their intuitive clarity remain underexplored, limiting their effective adoption. Design systems are a particular example of a modular system and they have become critical for managing UI complexity in information systems, yet lack scientific validation despite widespread industry adoption. This paper presents an empirical evaluation of the Atomic Design system through a mixed-methods study with 18 novice designers including a systematic qualitative analysis and the comparison of inter-rater reliability measures. Based on the findings, the paper derives the Foundation-Hierarchy-Boundaries (FHB) Framework for clarity in modular system architecture. The FHB Framework identifies three architectural factors of modular system clarity: (i) Foundation (accessible modular base components), (ii) Hierarchy (flat architectural structures of modular components), and (iii) Boundaries (clear categorical distinctions between types of modular components). We demonstrate the framework's application through evidence-based design guidelines for design systems, providing both theoretical contribution to modularity research and practical guidance for practitioners.