Skip to main content
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

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.
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.
Styling sets concrete values (colors, fonts, sizes). Principles are higher-level — “use generous whitespace” rather than “padding is 16px”. The two work together.