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

# Design Principles

> The visual and interaction principles your design and engineering teams should follow when extending or customizing the generated UI.

Design Principles is a structured place to capture the rules of thumb that guide design decisions in your app. Archie reads these principles when generating components and surfaces them when teammates extend the generated UI.

## What goes here

A list of principles, each with:

* A short **name** (e.g. "Density", "Progressive Disclosure", "Forgiveness")
* A **description** explaining the rule and when it applies
* Optional examples

Typical principles for Archie-generated apps include things like:

* "Forms over modals for any input that takes longer than 5 seconds"
* "Empty states should always provide a next action"
* "Primary actions are bottom-right on mobile, top-right on desktop"
* "Color is decorative, not informational — never rely on color alone"

These aren't enforced automatically — they're guidance for both Archie's agents (when generating new components) and humans (when extending the app).

## Why bother

Design principles are easy to skip on a small project. They become valuable when:

* Multiple builders are editing the app — principles keep new work consistent with existing work
* You're handing the app off to a team for ongoing development — principles document the design decisions that aren't visible in code
* You're regenerating screens — Archie reads principles when applying new patterns to existing modules

## FAQ

<AccordionGroup>
  <Accordion title="Does Archie auto-fill principles?">
    Archie pre-fills a starter set based on your archetype and the chosen UI framework. Edit, add, or delete to match your team's standards.
  </Accordion>

  <Accordion title="Are principles enforced in generated code?">
    No. They're documentation that Archie's agents read when making decisions, not strict rules. If you need an actual enforced rule, encode it as a business rule on the relevant feature or as a lint check in your codebase.
  </Accordion>

  <Accordion title="How are these different from styling settings?">
    Styling sets concrete values (colors, fonts, sizes). Principles are higher-level — "use generous whitespace" rather than "padding is 16px". The two work together.
  </Accordion>
</AccordionGroup>