> ## 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 you set the visual system your whole app uses — theme, branding, feel, type, color, and polish — and check it on real components.

Design is the part of [Prototype](/docs/frontend/prototype) where you define your app's design system: the colors, typography, spacing, motion, and surface details that every generated screen uses.

Everything here is global. Change a value once and it updates across all of your screens at the same time.

## What's in Design

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

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

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

  <Card title="Read" icon="font" href="/docs/frontend/prototype/design/read">
    Choose a typographic personality that maps to font families and sizes.
  </Card>

  <Card title="Color" icon="palette" href="/docs/frontend/prototype/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/frontend/prototype/design/polish">
    Corners, shadows, and icon stroke — the surface character of every element.
  </Card>

  <Card title="Components" icon="shapes" href="/docs/frontend/prototype/design/components">
    A live gallery that shows your design values working together on real UI.
  </Card>
</CardGroup>

## How the sections work together

**Theme sets everything at once.** A theme is a complete package — palette, typography, motion, and density — that Archie has already put together. Picking one sets the starting values for every other section.

**Branding, Feel, Read, Color, and Polish fine-tune.** Each one adjusts a single part of the design system. Use them when the theme is close but not exact. Your changes adjust the values directly; they don't create a new theme.

**Components shows the result.** There is nothing to configure on the Components page. It renders buttons, forms, cards, alerts, and badges with your current values so you can catch problems before you look at full screens.

## A good order to work in

1. Pick the [theme](/docs/frontend/prototype/design/theme) closest to what you want.
2. Upload your logo and favicon in [Branding](/docs/frontend/prototype/design/branding).
3. Adjust [Feel](/docs/frontend/prototype/design/feel), [Read](/docs/frontend/prototype/design/read), [Color](/docs/frontend/prototype/design/color), or [Polish](/docs/frontend/prototype/design/polish) only where the theme isn't right.
4. Open [Components](/docs/frontend/prototype/design/components) to check that everything holds together.
5. Review your full generated screens in [Screens](/docs/frontend/prototype/screens/overview).

## FAQ

<AccordionGroup>
  <Accordion title="What happens if I switch themes after fine-tuning?">
    Switching themes resets Branding, Feel, Read, Color, and Polish to the new theme's defaults, and your manual adjustments are overwritten. Choose your theme first, then fine-tune.
  </Accordion>

  <Accordion title="Do I have to set every section?">
    No. A theme gives you a complete set of values on its own. The other sections are there for when you want to change something specific.
  </Accordion>

  <Accordion title="Does my design carry into the built app?">
    Yes. When you build, the values you set here become the starting point for the frontend's [theming](/docs/frontend/theming) system. You can keep refining them there with the visual editor, chat, or code.
  </Accordion>
</AccordionGroup>