Napps provides you with all of the tools you need to design a fully-branded mobile app. With no coding or UI experience required, you can design your app and update it in real time.
You can access these design settings by clicking on Pages Manager then open/create page. The App Branding section will appear on the left side of your screen as shown in the image below.
Style settings
In the Style Settings, you can add your brand logo, which will appear at the top of your home. You can also adjust the image aspect ratio and image mode to ensure it fits properly.
It is recommended to use a logo with a size of 500 × 200 px.
Brand Logo
In order to strengthen the overall brand experience in your app, you can add your brand logo to it. The logo will be visible in the header of the homepage, acting as a prominent representation of your brand. To ensure a seamless experience when customizing the primary color, make sure that your logo has a transparent background.
Photo Format
Choose the photo format to be applied to all products in your app.
Square - Your product photos will appear with the same width and height. Good for shoe brands for example.
Portrait - Your product photos will appear with an aspect ratio of 4:5 or 2:3 and you can pick the format that suits better your product photos. In case you need a different like 3:4 you need to contact our team at [email protected].
Landscape - Your product photos will appear with the width and height similar to a rectangule.
Image Mode
The "Image Mode" is a feature that allows you to control how an image is displayed within the app. There are two options for this feature: "fill" and "fit."
"Fill" mode will stretch the image to fill the entire space, potentially cropping the edges of the image.
"Fit" mode will display the entire image within the given space, with empty space around the edges if the aspect ratio of the image and space do not match.
Icons
Icons are used throughout the app in various areas, including the navigation bar, Menu/Product Listing Page (PLP), Product Details Page (PDP), Wishlist, and Cart. Each of these sections includes a selection of icons, allowing you to choose the ones that best match your app's design and branding.
Please note that custom icons are only available for the enterprise plan. If you have any questions or concerns, please reach out to our team at [email protected] for further assistance.
Colors
Customizing your app's colors is an important step to create a cohesive user experience. With NAPPS, you're able to customize all the colors inside your app, to the mininum details.
Page Background: Customize the main background color of your app.
Header: Customize the background and content colors of your app's header.
Bottom Navigation Colors: Customize the colors of the bottom navigation, including the icon and border colors for both the selected and unselected states.
Typography Colors: Customize the colors used for text throughout your products and collections, including headings, product titles, and product prices (regular, strikethrough, and discounted prices).
Button Colors: Change how buttons look across your app. Primary is your most important button, like Login or Add to Cart. You can set its background, text, and border colors. Secondary covers all the other buttons in your app. You can customize these to match your brand too.
Primary buttons stand out more because they handle the main actions people take. Making them look different from secondary buttons helps users quickly spot the most important thing to tap.
Secondary buttons are for smaller or less important actions. They should support your primary buttons without pulling attention away from them.
Miscellaneous Colors: Customize the colors of additional UI elements and call-to-actions that are not included in the previous categories, such as the Quick Add icon, Wishlist icon, Status indicators, Product cards, and Integrations.
For each of these elements, you can customize the background, content (text/icon), and border colors.
Loyalty Colors
This feature is available only when loyalty integrations are activated. Since the loyalty page is an important area for your customers, customizing its colors and appearance helps create a more engaging and branded experience.
more appealing look is considered valuable.
This page benefits from the use of vibrant colors to make it stand out and create a more engaging experience for customers.
Typography
This feature allows you to customize your app’s typography by adjusting options such as font, weight, and size for different text elements, including Titles, Headings, Subheadings, Button Headings, Body Large, Body Regular, and Body Small.
If you want to know more about typography click here.
Tip: Typography changes should be applied consistently to maintain a balanced and cohesive design across the app.
Example: If you reduce one text size by 20%, it is recommended to apply a similar adjustment to the other text styles to preserve the overall visual hierarchy.
Default size/weight and general use table:
Title | 32 | Semibold | Large page headlines |
Heading | 24 | Medium | Section headings and card titles |
Subheading | 17 | Medium | Smaller sub-headings and the title at the top of the screen |
Button Heading | 18 | Bold | Text inside buttons |
Body Large | 16 | Regular | Main body text and descriptions |
Body Large Emphasized | 16 | Semibold | Emphasized 16pt text- prices, ratings, selected options |
Body Regular | 14 | Regular | Everiday text (general content) |
Body Regular Emphasized | 14 | Medium | Emphasized labels and highlighted rows |
Body Small | 12 | Regular | Small text- details |
Body Small Emphasized | 12 | Semibold | Tags and Badges (discount badges, status tags) |
Font
In order to align the app's aesthetic with your brand, you can choose from 16 different fonts. The available options are QuickSand, Jost, League Gothic, CentraNo1, Barlow, Figtree, OS Default, Stick No Bills, Poppins, Source Sans, Playfair Display, Montserrat, Nunito, Lato, Open Sans, and Roboto.
Please note that custom fonts are only available for the enterprise plan and need to be approved by our team before use. If you have any questions or concerns, please reach out to our team at [email protected] for further assistance.
Buttons
Adjust border and corner radius of your primary and secondary buttons.
App Layout
Set the horizontal spacing for your app. This keeps everything lined up and looking the same on any screen size.
This value is used across all components by default. If you don't set your own, the default is used everywhere.
Some areas can only be changed here, like the spacing on your profile page.
In other areas, you can override it. For example, if you add a Product grid in your Menu, Home, PDP, or PLP, its spacing will show 16 (Auto), meaning it's using your default. You can type your own number there to change just that component.
Product Carousels
Customize the product carousel layout across different pages of your app by adjusting the number of products displayed, products per view, and the horizontal spacing between items. This allows you to create a consistent and optimized browsing experience for your customers.
Product Grids
Customize the product grid layout across the Home, Product, Collection, and Menu pages by adjusting the number of products displayed, as well as the horizontal and vertical spacing between items.
Horizontal/Vertical Gap
Vertical and horizontal gaps define the spacing between elements within a layout.
Vertical gap controls the distance between elements arranged from top to bottom, while horizontal gap controls the spacing between elements placed side by side.
Product Cards
Customize the product card layout across different pages of your app. Adjust the appearance and spacing of product cards.
Corner Radius
The corner radius controls how rounded the corners of an element are.
A higher corner radius creates more rounded corners, giving the interface a softer and more modern appearance. A lower radius creates sharper corners, resulting in a more structured and minimal look.
Example:
0 px → square corners
8 px → slightly rounded corners
24 px or more → highly rounded, pill-like appearance
Horizontal Padding
Padding controls the amount of space around text, icons, images, or other components inside a UI element.
In a product card, padding controls the horizontal distance between the product image, title, price, and the card boundaries.
Example:
Small padding → compact design with elements closer together.
Large padding → more spacious design with a cleaner, more premium feel.
Remaining Assets
The remaining assets not addressed in this article like the App Icon or the Launchscreen can be found in the App Listing article.