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

# Overview

> Design is where Archie turns your blueprint into a full set of themed, generated screens — before you touch the real frontend.

Once your [blueprint](/docs/features/blueprint/overview) 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](/docs/features/frontend/overview) 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

<CardGroup cols={2}>
  <Card title="Theme" icon="swatchbook" href="/docs/features/design/theme">
    Pick a complete, pre-built visual direction, or generate new alternatives.
  </Card>

  <Card title="Branding" icon="image" href="/docs/features/design/branding">
    Upload your logo, icon, and favicon for light and dark mode.
  </Card>

  <Card title="Feel" icon="gauge" href="/docs/features/design/feel">
    Set density and motion — how tightly things are packed and how they move.
  </Card>

  <Card title="Read" icon="font" href="/docs/features/design/read">
    Choose a typographic personality and let it map to font families and sizes.
  </Card>

  <Card title="Color" icon="palette" href="/docs/features/design/color">
    Set your primary color and neutral tone; Archie generates the rest of the palette.
  </Card>

  <Card title="Polish" icon="wand-magic-sparkles" href="/docs/features/design/polish">
    Corners, shadows, and icon stroke — the surface character of every element.
  </Card>

  <Card title="Components" icon="shapes" href="/docs/features/design/components">
    A live gallery that proves your design values hold together across real UI.
  </Card>

  <Card title="Comments" icon="comment" href="/docs/features/design/comments">
    Leave feedback pinned to an exact spot on a screen, and tag teammates.
  </Card>

  <Card title="Screens" icon="table-cells-large" href="/docs/features/design/screens/overview">
    Browse every generated screen as a single page, a grid, or a full sitemap.
  </Card>
</CardGroup>

## 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](/docs/features/design/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**](/docs/features/blueprint/overview) 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**](/docs/features/frontend/overview) is where the generated app lives once you build. The theme you set here becomes the starting values in the frontend's own [theming](/docs/features/frontend/theming) system — you can keep refining it there with the visual editor, chat, or code.

## FAQ

<AccordionGroup>
  <Accordion title="Do changes here affect the real app, or just the prototype?">
    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](/docs/features/frontend/theming).
  </Accordion>

  <Accordion title="Do I have to finish Design before I build?">
    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.
  </Accordion>

  <Accordion title="Can different user types see different screens?">
    Yes. The [Screens](/docs/features/design/screens/overview) 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.
  </Accordion>
</AccordionGroup>