Design and branding

A Vaulter app should look like yours, not like "an AI made this". This page covers how the design system underneath works, how to direct the look with intent, and where your brand shows up beyond the app itself: search results, shared links, and the sign-in screen.

There is a design system underneath

Every app is built on a real design system: a palette of theme colors, a type scale, consistent spacing and corner radii, and a shared component library. This is why a Vaulter app looks coherent instead of assembled, and it has a practical consequence: change the system, not the instances. "Make our brand color forest green" recolors the whole app in one request, because buttons and links draw from the theme rather than carrying their own hardcoded colors. Edit Mode plays along too: its color and size controls snap to your theme's palette and scale, so hand tweaks stay consistent instead of drifting.

Directing the look

The design brief is a prompt like any other, and the same rule applies: specifics beat adjectives.

• Name the mood and the palette. "Warm and friendly, cream background, terracotta accents" lands; "make it pop" does not.
• Show a reference. Attach a screenshot of a site whose feel you want, or your own brand materials. The agent matches what it can see far better than what you describe.
• Change the system first, then the exceptions. Set the app-wide look, then handle the one page that should feel different as its own request.
• Ask for a typeface. "Use a geometric sans-serif for headings, something quieter for body text", or name the font you want. Type is wired app-wide, so headings and body stay consistent everywhere.

For pixel-level adjustments after the big strokes land (this padding, that corner radius), Edit Mode beats chat: point at the element and move on.

Your logo and imagery

Upload your logo and brand imagery to the asset library, then use them by name: "put the logo I uploaded in the header, left side". One more habit worth the minute it takes: attach your logo when you first describe the app, and the agent can pull the palette from it.

Beyond the app: search, shares, and the badge

Open the SEO tab of the Vault for how your app presents itself off-site:

• Share previews. The title, description, and image a link to your app unfurls with, previewed per platform (iMessage, X, and the rest look different, and the panel shows each). Set these before you share the link anywhere important; the first impression of your app is often a link card, not the app.
• The Vaulter badge. Free apps carry a small "Built with Vaulter" badge; paid plans can turn it off.
• Search appearance rides on the same title and description; see SEO for the whole picture.

On Pro and Teams you can also add your own head code and a PWA install identity, which puts your name and icon on the home screen when visitors install the app.

The sign-in screen

Your users sign in through the hosted portal, which carries your app's logo and name so the moment feels like your product. A live preview of the sign-in screen sits in Vault → Auth, so you can see it as you adjust. On Pro, portal branding and the auth emails your app sends go further, with your own look and sending identity.

Frequently asked

The agent's design choices are fine but not "us". Where do I start?

With one message: your brand color, your logo attached, and one reference you like. Those three inputs move an app from generic to yours faster than any amount of element-by-element tweaking.

Can I have a dark mode?

Ask for it. "Add a dark mode with a toggle in the header" is a normal feature request, and the theme system is what makes it tractable.

Why did my exact hex color end up slightly different in Edit Mode?

Edit Mode snaps to the theme palette to protect consistency. To set an exact brand value, set it at the theme level in chat ("our brand color is #1B4D3E exactly"), and the palette itself moves.

Fonts: can I use any font?

Name the one you want; widely available fonts wire straight in, app-wide. Purchased fonts that only exist as files you own are not directly supported today, so pick their closest widely available relative, or ask support about your case.