> ## Documentation Index
> Fetch the complete documentation index at: https://docs.10x.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize your app's design style and audience

> Use the onboarding wizard to choose a visual style, target audience, and extra context before the AI writes a single line of code for your new project.

When you submit a new prompt, 10x gives you a choice: walk through a short onboarding wizard to set design direction upfront, or skip straight to building and let the AI decide everything. Taking a minute to set your style leads to an app that looks and feels intentional from the very first build.

## Choosing how to start

After you enter your prompt and press **Enter**, a dialog appears with two options:

**Select Your Style** (recommended)
Opens the three-step onboarding wizard. You pick a visual style, describe your target audience, and add any extra context. This takes about a minute and gives the AI clear direction before it writes any code.

**Begin Immediately**
Skips the wizard entirely. The AI makes all design and style decisions on its own based on your prompt. Choose this when you're in a hurry or want to see what the AI comes up with without any constraints.

<Note>
  You can always ask the AI to change the design style after building starts. Send a follow-up message like "Switch to a dark, minimal look" and the AI will adjust the code to match.
</Note>

## Step 1: Design direction

The first step shows a grid of visual styles. Each style has a name, a short description of its personality, and a live mini-preview showing how the palette and typography would look in a real app UI.

<Tabs>
  <Tab title="Available styles">
    | Style                 | Vibe                                           | Inspired by                    |
    | --------------------- | ---------------------------------------------- | ------------------------------ |
    | **Clean & Minimal**   | Whitespace, restrained color, precise type     | Apple, Things 3, Bear          |
    | **Sharp & Focused**   | Developer-oriented, dense, monospaced          | Linear, Cursor, Warp           |
    | **Warm & Inviting**   | Soft warm tones, friendly rounded cards        | Airbnb, Notion, Calm           |
    | **Bold & Expressive** | Dark canvas, heavy type, vivid accents         | Spotify, VSCO, Letterboxd      |
    | **Professional**      | Refined cards, layered depth, cool tones       | Stripe, Vercel, Mercury        |
    | **Playful & Fun**     | Bouncy shapes, pill buttons, bright colors     | Duolingo, Streaks, Widgetsmith |
    | **Soft & Pastel**     | Muted tints, gentle shapes, calming feel       | Headspace, Balance, Flo        |
    | **Earth & Natural**   | Grounded earth tones, organic feel             | AllTrails, Strava, Nike Run    |
    | **Glass & Depth**     | Translucent layers, blur, floating cards       | Weather, Arc, Opal             |
    | **Social & Vibrant**  | Feed-first, bold headers, punchy CTA           | Instagram, TikTok, BeReal      |
    | **Neon & Electric**   | OLED black, glowing accents, tech feel         | Halide, Apollo, NightCafe      |
    | **Editorial**         | Serif headings, generous line height, longform | Medium, Substack, Apple News   |
  </Tab>

  <Tab title="What the style controls">
    When you select a style, the AI uses it to determine:

    * **Color palette** — background, surface, primary text, secondary text, and accent colors.
    * **Typography** — font style (SF Pro, Rounded, Monospaced, or Serif) and weight.
    * **Corner radius** — from sharp (4pt) to pill-shaped (20pt).
    * **Spacing** — tight, balanced, or airy layout density.
    * **Shadows** — none, subtle, layered, or glowing.

    All of these are passed to the AI as design direction before it writes any SwiftUI code.
  </Tab>
</Tabs>

Click a style card to select it. The mini-preview updates to show the palette applied to a sample app layout. **Clean & Minimal** is selected by default.

Click **Next** when you're ready to move on.

## Step 2: Target audience

The second step asks who your app is for. Describe your target users — for example, "fitness enthusiasts aged 20–35" or "small business owners managing invoices." You can select from suggested audience categories or type a custom description.

Providing a clear audience helps the AI make better decisions about onboarding flows, feature scope, copy tone, and which use cases to prioritize in the first version.

Click **Next** when done.

## Step 3: Additional details

The third step is a free-form text field where you can add any extra context the AI should know:

* Features that are non-negotiable for the first version
* Apps you love and want to draw inspiration from
* Technical constraints or preferences
* Anything your prompt didn't cover

This field is optional — if you have nothing to add, click **Start Building** to finish the wizard and begin.

## Finishing the wizard

Click **Start Building** on the final step. The AI receives your style, audience, and details as part of its initial context and enters plan mode. The design direction you chose shapes the entire project — from the color tokens in the first SwiftUI file to the visual language used across all screens.

<Tip>
  The more specific your style direction, the more on-brand the first build tends to be. Selecting a style that matches real apps you admire — and naming those apps in the additional details field — gives the AI concrete references to draw from.
</Tip>

You can navigate back through the steps using the **Back** button at any time before finishing. A summary chip at the bottom of the wizard shows your currently selected style and any chosen audiences so you can confirm your selections at a glance.