GoodBarber
  • Pricing
LoginCreate an app
  • TOP APP TRENDS
  • eCommerce
  • Memberships
  • Online Courses
  • Bookings
  • Travel guide
  • Events
  • Employee Communication
  • Content Creators
  • Pickup & Delivery
  • THE ESSENTIALS
  • Newspaper
  • Radio
  • Schools
  • Faith
  • Organizations
  • Restaurant
  • Grocery
  • Custom apps
  • GoodBarber for ResellersYou have an agency and you want to resell our solutionsDiscover the offer
  • Custom developmentGoodBarber builds the app that fits your unique business needsRequest a quote
Browse all solutions
  • NO CODE APP BUILDER
  • Content apps
  • eCommerce apps
  • Extensions Store
  • The ultimate dashboard
  • TECHNOLOGY
  • Native app (iOS & Android)
  • Progressive Web App
  • Design system
  • Developers
  • GoodBarber logoWHY GOODBARBER?
  • GoodBarber DNA
  • GoodBarberheart emojiDesign
  • The best app builder
  • PRODUCT RESOURCES
  • Blog
  • GoodBarber Academy
  • Video tutorials
  • FAQ
  • Updates & Releases
  • Online help
  • The ultimate GoodBarber guide
  • TOPICS
  • How to create an App
  • How to test an app with TestFlight
  • How to create a Google Developer Account
  • How to convert an excel file into an App
  • App builder: make stunning mobile apps without coding
  • Awesome supportReal experts to help you at every step of your mobile app journeyDiscover
  • resellerMOBILE APPS RESELLERS
  • Reseller program
  • How to sell an app?
  • Reseller testimonials
  • Reseller Blog
  • compassDISCOVER
  • Use an app builder to sell apps
  • Download our agency guide
  • Apple & Google's marketing tips to sell their products and services
  • GBTC: Publish your app with easeDiscover GoodBarber Takes Care and simplify the app publication process for both the App Store and Google Play. Let us handle the technical details for you.Learn more about GBTC

Design System

Overview
  • Foundations
    • Layout
      • Grid
      • Spacing
      • Breakpoints
      • Layers
    • Graphic elements
      • Color
      • Typography
      • Images Aspect Ratios
      • Icons
  • Atomic Components
    • Color atom
    • Font atom
    • Image atom
    • Gradient atom
    • Shape atom
    • Shadow atom
    • Size atom
    • Border atom
    • Blur atom
    • Overlay atom
  • UI Components
    • Background
    • Text Field
    • Dropdown
    • Date & Time Picker
    • Checkboxes & Radio Button
    • Button
    • Thumbnail
    • Form
Foundations icon

Foundations

Grid, Spacing, Breakpoints, and Layers form the backbone of our templates, ensuring consistent layout and organization for essential graphic elements such as Color, Typography, Images, and Icons.

  • Layout

    • Layout of visual elements on the pages

      Grid

      Space organization and layout of graphic elements on pages.

    • spacing inside and between components

      Spacing

      The art of setting distance between elements on an app's page or screen.

    • breakpoint

      Breakpoints

      Key points where your app's layout adjusts for various screens and devices.

    • layers

      Layers

      Layering elements to create design priorities and hierarchies.

  • Graphic elements

    • colors

      Color

      Predefined themes or custom colors to design consistent, personalized applications.

    • Typography

      Typography

      Choosing and styling fonts for clear and effective communication.

    • Images ratio

      Images Aspect Ratios

      Maintaining image consistency and visual harmony across the app.

    • Icons

      Icons

      Providing intuitive visual cues for navigation and interaction

  • COMPANY
  • About Us
  • Awesome support
  • GoodBarber DNA
  • Startup Studio
  • Jobs
  • Press
  • T&C
  • Privacy Policy & GDPR
  • Contact us
  • PRODUCT
  • eCommerce app builder
  • Mobile App Builder
  • PWA Builder
  • Extensions list
  • App Reseller Program
  • Pricing
  • Users feedback
  • Developers
  • Custom app development
  • SOCIAL
  • Facebook
  • Instagram
  • Twitter
  • YouTube
  • Linkedin
  • Threads
  • TikTok

© GoodBarber - Since 2011 - Made in Corsica

  • Language
  • en
  • fr
  • it
  • es
  • pt
  • de
  • nl
  • fi
  • sv
  • no
  • da