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

# Styling

> Theme, typography, UI framework, and iconography — the concrete style tokens Archie applies across the generated frontend.

Styling is where you set the concrete visual choices Archie applies across your app — color palette, typography, the UI framework powering your components, and the icon set. Four sections.

## Theme

Pick a **color palette** from Archie's curated themes or supply your own brand colors. The chosen palette generates the full set of design tokens — primary, secondary, accent, neutrals, success, warning, danger — used by every generated component.

Themes flow into:

* Component backgrounds, borders, and accents
* Email template backgrounds
* Charts and dashboards (a default chart palette is derived from the theme)

## Typography

* **Font Family** — the typeface for the app. Archie picks from Google Fonts and a curated list of system stacks; uploading a custom font is supported on Enterprise.
* **Font Size** — base size from which the type scale is generated.
* **Font Weight** — default weight for body copy.

The chosen typography generates a full type scale (display, headings, body, caption) used across the generated frontend.

## UI Framework

The component library underlying the generated frontend. Options:

* **Tailwind** — utility-first CSS framework with custom-styled primitives. Most flexible.
* **Material** — Google's Material Design implementation in React.
* **Chakra** — modular, accessible component library.
* **Bootstrap** — responsive, mobile-first framework with prebuilt components.

This is one of the most load-bearing visual choices — switching frameworks after generation requires Archie to regenerate the entire frontend.

## Iconography

Pick the icon set used throughout the app:

* **Lucide** — community-maintained icon set; default
* **Heroicons** — by the makers of Tailwind CSS
* **Material** — Google's Material icons
* **Font Awesome** — large catalog covering most common needs

The icon set is used in navigation, buttons, empty states, and anywhere a glyph is needed. Switching icon sets after generation re-keys icon references across the codebase.

## FAQ

<AccordionGroup>
  <Accordion title="Can I override theme tokens for individual components?">
    Yes. The theme defines defaults; the visual editor and IDE let you override component-by-component. Component overrides survive code regeneration unless you regenerate that specific component.
  </Accordion>

  <Accordion title="What if my brand uses a custom color not in the curated themes?">
    Provide custom hex values when picking the palette. Archie generates the rest of the token set (lighter/darker shades, hover states, focus rings) from the colors you supply.
  </Accordion>

  <Accordion title="Can I mix UI frameworks (e.g. Tailwind for some screens, Material for others)?">
    No — pick one. Mixing frameworks creates conflicting style systems and inflates bundle size. Archie generates a single consistent UI framework across the whole frontend.
  </Accordion>

  <Accordion title="How do I add a custom icon that isn't in any of the sets?">
    Drop the SVG into the generated `/icons` directory and import it like a component. The icon set choice doesn't restrict you from adding custom one-offs.
  </Accordion>

  <Accordion title="What happens if I change the UI framework after generating code?">
    Archie regenerates the frontend on the next code generation pass. Custom edits in the visual editor that depend on framework-specific classes may not migrate cleanly — review the diff before merging.
  </Accordion>
</AccordionGroup>