Designing your app
Customise the look and feel of your app — colours, fonts, spacing, dark mode, and responsive layouts. No design experience needed.
Design in bldrAgent
bldrAgent apps are built with a component-based visual system. Every component has configurable styles — but you can also use the AI chat to make sweeping design changes in plain English.
Brand settings
Set your app's global brand identity in App Settings → Brand:
- Primary colour — used for buttons, links, and accents
- Secondary colour — used for highlights and secondary actions
- Font family — choose from a curated list of Google Fonts
- Border radius — from sharp (0px) to very rounded (16px)
- Dark mode — enable or disable dark mode support
Changes to brand settings cascade across the entire app automatically.
Customising with the AI
The AI is the fastest way to make design changes:
Global changes:
"Change the primary colour to #6366F1 across the whole app" "Switch the body font to Inter"
Page-specific changes:
"Make the homepage hero full-screen height with a dark overlay on the background image"
Component changes:
"Make the pricing cards have a stronger shadow and a 2px brand-coloured top border"
Responsive design
All apps built with bldrAgent are responsive by default. Use the AI to fine-tune breakpoints:
"Stack the feature grid to a single column on mobile" "Hide the sidebar on screens smaller than 768px and add a hamburger menu instead"
You can also preview your app at different screen sizes using the Device preview toggle in the editor toolbar.
Dark mode
If you've enabled dark mode, the AI automatically generates dark variants when styling components. You can also customise dark mode explicitly:
"In dark mode, use a #0F172A background for the navigation bar instead of the default"
Using custom CSS
For power users, you can inject custom CSS into your app:
- Go to App Settings → Advanced
- Open the Custom CSS editor
- Write standard CSS — it's injected globally
Tip: Use the AI to write your custom CSS too: "Write CSS that adds a subtle grain texture to the body background"
Image handling
- Cover images — set a cover image on any section or card via the component panel
- Image quality — global image quality settings are available in workspace settings
- Optimisation — all images are automatically served at the right size and format via the CDN
Typography scale
| Size | Usage |
|---|---|
| xs (12px) | Labels, tags, metadata |
| sm (14px) | Secondary text, table cells |
| base (16px) | Body text |
| lg (18px) | Subheadings, lead text |
| xl–4xl | Headings |
You can adjust the type scale in App Settings → Typography.