Create a workspace design system in Base44 to define your brand’s colors, fonts, logo, and components once, then apply one consistent look across your apps.
A design system saves your brand’s look and feel at the workspace level: its colors, fonts, logo, and a set of matching components. Create it once, set it as your default, and every new app you build starts on-brand, so you do not have to redefine your style each time.You do not need to be a designer. With just a few details, such as your logo, a short description of your brand, the feel you want, and any design files you have, Base44 creates an entire design system for you, so all your apps look professional and on brand.
Your design systems in workspace settings
Availability:
Design systems are available on the Builder plan and above.
Workspaces on the Builder plan and above include 1 design system. Enterprise workspaces have no limit.
Design systems apply to web apps. They are not applied to mobile apps, apps imported from Figma, or apps started from a URL.
Creating and using a design system does not cost credits.
When you create a design system, Base44 fills in everything that keeps your apps looking consistent and on brand, and shows it all in a live preview. Change a color or a font, and every example updates right away, so you always see how it looks.
A design system, with your brand settings on the left and a live preview on the right
A design system covers three things:
Your brand basics: Your logo, brand name, tagline, and a short description, plus your brand’s core values, tone of voice, and design guidelines for how it should look.
Your look and feel: Your colors, your fonts, how rounded your corners are, how much shadow sits under things, and how much space goes between them.
Ready-made pieces: Buttons, icons, and cards that already match your brand, ready to drop into any app.
You create a design system from your workspace settings. In one form you can combine a short description, your logo, an import from Figma or a website, and your own design files, and Base44 generates a complete design system from whatever you provide.To create a design system:
Click your workspace name at the bottom left, then click Settings.
Click Design system.
Click Create. If your workspace already has a design system, click Create new design system instead.
In Create your design system, add any of the following:
Describe your brand: Write a short description of your brand, and add your logo in the square beside it.
Import from Figma or URL: Switch between Figma file and Website URL, then attach a .fig file or paste a website address. Only use URLs where you have the rights to the content.
Upload your design resources: Add images, fonts, a design.md file, or other design files, up to 10 files.
Click Create. Generating your design system can take a few minutes, and you can leave and come back while it runs.
Review the generated design system in the preview, then adjust anything you want.
Creating a design system from your brand's materials
You can import from a Figma file or a website URL, but not both in the same design system. When you attach a Figma file, you can attach all of its pages and frames or choose specific ones. Base44 processes the file to generate your design system and does not store the original file.
When you open a design system, you edit it in a two-panel editor. On the left are all of your brand and design settings. On the right, a live Preview shows those styles applied to real buttons, icons, and cards, the way they look in your app or website. As you change a setting on the left, the preview updates instantly.Your design system’s name and tagline sit at the top of the page. Click either one to edit it in place.On the left, you can edit each part of your design system:
Overview
A short description of your brand. Base44 uses it to keep everything it generates on brand.
Logos
Add your brand logos, or generate one with AI. Click Add logo to upload a logo, or Generate logo to describe one and let Base44 create it. One logo is marked as Primary, and you can set a different one as primary from its More actions menu.
Editing your brand logos
Typography
Choose your heading and body fonts, or upload your own. You can also fine-tune the weight of each font style.
Choosing your heading and body fonts
Color palette
Click a color to edit it, or click Generate palette and describe the colors you want.
Editing a color in the palette
Tone of voice
Defines how your brand communicates. Click Add tone to add a trait, or click the generate icon to let Base44 suggest a new set.
Adding tone of voice traits
Core values
The principles your brand stands for. Click Add value to add one, or click the generate icon to let Base44 suggest a new set.
Adding your core values
Corner radius
Set how rounded your components look.
Setting your corner radius values
Spacing scale
Fine-tune how much space goes between elements.
Fine-tuning your spacing scale
Shadow
Set how elevated your components look. Click a shadow to adjust its position, blur, spread, and color.
Setting your shadow values
Design guidelines
Rules that keep your app’s visual language consistent. Click Add guideline to add one, or open the More actions menu on a guideline to edit or delete it.
Editing your design guidelines
Your edits are not applied until you save them. Click Save changes to keep them, or Reset changes to undo edits you have not saved yet. A design system needs a name and an overview before you can save it.
Manage a design system from its card in the Design system section. Open the More actions icon on a design system to edit it, set it as your default, or delete it.
Who can manage design systems:
Owners and admins: Can create, edit, set the default, and delete any design system.
Editors: Can create and edit design systems. Only owners and admins can set the default or delete a design system.
When you start a new app, your default design system is preselected, so the app is built to match your brand from the first prompt. To choose a different design system, click the Add icon in the AI chat, select Use a design system, then pick the one you want.
Choosing a design system when starting a new app
You can also apply a design system to an app you are already working on, from the same Add icon in the AI chat. When your workspace has one design system, the option shows its name, and clicking it attaches the design system to your next prompt.
Applying your design system from the AI chat
Applying a design system takes effect on a build turn in the AI chat. If your chat is set to a non-building mode such as Discuss, switch to Build first.
Applying a design system to an app that is already built rebuilds the app to match, rather than restyling it in place. Apply it early, or expect the app to be regenerated.
Click a question below to learn more about design systems.
Do I need design skills to create a design system?
No. Describe your brand in a few words, or import from a website, a Figma file, or your logo, and Base44 generates a complete design system for you. You can then adjust any part of it.
Can each client or project have its own design system?
On the Builder plan and above you have 1 design system per workspace, so use a separate workspace for each client or project that needs its own brand. Enterprise workspaces have no limit.
