> ## 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

> Visual Design defines how your app looks and behaves on screen — brand, design principles, styling, and reusable layout templates.

Visual Design specifies how your app looks and behaves on screen. Four sub-areas, each tackling a different layer of the visual system:

<CardGroup cols={2}>
  <Card title="General" icon="image" href="/docs/features/specifications/visual-design/general">
    Brand identity (logos, favicons) and form factors (desktop, tablet, mobile).
  </Card>

  <Card title="Design Principles" icon="lightbulb" href="/docs/features/specifications/visual-design/design-principles">
    The principles your design and engineering teams should follow.
  </Card>

  <Card title="Styling" icon="palette" href="/docs/features/specifications/visual-design/styling">
    Theme, typography, UI framework, and iconography.
  </Card>

  <Card title="Layout" icon="table-cells-large" href="/docs/features/specifications/visual-design/layout">
    Reusable page templates for common app sections.
  </Card>
</CardGroup>

## How visual specs feed code

Visual Design specs drive the generated [Frontend](/docs/features/frontend/overview):

* The component library (Tailwind, Material, Chakra, Bootstrap) is set on the styling page
* The icon set (Lucide, Heroicons, Material, Font Awesome) is also on styling
* The theme tokens (color palette, typography, spacing) flow into the component theme
* The layout templates set the page chrome for each section type

When you re-run code generation, the visual specs are read in full and applied to the frontend.

## FAQ

<AccordionGroup>
  <Accordion title="Can I customize the theme after generation?">
    Yes. Edit the styling specs and re-run frontend generation, or edit theme tokens directly in the generated code via the [Visual editor](/docs/features/frontend/visual-editor). Both paths work.
  </Accordion>

  <Accordion title="What if I want to use a UI framework that isn't in the dropdown?">
    Pick the closest one (Tailwind is the most flexible) and override component-level styling via the visual editor and IDE. Custom UI frameworks aren't in the catalog yet.
  </Accordion>

  <Accordion title="Do visual specs affect anything besides the frontend?">
    Mostly no. Email templates picked up by SendGrid use brand identity (logo, colors); other backend surfaces are visual-spec-agnostic.
  </Accordion>
</AccordionGroup>