> For the complete documentation index, see [llms.txt](https://docs.emobiq.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.emobiq.com/emobiq-ai/readme/building-your-app/themes.md).
# Themes
When creating a new project, eMOBIQ AI now lets you pre-select the visual style of your app through the **Themes** step. This gives you control over how your app looks and feels before generation begins — without losing the flexibility to refine it further through your app idea description.
{% hint style="info" %}
Themes are optional. If you skip any or all steps, the AI will determine the best layout automatically. If no layout preference is mentioned in your app idea, it defaults to a **mobile navigation bar** application.
{% endhint %}
The Themes step consists of **4 sequential selections**:
1. [Project Type](#step-1-project-type)
2. [Style](#step-2-style)
3. [Color Palette](#step-3-color-palette)
4. [Fonts](#step-4-fonts)
***
## Step 1: Project Type
Choose the project type that best fits what you want to build and how users will interact with it.
| Project Type | Best For |
| --------------------------- | ----------------------------------------------------------------------------------------------- |
| **Landing Page** | Focused pages designed to drive one main action, such as sign-ups, promotions, or lead capture. |
| **Website** | Multi-page sites that present content, brand information, or a broader online presence. |
| **eCommerce Store** | Online stores that showcase products or services and support browsing, purchasing, or booking. |
| **Dashboard / Admin Panel** | Internal systems used to manage data, monitor activity, and support day-to-day operations. |
***
## Step 2: Style
Choose a design style that matches your brand vision.
{% tabs %}
{% tab title="Modern Minimalist" %}
Clean, spacious design focusing on content with generous white space and subtle interactions.
**Emphasizes:** Simplicity & clarity
{% endtab %}
{% tab title="Biz Pro" %}
Professional, trustworthy design with clean lines and structured layouts.
**Best for:** Corporate websites and B2B platforms
{% endtab %}
{% tab title="Frosted Glass" %}
Modern, frosted glass effect with translucent elements and blur.
**Creates:** Depth and visual hierarchy with elegant transparency
{% endtab %}
{% tab title="Soft Depth" %}
Soft, extruded UI elements that appear to push through the surface, using subtle shadows to create a physical, tactile feel.
{% endtab %}
{% tab title="Gradient & Vibrant" %}
Bold, colorful design with dynamic gradients and vibrant colors.
**Perfect for:** Creative brands and modern startups
{% endtab %}
{% endtabs %}
***
## Step 3: Color Palette
Select a color palette that reflects the tone and audience of your app.
| Palette | Description |
| ------------------- | ----------------------------------------------------------------------- |
| **Summer Vibes** | Bright, energetic, and optimistic, while remaining practical and usable |
| **Warm Earth** | Natural and grounded, suitable for lifestyle or sustainability brands |
| **Modern Calm** | Soft, contemporary, and easy on the eyes |
| **Bold Energy** | High-contrast and expressive, ideal for marketing-heavy use cases |
| **Creative Studio** | Expressive yet controlled, good for portfolios and creative brands |
| **Soft Pastel** | Friendly and approachable, great for casual tools and creators |
| **Business Ready** | Clean, trustworthy, and safe for client-facing products |
| **Neutral** | A calm, balanced foundation designed to let content shine |
| **Trendy 2026** | Inspired by 2026 color trends |
### Custom Color Theme
If none of the presets suit your brand, you can create your own color scheme using the **+ Add a new Theme color** option.
Create your own color set by choosing up to four custom colors:
| Color Role | Purpose |
| ------------- | ----------------------------------------------------------- |
| **Primary** | The dominant color used across main UI elements |
| **Secondary** | A supporting color for backgrounds and secondary components |
| **Neutral** | Used for text, borders, and subtle backgrounds |
| **Accent** | A highlight color for calls-to-action and key interactions |
Each color can be entered in **HEX**, **RGB**, or **HSB** format.
{% hint style="info" %}
Not sure what colors to use? Click **Auto-generate** to let the AI suggest a harmonious color scheme based on your project type and style selection.
{% endhint %}
Once you're happy with your colors, give the theme a **Label** (name) before saving so you can identify it later.
***
## Step 4: Fonts
Customize the fonts used for headings and paragraph text throughout your app.
**Available fonts:**
| Style | Font Name |
| -------------------- | ------------- |
| **Clear Sans** | Open Sans |
| **Classic Serif** | Baskervville |
| **Modern Tech** | Orbitron |
| **Friendly Rounded** | Balsamiq Sans |
| **Elegant** | Arizonia |
You can select a **Heading** font and a **Paragraph** font independently, allowing for flexible typographic combinations that match your brand.
{% hint style="info" %}
You can also add a custom heading font using the **+ Add new Heading text** option.
{% endhint %}
***
## How Themes Work with Your App Idea
Themes work alongside your app idea description — they are not mutually exclusive. Any style instructions written in your app idea will be taken into consideration during generation.
{% stepper %}
{% step %}
### Select a Theme (Optional)
Use the 4-step theme selector to define your preferred project type, visual style, color palette, and fonts.
{% endstep %}
{% step %}
### Describe Your App
Write your app idea as usual. You can mention specific UI preferences here to further refine or override theme defaults.
{% endstep %}
{% step %}
### AI Generation
eMOBIQ AI combines your theme selections and app idea to produce a UI that aligns with both.
{% endstep %}
{% endstepper %}
{% hint style="success" %}
**Tip:** Use themes for broad visual direction and your app idea for specific UI details. This combination gives you the most consistent and intentional output.
{% endhint %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.emobiq.com/emobiq-ai/readme/building-your-app/themes.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.