Skip to main content
Once your blueprint defines the modules and user types your app needs, Archie generates a prototype: one screen for every route in the app. Design is where you shape how that whole prototype looks — pick a visual direction, adjust the underlying design values, and browse every screen it produced — before you move into the frontend and start building for real. Everything you set here applies globally. Change the primary color once, and it updates across all 34 (or however many) generated screens at the same time.

What’s in Design

Theme

Pick a complete, pre-built visual direction, or generate new alternatives.

Branding

Upload your logo, icon, and favicon for light and dark mode.

Feel

Set density and motion — how tightly things are packed and how they move.

Read

Choose a typographic personality and let it map to font families and sizes.

Color

Set your primary color and neutral tone; Archie generates the rest of the palette.

Polish

Corners, shadows, and icon stroke — the surface character of every element.

Components

A live gallery that proves your design values hold together across real UI.

Comments

Leave feedback pinned to an exact spot on a screen, and tag teammates.

Screens

Browse every generated screen as a single page, a grid, or a full sitemap.

How Design fits together

The section splits into two halves:
  • Theme and design values — Theme, Branding, Feel, Read, Color, and Polish define the design system: the colors, type, spacing, motion, and surface treatment your app uses everywhere. Components is a live proof that renders those values on real UI so you can see them hold together before committing.
  • Screens — the generated prototype itself. Every route in your blueprint gets a screen, and the Screens views let you browse them as a single page, a thumbnail grid, or a full sitemap. Comments sits alongside Screens — feedback pinned to a specific screen, for you or a teammate to act on.
Picking a Theme sets a starting point for every value at once. From there, the individual Branding, Feel, Read, Color, and Polish sections let you fine-tune anything the theme got close but not exact.

Where Design sits in the workflow

  • Blueprint defines what your app does — modules, user types, services.
  • Design (this section) defines what it looks like, and generates a screen for every route the blueprint describes.
  • Frontend is where the generated app lives once you build. The theme you set here becomes the starting values in the frontend’s own theming system — you can keep refining it there with the visual editor, chat, or code.

FAQ

Design works on the generated prototype — the screens Archie produces from your blueprint. When you build, the theme and screens you land on here become the starting point for the actual frontend. You can keep adjusting afterward from Frontend → Theming.
No. The build uses whatever theme and screens are in place at the time. Many teams pick a theme, glance at a few key screens, and build — then fine-tune from the frontend once real data and interactions are in place.
Yes. The Screens view has a User Type filter that shows only the screens relevant to a given user type — useful for checking an admin dashboard separately from the end-user experience.