Overview
Good design in Zite starts with a system, not a collection of one-off tweaks. Choose the overall style first, then refine individual sections once the app has a consistent foundation.Start with the whole design
New builders often start by fixing the first thing that looks wrong: one button, one card, one heading, one color. That can work for small issues, but it can also make the app feel patched together. Before editing individual components, decide the app’s design direction:| What you have | Best starting point |
|---|---|
| A real company brand | Create or apply a Brand Kit. |
| A website you want to match | Paste the website link in chat and say what to use as reference. |
| A screenshot or mockup | Upload it with + followed by Upload an attachment. |
| A page needs images | Ask Zite to create placeholder, illustration, or marketing visuals. |
| No brand yet | Choose a theme, then refine colors, typography, and spacing. |
| A similar app layout | Start from a template. |
Use Brand Kit or themes for global style
Use global design controls when the change should apply across the app. This keeps the app easier to maintain and prevents each page from drifting into a different visual style. Use a Brand Kit when you want Zite to reuse a brand across multiple apps. Brand Kits can include logos, icons, fonts, color palettes, button styles, card styles, and written guidelines.
swatch icon, then choose the theme or Brand Kit you want to apply.
Global changes are best for:
- Main fonts and type scale
- Primary, secondary, accent, background, and text colors
- Button shape, color, and weight
- Card, panel, and table styling
- Overall spacing and density
- Light or dark visual direction
- Navigation and page-level layout patterns
Applying a theme from the design panel does not use credits. AI-powered design work, such as changing a design from an uploaded photo, does use credits.
Set fonts and colors
Fonts and colors should usually be configured in your theme or Brand Kit first. That keeps headings, body text, buttons, backgrounds, cards, and links consistent across the app. Use individual edits when a specific section needs a local adjustment, such as making one heading larger, changing a single button color, or improving contrast in one card. Avoid changing the same font or color one component at a time if the decision should apply everywhere.
- Background sets the surface behind content
- Text controls readability
- Primary should be reserved for the main action or strongest brand accent
- Secondary and advanced colors can support less important actions, cards, and details
Fonts may vary by device. If a font isn’t available, the app automatically uses the next available fallback font to keep your content readable.
Give Zite better references
You can guide Zite with a website link, screenshot, mockup, uploaded image, or written brand rules. The reference is more useful when you say what Zite should learn from it. Good reference prompts are specific:- “Use the colors and typography only.”
- “Match the card style, but keep the current layout.”
- “Use the spacing and visual hierarchy, but keep our brand colors.”
- “Use this as a mobile layout reference, not a desktop reference.”
Create images with AI
You can ask Zite to create images for your app, including placeholder visuals, hero images, empty states, thumbnails, illustrations, and marketing sections. AI-generated images work best when the image supports the page but does not need to be exact. Use them for early design direction, campaign concepts, example content, or polished visuals when you do not have final assets yet.
Improve the current app
If the app works but does not feel polished, openImprove my app from the + menu.
Review when you want Zite to scan the app for common issues and fix them. This is useful for missing states, obvious layout problems, broken interactions, and general quality checks.
Use Designer when the app is functional but needs visual polish. Designer explores the running app, captures screenshots, and improves the look and feel. It can take longer because it is reviewing the app visually.
Before using Designer, make sure the main pages and core interactions already exist. It is better at polishing a working app than guessing the product direction from an unfinished one.
Use Selective Edits for small changes
Use Selective Edits when the design direction is right but one part needs adjustment. It is the best tool for precise changes that should not affect the rest of the app.
- Rewriting a heading, label, or button
- Changing one component’s color, padding, alignment, or radius
- Moving or deleting a section
- Adjusting a card, table, image, or form field
- Fixing a local spacing issue
- Fine-tuning a component after a global theme change
Check responsive behavior
A good app should not just shrink from desktop to mobile. The layout should adapt so people can still read, tap, scan, and complete the main task at every screen size. UseResponsive mode to inspect smaller widths, and use Fullscreen when you want to review the app without the builder UI around it.
- Navigation remains easy to find and use
- Text wraps without overlapping other elements
- Buttons and links are large enough to tap
- Tables, cards, and filters still make sense on mobile
- Modals and dropdowns fit inside the viewport
- Important actions are not hidden below long content
- Images crop or resize without hiding key information
- Forms can be completed without horizontal scrolling
Keep the design readable
Visual style should support the user’s task. A polished app is not just more decorative; it is easier to understand. Use this checklist when reviewing your design:| Area | What to look for |
|---|---|
| Hierarchy | The most important heading, action, or number is visually obvious. |
| Consistency | Similar buttons, cards, tables, and forms look and behave the same way. |
| Contrast | Text is readable against its background, especially small or muted text. |
| Spacing | Related items are close together, and unrelated sections have clear separation. |
| Content fit | Long names, labels, statuses, and table values do not overlap or get cut off. |
| States | Empty, loading, success, error, and disabled states look intentional. |
| Mobile layout | The page works at narrow widths without horizontal scrolling. |
| Focus | Decorative elements do not compete with the main task. |
A practical design workflow
Choose the system
Start with a Brand Kit, theme, template, website link, or screenshot. Decide what should be global before changing individual components.
Build the core app
Create the main pages, data views, forms, workflows, and navigation before doing detailed visual polish.
Apply global styling
Use the theme panel or Brand Kit for fonts, colors, buttons, cards, and overall density.
Review in preview
Check the app in normal preview,
Responsive mode, and Fullscreen. Look for hierarchy, readability, spacing, and mobile issues.Use Improve my app
Choose
Review for general quality checks or Designer for visual polish after the app is working.