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.
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.
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.
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.
Available styles
What the style controls
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
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.
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.
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.
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.
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.
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.
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"10x","colors":{"primary":"#33B93E","light":"#24872D","dark":"#33B93E"},"logo":"https://mintcdn.com/10x-58a4554c/K8KakeV-gb1CgaTM/images/icon.svg?fit=max\u0026auto=format\u0026n=K8KakeV-gb1CgaTM\u0026q=85\u0026s=6a65604ba21b45bfd02426a217cc8c62","favicon":"https://mintcdn.com/10x-58a4554c/K8KakeV-gb1CgaTM/images/icon.svg?fit=max\u0026auto=format\u0026n=K8KakeV-gb1CgaTM\u0026q=85\u0026s=6a65604ba21b45bfd02426a217cc8c62","appearance":{"default":"dark"},"navbar":{"primary":{"type":"github","href":"https://github.com/10x-app-builder/10x"}},"fonts":{"family":"Inter"},"styling":{"latex":false},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"10x-58a4554c","hasAudioNarration":false,"actualSubdomain":"10x-58a4554c","customDomains":["docs.10x.app"],"gitSource":{"type":"github","owner":"mintlify-community","repo":"docs-10x-58a4554c-453e3f26","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"feedback":{"thumbs":true},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6ae95601f74cc9f20f4efea7:success","clientVersion":"0.0.4094","searchFilterCounts":[{"language":"default","tag":"Documentation","count":16},{"language":"default","tag":"Building Apps","count":5},{"language":"default","tag":"Account \u0026 Billing","count":3},{"language":"default","tag":"Get Started","count":3},{"language":"default","tag":"Preview \u0026 Files","count":3},{"language":"default","tag":"Integrations","count":2}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"comment-mode","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"building/design-styles","slug":"/building/design-styles","pageMetadata":{"title":"Customize your app's design style and audience","description":"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.","href":"/building/design-styles"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"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.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={li:`li`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Note,Tab,Table,Tabs,Tip}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!Tab)_missingMdxReference(`Tab`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tabs)_missingMdxReference(`Tabs`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`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.`}),`\n`,_jsx(Heading,{level:`2`,id:`choosing-how-to-start`,children:`Choosing how to start`}),`\n`,_jsxs(_components.p,{children:[`After you enter your prompt and press `,_jsx(_components.strong,{children:`Enter`}),`, a dialog appears with two options:`]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Select Your Style`}),` (recommended)\nOpens 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.`]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Begin Immediately`}),`\nSkips 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.`]}),`\n`,_jsx(Note,{children:_jsx(_components.p,{children:`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.`})}),`\n`,_jsx(Heading,{level:`2`,id:`step-1-design-direction`,children:`Step 1: Design direction`}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsxs(Tabs,{children:[_jsx(Tab,{title:`Available styles`,id:`available-styles`,children:_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Style`}),_jsx(_components.th,{children:`Vibe`}),_jsx(_components.th,{children:`Inspired by`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Clean \u0026 Minimal`})}),_jsx(_components.td,{children:`Whitespace, restrained color, precise type`}),_jsx(_components.td,{children:`Apple, Things 3, Bear`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Sharp \u0026 Focused`})}),_jsx(_components.td,{children:`Developer-oriented, dense, monospaced`}),_jsx(_components.td,{children:`Linear, Cursor, Warp`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Warm \u0026 Inviting`})}),_jsx(_components.td,{children:`Soft warm tones, friendly rounded cards`}),_jsx(_components.td,{children:`Airbnb, Notion, Calm`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Bold \u0026 Expressive`})}),_jsx(_components.td,{children:`Dark canvas, heavy type, vivid accents`}),_jsx(_components.td,{children:`Spotify, VSCO, Letterboxd`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Professional`})}),_jsx(_components.td,{children:`Refined cards, layered depth, cool tones`}),_jsx(_components.td,{children:`Stripe, Vercel, Mercury`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Playful \u0026 Fun`})}),_jsx(_components.td,{children:`Bouncy shapes, pill buttons, bright colors`}),_jsx(_components.td,{children:`Duolingo, Streaks, Widgetsmith`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Soft \u0026 Pastel`})}),_jsx(_components.td,{children:`Muted tints, gentle shapes, calming feel`}),_jsx(_components.td,{children:`Headspace, Balance, Flo`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Earth \u0026 Natural`})}),_jsx(_components.td,{children:`Grounded earth tones, organic feel`}),_jsx(_components.td,{children:`AllTrails, Strava, Nike Run`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Glass \u0026 Depth`})}),_jsx(_components.td,{children:`Translucent layers, blur, floating cards`}),_jsx(_components.td,{children:`Weather, Arc, Opal`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Social \u0026 Vibrant`})}),_jsx(_components.td,{children:`Feed-first, bold headers, punchy CTA`}),_jsx(_components.td,{children:`Instagram, TikTok, BeReal`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Neon \u0026 Electric`})}),_jsx(_components.td,{children:`OLED black, glowing accents, tech feel`}),_jsx(_components.td,{children:`Halide, Apollo, NightCafe`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:_jsx(_components.strong,{children:`Editorial`})}),_jsx(_components.td,{children:`Serif headings, generous line height, longform`}),_jsx(_components.td,{children:`Medium, Substack, Apple News`})]})]})]})}),_jsxs(Tab,{title:`What the style controls`,id:`what-the-style-controls`,children:[_jsx(_components.p,{children:`When you select a style, the AI uses it to determine:`}),_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Color palette`}),` — background, surface, primary text, secondary text, and accent colors.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Typography`}),` — font style (SF Pro, Rounded, Monospaced, or Serif) and weight.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Corner radius`}),` — from sharp (4pt) to pill-shaped (20pt).`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Spacing`}),` — tight, balanced, or airy layout density.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Shadows`}),` — none, subtle, layered, or glowing.`]}),`\n`]}),_jsx(_components.p,{children:`All of these are passed to the AI as design direction before it writes any SwiftUI code.`})]})]}),`\n`,_jsxs(_components.p,{children:[`Click a style card to select it. The mini-preview updates to show the palette applied to a sample app layout. `,_jsx(_components.strong,{children:`Clean \u0026 Minimal`}),` is selected by default.`]}),`\n`,_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Next`}),` when you’re ready to move on.`]}),`\n`,_jsx(Heading,{level:`2`,id:`step-2-target-audience`,children:`Step 2: Target audience`}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsx(_components.p,{children:`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.`}),`\n`,_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`Next`}),` when done.`]}),`\n`,_jsx(Heading,{level:`2`,id:`step-3-additional-details`,children:`Step 3: Additional details`}),`\n`,_jsx(_components.p,{children:`The third step is a free-form text field where you can add any extra context the AI should know:`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:`Features that are non-negotiable for the first version`}),`\n`,_jsx(_components.li,{children:`Apps you love and want to draw inspiration from`}),`\n`,_jsx(_components.li,{children:`Technical constraints or preferences`}),`\n`,_jsx(_components.li,{children:`Anything your prompt didn’t cover`}),`\n`]}),`\n`,_jsxs(_components.p,{children:[`This field is optional — if you have nothing to add, click `,_jsx(_components.strong,{children:`Start Building`}),` to finish the wizard and begin.`]}),`\n`,_jsx(Heading,{level:`2`,id:`finishing-the-wizard`,children:`Finishing the wizard`}),`\n`,_jsxs(_components.p,{children:[`Click `,_jsx(_components.strong,{children:`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.`]}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`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.`})}),`\n`,_jsxs(_components.p,{children:[`You can navigate back through the steps using the `,_jsx(_components.strong,{children:`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.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Customize your app's design style and audience","description":"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.","href":"/building/design-styles"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Choosing how to start","slug":"choosing-how-to-start","depth":2,"children":[]},{"title":"Step 1: Design direction","slug":"step-1-design-direction","depth":2,"children":[]},{"title":"Step 2: Target audience","slug":"step-2-target-audience","depth":2,"children":[]},{"title":"Step 3: Additional details","slug":"step-3-additional-details","depth":2,"children":[]},{"title":"Finishing the wizard","slug":"finishing-the-wizard","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"10x-58a4554c","siteName":"10x","title":"Customize your app's design style and audience - 10x","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-04-27T17:19:49.194Z","originalFileLocation":"building/design-styles.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"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.\">\u003cmeta data-mint-head name=\"application-name\" content=\"10x\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Customize your app\u0026#x27;s design style and audience - 10x\">\u003cmeta data-mint-head property=\"og:description\" content=\"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.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"10x\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.10x.app/building/design-styles\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://10x-58a4554c.mintlify.site/_mintlify/api/og/v2?division=Building+Apps\u0026amp;title=Customize+your+app%27s+design+style+and+audience\u0026amp;description=Use+the+onboarding+wizard+to+choose+a+visual+style%2C+target+audience%2C+and+extra+context+before+the+AI+writes+a+single+line+of+code+for+your+new+project.\u0026amp;theme=5553c5c2402035485119d4bc\u0026amp;signature=c7572c7606221900070cfcc23dc8370174f3e8fa20bfdaef9edcdfc3e25d1f76\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Customize your app\u0026#x27;s design style and audience - 10x\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"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.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://10x-58a4554c.mintlify.site/_mintlify/api/og/v2?division=Building+Apps\u0026amp;title=Customize+your+app%27s+design+style+and+audience\u0026amp;description=Use+the+onboarding+wizard+to+choose+a+visual+style%2C+target+audience%2C+and+extra+context+before+the+AI+writes+a+single+line+of+code+for+your+new+project.\u0026amp;theme=5553c5c2402035485119d4bc\u0026amp;signature=c7572c7606221900070cfcc23dc8370174f3e8fa20bfdaef9edcdfc3e25d1f76\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/10x-58a4554c/vJ3RFigG6lX3Ioah/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"10x\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#33B93E\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.10x.app/building/design-styles\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/building/design-styles.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.10x.app/#organization\",\"name\":\"10x\",\"url\":\"https://docs.10x.app\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/10x-58a4554c/K8KakeV-gb1CgaTM/images/icon.svg?fit=max\u0026auto=format\u0026n=K8KakeV-gb1CgaTM\u0026q=85\u0026s=6a65604ba21b45bfd02426a217cc8c62\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.10x.app#website\",\"name\":\"10x\",\"url\":\"https://docs.10x.app\",\"publisher\":{\"@id\":\"https://docs.10x.app/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.10x.app/building/design-styles#webpage\",\"url\":\"https://docs.10x.app/building/design-styles\",\"name\":\"Customize your app's design style and audience\",\"description\":\"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.\",\"dateModified\":\"2026-04-27T17:19:49.194Z\",\"isPartOf\":{\"@id\":\"https://docs.10x.app#website\"},\"breadcrumb\":{\"@id\":\"https://docs.10x.app/building/design-styles#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.10x.app/building/design-styles#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Building Apps\",\"item\":\"https://docs.10x.app/building/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize your app's design style and audience\",\"item\":\"https://docs.10x.app/building/design-styles\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.10x.app/building/design-styles#article\",\"headline\":\"Customize your app's design style and audience\",\"name\":\"Customize your app's design style and audience\",\"description\":\"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.\",\"url\":\"https://docs.10x.app/building/design-styles\",\"mainEntityOfPage\":{\"@id\":\"https://docs.10x.app/building/design-styles#webpage\"},\"dateModified\":\"2026-04-27T17:19:49.194Z\",\"publisher\":{\"@id\":\"https://docs.10x.app/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.10x.app#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"10x\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"10x","nav":{"global":null,"tabs":[{"tab":"Documentation","groups":[{"group":"Get Started","pages":[{"title":"10x: build iOS apps with AI in plain language","href":"/introduction"},{"title":"Quickstart: build your first iOS app with 10x","href":"/quickstart"},{"title":"Install 10x on macOS: requirements and setup","href":"/installation"}]},{"group":"Building Apps","pages":[{"title":"How 10x turns your idea into a running iOS app","href":"/building/overview"},{"title":"Plan mode: AI research and project planning","href":"/building/plan-mode"},{"title":"Build mode: AI writes and edits your SwiftUI code","description":"In build mode, 10x writes and edits Swift files using an agentic tool loop — watch progress live in the chat panel and iterate with follow-up messages.","href":"/building/build-mode"},{"title":"Customize your app's design style and audience","href":"/building/design-styles"},{"title":"Attach files and images to your app prompt","description":"Add images, screenshots, or text files to your prompt to give the AI reference material — mockups, specs, or anything that helps describe your app.","href":"/building/attachments"}]},{"group":"Preview \u0026 Files","pages":[{"title":"Preview your iOS app on the iPhone Simulator","href":"/preview/simulator-preview"},{"title":"Browse and view your generated Swift project files","href":"/preview/file-explorer"},{"title":"Open your 10x-generated iOS project in Xcode","href":"/preview/open-in-xcode"}]},{"group":"Integrations","pages":[{"title":"Add a Supabase backend to your 10x iOS app","href":"/integrations/supabase"},{"title":"Configure environment variables for your app","href":"/integrations/environment-variables"}]},{"group":"Account \u0026 Billing","pages":[{"title":"Sign in to 10x and complete account setup","href":"/account/sign-in"},{"title":"Manage your 10x subscription, plans, and credits","href":"/account/billing"},{"title":"View your AI credit balance and usage history","href":"/account/usage"}]}]}]},"basePath":"","title":"Customize your app's design style and audience - 10x","buildId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","deploymentId":"dpl_42LwxxU1kGN114H4XzwGYXa9ZDah","dynamics":[],"chunks":[]}