Customizing the design of your app

Base44 gives you several ways to design your app: the Theme panel for global colors and fonts, Edit mode for per-element styling, and AI chat for broader changes. This page covers each approach with prompts and examples you can use directly.

For building a consistent design system, working with images, responsive layout, and accessibility, see Design foundations and layout.

Working with AI on design

AI is at the center of how you design in Base44. You can just describe what you want in natural language, and AI updates code, styles, and components for you. Edit mode lets you tweak what you see on screen, and AI Controls help you set boundaries.

Using the AI chat as your designer

The AI chat is ideal for global changes and design decisions that affect many parts of your app. You can define a persona and brief once, then build on that:

You are my product designer for this app.
Design brief:
- Purpose: Help content teams plan, write, and ship articles faster.
- People: Busy content leads and writers on laptops during the workday.
- Feel: Calm, focused, modern, trustworthy.
Use this brief as the basis for all design suggestions and decisions.

Helpful patterns:

Ask for a critique before asking for changes.
Ask for a plan in Discuss mode, approve it, and then ask AI to implement it.
Always clarify the scope of the design: the whole app, one page, or one element.

Example:

Critique the design of this dashboard only.
Focus on layout, hierarchy, color, typography, and spacing.
Then propose a short plan of small changes.
Wait for my approval before you apply anything.

After you review:

Apply the plan you proposed for this dashboard.
Make changes in small groups and describe each group briefly as you go.

Using Edit mode for local tweaks

Edit mode is ideal when you want to adjust what you see without rewriting everything.

Click Edit in the chat and then select the element you want to change. You can:

Select a section and adjust colors, spacing, and layout visually.
Ask AI to restyle just one component instance.
Delete elements you no longer need using the Delete icon .
Use it as a safe sandbox before you roll a pattern out to the rest of your app.

Click Edit Element on the Edit toolbar to ask the AI to make changes. For example:

In this selected section:
- Lighten the background slightly
- Increase vertical spacing between the heading and content
- Use the primary button style for the main action and secondary style for the others

For this card only:
- Increase padding
- Move the icon to the left of the title
- Use a softer shadow that matches other cards in the app

Using AI Controls, scope, and safety

Use the AI Controls in the chat to guide and protect your design.You can:

Set design guidelines that apply to every prompt.
Freeze specific files or pages so AI does not change them.
Establish a tone such as minimal, bold, or playful.

Example guidelines:

Global design guidelines:
- Prefer calm, minimal visuals with plenty of white space
- Use rounded corners with radius 12 on cards and buttons
- Avoid heavy gradients and glass effects
- Keep animations subtle and respect reduced motion preferences

Always be explicit about scope in your prompts. The same change can apply to the whole app, one page, or a single element, and AI will follow your lead:

Update the primary button style and propagate it to all places where the primary button component is used.
Do not change secondary buttons.

Update only the hero section on the homepage:
- Change the background to a soft gradient
- Increase the heading size
- Use the primary button style for the main call to action
Do not change other sections or pages.

To protect areas you are happy with while experimenting elsewhere:

Use AI Controls to freeze specific files or pages so AI does not change them.
Use the Revert option on individual prompts to undo a single change.
Use version history to roll back to an earlier state.

Critique loops and exploring alternatives

You can use the AI chat to explore different directions before you commit.Critique loop:

Act as a senior product designer.
Review this page and describe three specific visual issues.
For each issue, write a Base44 prompt that would fix it.
Do not make any changes yet.

Alternative directions:

Create two visual options for this dashboard:
- Option A: very minimal, mostly neutral with a single accent color
- Option B: more expressive, with richer color and slightly larger typography
Keep content and layout the same.
Describe each option in a short summary and wait for me to choose.

Once you pick an option, you can ask AI to apply that direction to similar pages.

Choosing from AI design options

When you ask the AI to change the design or layout of a section or element, it may present visual options for you to choose from instead of applying a change right away. Each option shows a preview so you can see what it will look like before committing.

Select the option you want and click Submit, or click Skip to let the AI decide.

Global changes

The Theme panel lets you set colors and fonts for your entire app from one place. Any change you make applies everywhere instantly, so you do not have to update elements one by one. The panel shows a preview of your current palette at the top, followed by a list of color roles you can customize, such as background, foreground, primary, secondary, card, and popover. Click Fonts at the top of the panel to set your app’s font instead.

Accessing and customizing your app's theme

Theme colors

Click any color role to update it across your entire app. To change a color in your theme:

Click the Theme icon at the top of your app editor.
Click any color role in the list to open the color picker. The bar at the top of the panel is a preview of your current palette and is not clickable.
Choose your color by dragging the picker, entering a hex value, using the eyedropper to sample any color on screen, or picking from a palette using the dropdown at the bottom of the picker.
Click Apply to preview the change in your app.
Click Save & Apply in the Theme panel to apply it everywhere.

Start with your primary color and background, then let those guide your other choices. Keeping foreground and background colors high contrast makes text readable across all components.

If your theme colors do not match your app’s current colors, you can ask the AI chat to sync them. For example: Update my theme to match the colors used in my app.

Fonts

Set your app’s fonts from the Fonts tab in the Theme panel. A dropdown appears for each font your app uses. To change your app fonts:

Click the Theme icon at the top of your app editor.
Click the Fonts tab.
Click a dropdown and select a font. You can search by name or browse Brand Fonts and All Fonts.
Click Save & Apply to apply the changes across your app.

If you don’t see a Fonts tab, your app may not have theme font variables set up yet. Ask the AI chat to add them: Add theme font variables to my app so I can change fonts from the Theme panel.

Element changes

When you are in Edit mode, you can style any individual element directly. Select an element and use the icons in the Edit toolbar to change its colors, typography, spacing, corner radius, opacity, or add custom Tailwind classes. The options available in the toolbar change depending on the type of element you select.

Colors

You can set the background and text color of any element using the colors defined in your theme or a custom color.

To change the color of an element:

Click Edit at the top of the editor.
Select the element you want to change.
Click the Colors icon in the Edit toolbar.
Select the part you want to change, such as background or text.
Choose your color:
- Theme: pick from the color roles defined in your theme, such as background, foreground, card, and primary.
- Custom: drag the picker, enter a hex value, use the eyedropper to sample any color on screen, or pick from a palette using the dropdown at the bottom of the picker.
Click Apply to confirm the change.

For image elements, the toolbar shows a Replace button instead of the Colors option. Click Replace to swap the image.

Typography

When you select a text element, the Edit toolbar shows controls for font family and size. A separate Text Style panel gives access to alignment, case, and decoration. To edit text content:

Click Edit at the top of the editor.
Select the text element.
Click the T icon in the Edit toolbar.
Type your changes in the Text Content field.

If the text content is dynamically generated, the Text Content panel shows a message that it cannot be edited directly. Use the AI chat to change dynamic text.

To change the font:

Click Edit at the top of the editor.
Select the text element.
Click the font family dropdown in the Edit toolbar.
Search or browse fonts and click one to apply it. Hover over a font with a > arrow to see available weights, then click a weight to apply it.

To use a custom font, click Upload Fonts at the bottom of the dropdown. You can upload TTF, OTF, WOFF, or WOFF2 files up to 5 MB. Uploaded fonts appear under Custom Fonts in the filter.

To change the font size:

Click Edit at the top of the editor.
Select the text element.
Click the size dropdown in the Edit toolbar.
Choose a size. Available sizes range from 12 to 128.

To change text style:

Click Edit at the top of the editor.
Select the text element.
Click the Text Style icon in the Edit toolbar.
Adjust the settings you want to change:
- Alignment: left, center, right, or justify.
- Case: none, uppercase, lowercase, or capitalize.
- Decoration: none, underline, strikethrough, or italic.

Spacing

You can set the margin and padding for any element in px, controlling each side independently. To change the spacing of an element:

Click Edit at the top of the editor.
Select the element you want to change.
Click the Spacing icon in the Edit toolbar.
Enter values in px for margin and padding. Use the horizontal and vertical shorthand controls to set both sides at once.

Corner radius

You can round the corners of any element by entering a value in px. To change the corner radius of an element:

Click Edit at the top of the editor.
Select the element you want to change.
Click the Corners icon in the Edit toolbar.
Enter a value in px or use the arrows to adjust it.

Opacity

You can make any element fully opaque, semi-transparent, or anywhere in between. To change the opacity of an element:

Click Edit at the top of the editor.
Select the element you want to change.
Click the Opacity icon in the Edit toolbar.
Drag the slider or enter a value from 0 (fully transparent) to 100 (fully opaque).

Tailwind classes

For styling not covered by the other options, you can enter any Tailwind CSS class directly. To add Tailwind classes to an element:

Click Edit at the top of the editor.
Select the element you want to change.
Click the Tailwind Classes icon in the Edit toolbar.
Type any Tailwind CSS class. For example, shadow-lg adds a large shadow and border border-gray-200 adds a subtle border.

Themes and modes

Visual direction is the overall tone of your app. Themes are ways to express that tone using depth, color, and effects. In Base44, you can lean into a theme and still keep your brand intact.

Design themes

Neumorphism

Soft, extruded elements that look pressed into or raised from the background.Best for calm tools with simple content.Key features:

Subtle inner and outer shadows
Soft, monochromatic palettes
Minimal depth and clean shapes

Prompt idea:

Give this app a soft neumorphic touch:
- Keep the current color palette
- Add subtle shadows to cards and primary buttons
- Avoid heavy contrast backgrounds
- Keep text contrast high for readability

Glassmorphism

Frosted glass surfaces with transparency and blur effects.Best for overlays, side panels, and selected cards.Key features:

Backdrop blur
Transparent panels with subtle borders
Light glow and reflection effects

Prompt idea:

Apply a subtle glass effect to overlays and side panels only:
- Use translucent surfaces with blur and a thin border
- Keep backgrounds simple so text remains readable
- Maintain strong text contrast on glass surfaces
Do not apply glass effects to all cards or main content.

Material style

Structured, grid based layout with clear elevation and bold color.Best for dashboards, admin tools, and data heavy apps.Key features:

Clear elevation layers
Clean grids and alignment
Purposeful motion

Prompt idea:

Move this app toward a soft material style:
- Use clear card elevation for key sections
- Clean up alignment and grids so content lines up
- Use bold, flat colors rather than strong gradients
- Keep transitions subtle and purposeful

Claymorphism

Soft, puffy elements with rounded shapes and gentle shadows.Best for playful apps, onboarding, or lighter experiences.Key features:

Rounded corners
Pastel or soft color palettes
Soft, even shadows

Prompt idea:

Add a light clay feel to key components:
- Round the corners of cards and primary buttons more
- Use softer shadows under those components
- Keep backgrounds neutral so the app remains readable
Apply this style only to interactive elements, not long text sections.

Neo brutalism

Deliberately bold, with strong color blocks and thick borders.Best for landing pages and internal tools where personality matters more than subtlety.Key features:

High contrast color combinations
Thick borders and strong shapes
Raw typography and simple grids

Prompt idea:

Apply a controlled neo brutalist feel to the marketing pages:
- Use one bold accent color, one dark, and one light neutral
- Add thick borders and clear sections
- Make headings large and confident
- Keep body text highly readable
Do not apply this style to data tables or dense forms.

Light and dark themes

Light and dark themes let people choose what feels best and can help in different environments. You can ask the AI chat to add theme support and a toggle.

Light and dark mode themes in a Base44 app

Code example for theme handling in a Base44 app

Prompt:

Add light and dark mode support:
- Light mode: soft gray backgrounds and dark text
- Dark mode: near black backgrounds, light text, and subtle borders
- Primary and accent colors should remain readable and consistent in both modes
Add a theme toggle in the header and remember the choice per visitor.

Theme support touches many components, so it can take AI some time to wire everything up. You can also specify changes that should apply only in light mode or only in dark mode.

Motion and feedback

Motion and feedback help people understand what is happening on screen. You can use them to make clicks feel responsive, show that something is loading, and explain what to do next. In Base44, AI can add these patterns for you, so you do not have to hand code every animation. Use this section when your app already works, but feels a bit flat or static, and you want it to feel more alive and reassuring.

Adding subtle interactions and animation

Micro interactions are small visual reactions to what someone does, for example:

A button that slightly grows and brightens on hover.
A card that lifts when you move the mouse over it.
An icon that gives a small checkmark animation when something is saved.

These effects make the app feel responsive without turning it into a cartoon.You can ask AI to introduce a consistent set of interactions:

Add subtle interactions:
- Fade in each page on load with a short duration
- Make primary buttons gently grow and brighten on hover and focus
- Add a small lift effect to cards on hover
Respect reduced motion preferences and avoid any rapid flashing.

For marketing or promo pages, you can use a stronger tone:

On marketing pages only:
- Slide hero sections in from the side on first load
- Animate icons when a feature card becomes focused or hovered
- Keep animations short so the page still feels fast

Add motion after you are happy with colors, layout, and typography. Motion should support clarity, not hide weak structure.

Designing loading, empty, and error states

Loading, empty, and error states are the places where people often feel stuck. Good feedback here can make your app feel much more polished and forgiving.Examples:

Loading: skeleton shapes that match the final layout instead of a generic spinner.
Empty: a friendly message that explains what will appear here and a button to create or connect something.
Error: a short, human explanation and a clear way to retry or get help.

You can ask AI to create these patterns across the app:

Improve feedback states:
- For each main list and dashboard, add a skeleton loader that matches the layout
- Design an empty state with an icon, one line explanation, and a primary action
- Add a clear error state with a short message and a retry button where relevant
Use the existing color and typography system.

These changes do not affect your data or logic, they only change how your app communicates to people when something is loading, missing, or has gone wrong.

Quick tricks

If you want fast improvements, these short recipes can help you get a lot of value with a few prompts.

Make a flat prototype feel polished

Introduce a simple color system and apply it globally.
Define clear text roles and increase line height.
Add basic card and button components and reuse them.

Prompt:

Polish this prototype:
- Create a simple color system and apply it across the app
- Define typography roles for titles, headings, and body text
- Standardize buttons and cards and use them consistently
Keep content and logic the same.

Rescue a cluttered table page

Increase row height slightly and add subtle separators.
Move actions into a consistent column or menu.
Add filters in a clear top bar.
Add loading, empty, and error states.

Prompt:

Clean up this table page:
- Increase row height and add subtle row separators
- Move row actions into a consistent column at the end
- Add a simple filter bar above the table
- Add clear loading, empty, and error states

Soft visual refresh without changing brand colors

Adjust spacing and hierarchy.
Update card and button shapes.
Introduce subtle micro interactions.

Prompt:

Give this app a soft visual refresh:
- Keep brand colors the same
- Improve spacing and hierarchy on each page
- Round card and button corners slightly and soften shadows
- Add subtle hover and focus states to primary actions

FAQs

Click a question below to learn more about designing your app.

What is Tailwind CSS and how do I read its class names?

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, you can check the official Tailwind CSS documentation.

How do I undo AI changes or restore a previous version of my design?

You can use design version control in the AI chat to roll back changes.

Each AI prompt has a Revert option that instantly undoes everything that specific prompt changed in your app.
The clock icon in the AI chat opens version history. You can choose an earlier saved version of your app and roll back to it in one step.

Learn more about AI chat modes and version history.

How do I delete an element from my app?

You can ask the AI chat to remove the specific element, or click Edit in the AI chat and select the element, then click the Delete icon .

Getting started

Building your app

Designing your app

Managing app data

Adding logic to your app

Selling on your app

Using on mobile

Domains

Securing your app

Measuring your app

Growing your app's reach

Superagents

Integrations

Working with AI on design

Global changes

Theme colors

Fonts

Element changes

Colors

Typography

Spacing

Corner radius

Opacity

Tailwind classes

Themes and modes

Design themes

Light and dark themes

Motion and feedback

Quick tricks

FAQs

​Working with AI on design

​Global changes

​Theme colors

​Fonts

​Element changes

​Colors

​Typography

​Spacing

​Corner radius

​Opacity

​Tailwind classes

​Themes and modes

​Design themes

​Light and dark themes

​Motion and feedback

​Quick tricks

​FAQs

Working with AI on design

Global changes

Theme colors

Fonts

Element changes

Colors

Typography

Spacing

Corner radius

Opacity

Tailwind classes

Themes and modes

Design themes

Light and dark themes

Motion and feedback

Quick tricks

FAQs