Skip to main content
Design is one of the quickest ways to level up your app. In Base44, you’ll find simple, beginner-friendly ways to adjust colors, fonts, layouts, and more, giving your app the look and feel you’re after. This guide walks you through easy wins first, then moves into advanced customization for when you want even more control.

​
Styling

Styling is where you shape the overall look and feel of your app. When you make clear decisions about themes, colors, layouts, and effects, you create an interface that feels intentional, on-brand, and easy to understand.

​
Themes

Themes are visual systems that give your app a recognizable personality. Instead of styling every screen from scratch, you choose an overall direction and then keep everything consistent with that choice. Below are some theme examples you can use.
Neumorphism PnApply the Neumorphism styling described here: Soft, extruded UI elements that appear to push through the surface, using subtle shadows to create a physical, tactile feel.Key features: Subtle shadows, soft UI, monochromatic palette, minimal depth, light/dark versions
Tips:
  • Keep the background and card colors very close in tone so shadows feel natural.
  • Reserve strong contrast for text, icons, and primary actions so they stay readable.
  • Avoid using this style for dense data tables or long text, where higher contrast works better.
Glassmorphism PnApply the Glassmorphism styling described here: Frosted glass effect with transparency, blur, and subtle borders that create depth and layering.Key features: Backdrop blur, transparency, subtle borders, light reflections, layered interfaces
Tips:
  • Use it for specific surfaces such as side panels, overlays, or cards instead of every element.
  • Place glass panels over simple, calm backgrounds so content stays legible.
  • Always check that text on glass still meets contrast guidelines, especially in light mode.
Materialdesign PnApply the Material Design styling described here: Google’s design language using grid-based layouts, responsive animations, padding, and depth effects like lighting and shadows.Key features: Paper metaphor, bold colors, grid system, responsive animations, elevation shadow system
Tips: 
  • Stick to a small set of elevation levels, for example: base surface, raised cards, and top-level overlays.
  • Use shadows and borders consistently to signal that something is interactive.
  • Choose one corner radius value and reuse it across buttons, cards, and inputs.
Claymorphism PnApply the Claymorphism styling described here: Soft, puffy, rounded UI elements that appear like clay, with soft shadows and pastel colors.Key features: Soft shadows, rounded corners, pastel colors, puffy appearance, playful feel.
Tips:
  • Use it on key components such as cards, buttons, and icons, and keep backgrounds simple and neutral.
  • Avoid combining too many bright colors with this style, or the interface can feel noisy.
  • Keep text areas clean and flat so longer content is still easy to read.
NeobrutalismApply the styling described here: Bold colors, high contrast, thick borders, raw functionality, and intentionally “undesigned” aesthetics with rough edges.Key features: High contrast colors, thick borders, harsh shadows, raw typography, unconventional layouts
Tips:
  • Limit yourself to a very small palette: one bold color, one dark, and one light neutral.
  • Use clear visual cues for interaction, for example underlined links and solid buttons, so nothing feels ambiguous.
  • Pair bold headings with simple, highly readable body text.

​
Colors

Colors set the mood of your app and make actions easy to spot. In Base44, you can bring in your own brand colors, let the AI chat build a palette for you, and then apply those colors across your app in a consistent way.
Changing the color palette of your app in Base44

Changing the color palette of your app in Base44

If you do not have a palette yet, or you want to explore new directions, you can ask the AI chat to create one for you. I want my app to be a calming support tool, create a full color palette that fits. To make changes to a specific part of your app, click Visual Edit and click the Colors icon .
Changing the colors of a section of your app

Changing the colors of a section of your app

You can also use Visual Edit to fine-tune the colors of specific elements
Tip: For accessibility, make sure to adjust color pairs so text and icons have enough contrast against their background.

​
Layouts

You can change the layout of your pages either by asking the AI, using Visual Edit, or by adjusting spacing yourself.
Using the AI chat to change the layout on a page

Using the AI chat to change the layout on a page

In your prompt, you can be specific in the layout you want, for example: I want the Product page to have a simple two-column layout, with filters and navigation on the left, and the main content and primary action on the right. If there is a specific section you want to rearrange, it’s best to use Visual Edit and select the section. Below are some ideas of what you can do:
Using Visual Edit, click the section you want to change and click the Spacing icon .Manually editing the spacing of elements in Base44
Using Visual Edit, click the section you want to rearrange and click Edit Element, then enter your message for AI.Using AI to change the layout of a section in Base44

​
Effects

Effects change how your app feels without changing what it does. In Base44, the AI can layer on creative treatments such as whiteboard-style backgrounds, sticky-note cards, or textured headers. You can apply these across a whole page or only to specific elements like cards, headers, buttons, and side panels. Example prompt: "Transform project cards into pastel post-it notes with thumb tacks and transparent tape." Screenshot2025 08 15at10 57 51AM Pn Other effect prompt ideas:
Restyle the buttons so they feel like glossy gel buttons with a subtle shine on hover.
Add a gentle glow around active navigation items so it is clear which page is selected.
Tip: Use npm packages for motion or 3D touches, then ask the AI to align colors, borders, and shadows so these components feel like a natural part of your app’s design.

​
Pages

At the top of your app editor, there is a page drop-down. This shows all the pages in your app and helps you navigate between them to view and edit them. Just select a page to view that page in preview. Pagenav Pn When making changes, you can also tell the AI whether you want them applied everywhere (global) or just to one page/element (local).
  • Global example: “Apply this background to all pages.”
  • Local example: “Apply this background only to the login screen.”
For more control, you can use AI Controls (gear icon in the AI chat). This allows you to:
  • Add custom instructions that apply to every AI interaction
  • Freeze specific pages or files so the AI doesn’t touch them
AI Controls Pn

​
Images

Prompting for images:
  • You can ask the AI to add images to pages (e.g., “Add a full-width hero image to my homepage”)
  • The AI will add a stock placeholder image
Nord Haus2 Pn Replacing images:
  • To replace it, go into the code view of your dashboard
  • Locate the page file (e.g., Store.js)
  • Find the <img> tag for that image and update the src with your new image URL
Other image options:
  • Upload your own product or entity images via the Data section of the dashboardImages and using reference images
Screenshot2025 08 15at4 14 15PM Pn Reference images Referenceimage (Before and after using a reference image to change the design of the app) Click the Upload icon(+) next to Visual Edit to add an inspiration image. Next, tell the AI specifically what you want to borrow from this inspiration image, such as:
  • Colors
  • Fonts
  • Button shapes
  • Icon style
  • Background textures
Being detailed helps the AI match your vision more closely.

​
Customizing elements

Your chosen style will set default colors, but you can change them anytime using Visual Edit (below the AI chat box). Click Visual Edit, then click the element in your preview window that you want to adjust. Using the Visual Edit panel in the AI chat, you can adjust the following:
  • Background color
  • Text color
  • Margins and padding
  • Tailwind classes (for advanced users)
Base44 apps include elements like navigation bars, cards, buttons, and modals. You can ask the AI to restyle or replace these elements. Example: “Replace all rectangular buttons with rounded ones and add a drop shadow.”

​
Fonts & icons

  1. Visit Google Fonts and copy the embed @import code snippet for your chosen font.
    Prefer another font provider? No problem, just grab the embed code and add it the same way.
    Screenshot2025 08 15at3 32 07PM Pn Screenshot2025 08 15at3 32 49PM Pn Screenshot2025 08 15at3 37 47PM Pn
  2. Add it to Layout.js manually or by prompting the AI to add it and to apply it globally.
Example: “Apply Raleway font to all headers.”
Screenshot2025 08 15at3 52 32PM Pn
  1. Browse the Lucide icon library.
  2. Hover to find the icon’s name.
  3. Head back into your Base44 app and type your prompt: Please replace "{undesired icon name}" with "{desired icon name}" on all pages where it is used.

​
Animations

Base44 supports animations using Framer Motion + Tailwind CSS. Just ask the AI to add them. Examples include:
  • Entrance: fade in, slide in, scale up
  • Hover effects: grow, color shift, shadow deepen
  • Transitions: smooth expand/collapse, crossfade between views
  • Micro-interactions: button bounce on click, checkmark after saving

​
Themes (Light and dark mode)

You can ask the AI chat to add a theme toggle for light mode and dark mode. It will:
  • Add a theme state (light/dark)
  • Update styles across components
  • Add a toggle button
Lightmodedarkmode Pn Screenshot2025 08 15at4 04 38PM Pn
Note: Because this requires many behind-the-scenes changes, it may take some time for the AI to complete. You can also tell the AI if you want certain changes to apply only in light mode or only in dark mode for finer control over the look.

​
FAQs

Click a question below to learn more about designing your app.
To make your app more accessible, focus on a few key practices when you design and write content:
  • Maintain strong color contrast between text and background so people with low vision or color blindness can read your content.
  • Provide clear alt text for important images that explains what is happening or what the image is for. You can prompt the AI to generate or improve alt text by telling it exactly what you want it to say.
  • Add descriptive labels to buttons and links so it is obvious what happens when someone activates them, for example “Save changes” instead of “OK.”
  • Add descriptive tooltips to icons so their meaning appears on hover or focus. You can ask the AI to write short, action based tooltips for you.
  • Ensure keyboard navigation works. You should be able to move through interactive elements using Tab and activate them with Enter or Space, in a logical order.
  • Avoid animations that flash rapidly or use strong flicker, as they can cause discomfort or trigger seizures.
  • Keep text readable with clear headings, short sentences, and a minimum font size that is comfortable on both desktop and mobile.
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS rules, you add small class names directly to your elements to control color, spacing, typography, and layout. Each class name usually maps to a single visual rule, so you can “read” the design from the classes themselves.Common examples you might see:
  • colors: bg-blue-500 sets a blue background, text-white sets white text
  • spacing: p-4 adds padding on all sides, m-2 adds margin on all sides
  • typography: font-bold makes text bold, text-lg sets a larger text size
  • layout: flex creates a flex container, grid creates a grid container, items-center vertically centers items in a flex or grid row
When you see Tailwind classes in Base44, you can combine them to describe the full style of an element. For example, bg-blue-500 text-white p-4 flex items-center gives you a blue bar with white text, padding, and centered content. For deeper reference and the full list of utilities, visit Tailwind’s official documentation.
Design for mobile, tablet, and desktop separately, then check how your layouts adapt between them.Use these guidelines when you design in Base44:
  • Mobile: Use a single vertical column, keep one clear primary action per screen, and make tap targets large with enough spacing. Keep text short so people do not need to zoom.
  • Tablet: Treat tablet as a hybrid. You can use side menus or split layouts, but keep buttons touch friendly and avoid very small tables or dense controls.
  • Desktop: Use the extra width for multi-column layouts and sidebars. You can add hover effects, but any important action must also work with a click or tap.
  • All devices: Use readable font sizes, avoid horizontal scrolling, and let elements stack instead of overlap when space is tight. Do not fix heights in a way that cuts off content.
  • Media: Make images and video scale with their container, keep key content away from the edges, and check that text on top of images is still readable on small screens.
  • Testing: Try key flows like sign up or checkout on real phones, tablets, and desktops, in portrait and landscape. Confirm that every action is visible, reachable, and not blocked by the on screen keyboard.
Design choices have a direct impact on how fast your app loads and feels. When you design in Base44, keep these guidelines in mind:
  • Use optimized image sizes so large assets do not slow down initial load. Prefer compressed formats and avoid uploading images much larger than they appear on screen.
  • Limit heavy animations and complex effects, especially in mobile-heavy apps. Short, simple transitions are fine, but avoid constant motion or large animated backgrounds.
  • Keep layouts clean and focused. Fewer layers, overlays, and nested components usually mean faster rendering, especially on low end devices.
  • Reuse components instead of creating many slightly different versions. Shared components are easier to cache and maintain.
  • Avoid loading everything at once. Where possible, load non critical content later, for example secondary sections, long lists, or rarely used panels.
  • Be careful with third party embeds such as maps, video players, and widgets. Only include them where they add real value, and avoid stacking many embeds on a single screen.
For deeper guidance on measuring and improving performance, including SEO considerations, learn more about app performance in Base44.
You can use design version control in the AI chat to roll back changes.For quick fixes, each AI prompt has a Revert this option that instantly undoes everything that specific prompt changed in your app.If you want to go further back, click the clock icon in the AI chat to open version history. From there, you can choose an earlier saved version of your app and roll back to it in one step. Learn more about reverting and version history.