--- title: "Design System - App Design and UX guidelines to build top mobile apps" description: "Our Design System compiles the UX and App Design guidelines used to build your apps through our app builder to achieve visual consistency across all platforms." canonical_url: "https://www.goodbarber.com/uxdesign/" lang: en --- # Design System - App Design and UX guidelines to build top mobile apps ![ds_banner_alt](<>) # GoodBarber Design System ## Discover how we're revolutionizing app creation for seamless, beautiful experiences across all platforms. [Explore our Design System](/uxdesign/foundations) ### The GoodBarber Design System The GoodBarber Design System is a comprehensive solution serving as a framework, toolbox, and graphic charter for designers and developers. It offers **evolving guidelines** for a consistent design language, ensuring efficiency and scalability. It establishes common design principles and patterns while allowing flexibility and customization when needed. Ultimately, it helps streamline app development and **create beautiful and functional apps.** [Foundations Core principles for cohesive and consistent template construction across all platforms.](/uxdesign/foundations)[Atoms Essential components that guarantee visual consistency and streamline workflow.](/uxdesign/atomic-components)[Components Reusable elements as building blocks for cohesive and user-friendly interfaces.](/uxdesign/ui-components) ### Why these design guidelines? GoodBarber, a no-code app builder launched in 2011, empowers users to create stunning native apps or Progressive Web Apps effortlessly. Upholding our commitment to excellence, we continually provide **the best solutions for beautiful app creation.** In the early days of GoodBarber, UX design wasn’t fully understood, making app development challenging without consistent guidelines. Our journey led us to develop the GoodBarber Design System, offering comprehensive **guidelines and best practices** to achieve **visual consistency, streamline development**, and ensure a **consistent user experience.** By sharing our design principles, we empower users to achieve **consistency, efficiency, and scalability** in their app development, enhancing the overall quality of the apps created with our technology. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-dev@small.a0034b531522.png) **Developers** have access to the technical specifications of the pages and components: their size, their positioning, their behaviors and their properties. ![code icon](https://portal.ww-cdn.com/portal_static/images/designsystem/main/guidelines-design@small.55c3dabb4ecd.png) **Designers** can rely on a set of spacing rules, font sizes, image ratios or color distribution for the creation of new pages. ### Objectives ![ds_objectives_principles_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-04-streamline@small.b7c5264ab429.png) Streamline template creation and production by implementing construction principles. ![ds_objectives_consistency_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-05-consistency@small.6c9cbe395733.png) Ensure visual consistency between the pages of an app across different platforms. ![ds_objectives_smoothux_alt](https://portal.ww-cdn.com/portal_static/images/designsystem/main/landing_page-06-ux@small.35d00be0e89f.png) Guarantee a smooth and optimal user experience ### The GoodBarber Design Principles Great design should be the default, not your burden. GoodBarber was the first app builder to formalize a true design system, so you create beautiful, functional apps without carrying the design work. Six principles make that happen. #### Design by system Every screen is assembled from one formal design system (foundations, atoms and components), so consistency is guaranteed by construction, not left to your discipline. A true three-layer system with 100+ pre-built layouts. The first formalized inside a no-code app builder. #### No design burden You make the creative choices (theme, colors, content); the system silently handles spacing, typography, shape and consistency. No design panel to learn, no spacing scale to plan. Override any default when you need to. #### Native by default One configuration outputs three engines: native iOS (Swift), native Android (Kotlin), and a Progressive Web App (Angular). Compiled Swift and Kotlin binaries plus a PWA. Not a WebView wrapper. #### Set once, consistent everywhere Color, type, spacing, shape and shadow are defined once as semantic roles and reused everywhere, so changing one theme setting updates the whole app coherently. Four semantic color roles, 18 device-calibrated type levels, a multi-device gutter system. #### Legible by default Palettes are designed with contrast and readability in mind, and every control keeps a comfortable tap area, even where the element looks small. Genius Palette (an in-house AI) and comfortable tap areas on every control. #### Polish you can feel Native output unlocks a sensory layer most no-code apps skip. These details are what make an app feel crafted, not generated. Haptic feedback, motion design, a transversal media player, a floating TabBar. GoodBarber designs every app on six principles: design by system, no design burden, native by default, set once and consistent everywhere, legible by default, and a sensory layer of polish. Together they are why someone with no design background ships an app that looks professionally designed. Explore the GoodBarber Design System and unlock the power of seamless app design! [Explore our Design System](/uxdesign/foundations)