Design and themes

The agent doesn’t produce generic templates: it aims for a polished result with a real art direction, the way a design studio would. All your app’s colors and fonts are kept in a central theme, so you can later change the whole look in a few clicks, without the agent. This page explains what the agent applies by default, and how to steer it.

The agent’s design standards

A clear art direction

Before writing the screens, the agent picks a direction that fits your brand and its audience (editorial and refined, bold and graphic, soft and organic, technical and precise, luxurious and minimal…) and commits to it in the palette, the fonts, the layout and the details.

Typography first

A characterful display font paired with a readable text font, large confident headings, strong weight contrast. Headings stay upright (no italic words) unless your brand calls for it. Font pairings change from one app to the next.

Varied layouts

No page made of a centered hero and three identical cards. The agent varies things: asymmetric grids, bento layouts, split screens, full-bleed bands, overlapping elements, oversized numbers, a logo or testimonial marquee.

Restrained motion

A staggered entrance on the hero, sections revealed on scroll, a hover state on every clickable element, smooth transitions. Animations respect your visitors’ “reduce motion” setting.

The agent also applies these rules to every app:

• Depth and detail: layered soft shadows, hairline borders, subtle gradients or glows built from the theme colors, a grain or grid texture where it suits, consistent corner radii.
• Responsive by default, mobile first, with readable contrast, visible focus states and semantic HTML.
• Real content that fits your request (names, numbers, copy), never placeholder text.
• Complete pages: a landing page tells a story in about 6 to 9 sections, each with its own layout (hero, story or problem, key features, gallery, how it works, testimonials, FAQ, final call to action, a real footer).
• Pictures when the design needs them, created in the theme’s style: see Generated images.
• lucide-react icons, never emoji as icons, and no default purple-to-blue gradients. Brand logos (Instagram, GitHub…) are drawn as SVG.
• Things that work: navigation, forms with validation, interactive states, using local data until you ask for something else.

Art directions for new apps

Left alone, an AI model produces almost the same site for the same request: same fonts, same palette, same hero. To avoid that, Highwind draws 3 art directions for each new project, from a catalog of 48 (editorial magazine, Swiss international, neo-brutalist, quiet luxury, dark precision tech, retro print, Japanese minimal, art deco, synthwave, Scandinavian calm, gastronomy, wellness sanctuary…).

• The draw is specific to each project: two projects get different proposals, and a given project always keeps its own.
• The agent keeps the one that best fits your subject and its audience, then adapts it (keeping what fits, changing what clashes) without losing its character.
• Directions are only offered while the app has no design yet: once the first screens exist, the agent follows the style already in place.
• The agent doesn’t announce the direction it picked: you discover it in the preview.

Your style always comes first

Your style requests, brand colors or fonts, reference images, Figma designs and project instructions about the look always win over the drawn directions. They’re only used when you say nothing about style.

The role-based theme

Your app’s colors and fonts live in the @theme block of the src/index.css file, as roles: the background, the text, the primary color… Components only use these roles (bg-background, text-muted, bg-primary text-primary-foreground, border-border, font-display), with opacity for tints (bg-primary/10).

Role	In the Theme panel	Used for
background	Background	The page background
foreground	Text	The main text
muted	Secondary text	Captions, supporting text
surface	Cards and blocks	The background of cards and blocks
border	Borders	Lines and dividers
primary	Primary	Main buttons, links, strong elements
primary-foreground	Text on primary	Text placed on the primary color
accent	Accent	Secondary highlights
accent-foreground	Text on accent	Text placed on the accent

The agent adds a role when the design needs one (--color-success, --color-highlight), but keeps the theme short: about 8 to 12 roles, never one role per shade. A variant that must stay separate (a hover color) is derived from its role, so it follows when you change it. Google Fonts are imported at the top of the file and declared as --font-sans (text) and --font-display (headings).

src/index.css (excerpt)

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Manrope:wght@400;600&display=swap");
@import "tailwindcss";

@theme {
  --color-background: #faf6f0;
  --color-foreground: #1f1a17;
  --color-muted: #6f655d;
  --color-surface: #ffffff;
  --color-border: #e8dfd4;
  --color-primary: #7a2e1f;
  --color-primary-foreground: #ffffff;
  --color-accent: #e9d8b4;
  --color-accent-foreground: #1f1a17;
  --color-accent-hover: color-mix(in oklab, var(--color-accent) 85%, black);
  --font-sans: "Manrope", sans-serif;
  --font-display: "Fraunces", serif;
}

Why it matters: the Theme panel

The Theme panel in Design mode only edits these roles. Since no component has a hard-coded color, changing the Primary color or the heading font changes the whole site at once, for free and without the agent. The panel also offers ready-made Palettes and warns you about low contrast. See Design mode.

That’s why the agent never hard-codes a color (bg-[#a96749], text-blue-600): the check tool flags them and the agent replaces them with roles.

Caution

If you edit the code yourself, keep the same rule: a color hard-coded in a component will no longer follow the Theme panel.

Dark mode

The agent only adds a dark mode when you ask for it (or when one already exists). It then redefines the same roles in a managed block of src/index.css, delimited by /* highwind:dark */ and /* /highwind:dark */, never with dark: classes in components.

src/index.css (dark mode block, example)

/* highwind:dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #14110f;
    --color-foreground: #f3ece4;
  }
}
:root[data-theme="dark"] {
  --color-background: #14110f;
  --color-foreground: #f3ece4;
}
/* /highwind:dark */

You then tune the light and dark colors, and the mode shown by default, in the Light and dark section of the Theme panel. When the block exists, the agent keeps the shape of its selectors (it encodes the default mode chosen in the panel) and only changes the values.

Add a dark mode that follows the device setting, with a button in the header to
switch between light and dark.

Steering the style in your request

1. Give a mood and an audience. “Elegant and reassuring, for customers over 50” guides better than “nice”.

2. Name a direction. Style names are understood: “editorial magazine style”, “neo-brutalist”, “Japanese minimal”, “dark tech with a lime accent”, “quiet luxury”, “retro print”.

3. Give your brand colors and fonts. Hex codes and Google Fonts names: the agent puts them straight into the theme.

4. Show examples. Attach a screenshot of a site you like as a reference image, or paste a Figma link if you’ve connected Figma (see Figma).

5. Set your rules for the whole project. Write them in Instructions for the agent (Project settings): the agent follows them on every message. See Project settings.

New app

Create the site of a craft coffee roaster in Lyon. Retro print style: cream,
mustard and brick tones, a grain texture, labels and stamps.
Fonts: DM Serif Display for headings, Space Mono for details.

Change the look

Make the design more premium: more space between sections, bigger headings, a
calmer palette (black, ivory and a gold accent), and remove the gradients.

Project instructions

Brand colors: forest green #1f4d3a and cream #f6f1e7. Heading font: Fraunces,
text: Inter. Warm, friendly tone. No gradients.

Tip

For a small color or font tweak, you don’t need the agent: the Theme panel in Design mode does it for free. Keep the agent for layout or direction changes.

See also

Design modeEdit text, colors and fonts without the agent.

Generated imagesThe photos and illustrations the agent creates.

Writing good promptsThe phrasing that gives the best results.

How the agent worksThe stack, how a request runs and the conventions.