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.

​

Beginner-friendly tools

​

1. Choosing a styling option

When you’re in the AI chat on the main Base44 workspace page (the first prompt), you’ll see a button labeled “Styling instructions”. This lets you pick from a set of ready-made design templates you can apply to your entire app instantly. Once you’re inside your app’s own AI chat box, the “Styling instructions” button does not appear again. However, you can still apply a styling option by copying and pasting its description into the chat. For example, to apply Neo brutalism, you could copy and paste the following:

Neo-Brutalism

Apply 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

For convenience, you can refer to the descriptions below so you can easily copy and paste them into your AI chat whenever needed.

---

​

2. Global vs. local design changes

When making changes, you can 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

---

​

3. Customizing colors and layout

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)

---

​

4. Using a reference image

(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.

---

​

5. Adding Google fonts

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.
   
2. Add it to Layout.js manually or by prompting the AI to add it and to apply it globally.

---

​

6. Updating icons

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.

---

​

7. Theme switching (dark/light 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

---

​

8. Responsive design tips

Device type	Key considerations
Mobile	prioritize vertical layouts, bigger tap targets, minimal text per screen
Tablet	hybrid layouts—more space for menus but keep touch-friendly buttons
Desktop	make use of wide layouts, multi-column designs, hover effects
All	test with real devices, ensure readable font sizes, and avoid horizontal scrolling

---

​

9. 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

---

​

10. Accessibility best practices

• Maintain color contrast for text
• Provide alt text for images (you can prompt the AI to update alt text by telling it exactly what you want)
• Add descriptive labels for buttons and links
• Add descriptive tooltips to icons so their meaning appears on hover (prompt the AI to do this)
• Ensure keyboard navigation works
• Avoid animations that flash rapidly

---

​

Advanced customization

​

1. Element changes

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.”

---

​

2. Image and media handling

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

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 dashboard

---

​

3. Custom gradients and background patterns

The AI can create creative effects based on your prompts, such as whiteboard backgrounds, sticky-note style cards, or textured headers. Example prompt: "Transform project cards into pastel post-it notes with thumb tacks and transparent tape."

---

​

4. Tailwind CSS basics

Tailwind is a utility-first CSS framework. You style elements by adding short class names. Examples:

• colors: bg-blue-500 (background), text-white (text)
• spacing: p-4 (padding), m-2 (margin)
• typography: font-bold, text-lg
• layout: flex, grid, items-center

---

​

5. Branding integration

To change your logo:

• Upload it in Dashboard → Overview.
• Click the logo and either upload your own or click Generate Logo to create a new one with the AI.

For colors:

• Upload a color palette into AI chat and tell it to apply globally
• Use Visual Edit to fine-tune specific elements
• Specify exact hex codes if you want precise matches

---

​

6. Performance considerations

• Use optimized image sizes to keep load times quick
• Avoid excessive animations on mobile-heavy apps
• Keep layouts clean and focused for faster performance

---

​

Utility tools

​

Design version control

Every AI prompt has a “Revert this” option to undo changes instantly. You can also click the clock icon in the AI chat to open version history, where you can roll back your app to any previous saved version.

---