> For the complete documentation index, see [llms.txt](https://docs.riff.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.riff.ai/archive/features-legacy-databutton-web-app-builder/app-preference-features/app-design.md).

# App Design

Design Guidelines

AI Generated Design Guidelines

* Automatically generated based on your app's purpose
* Used by the agent when creating UI components
* Can be manually edited to match your brand

Design Approach

* Overall visual philosophy
* Examples: "Minimalist", "Bold and colorful", "Corporate professional"

Key Features

* Important design elements to emphasize
* Examples: "Information-dense layouts", "Large touch targets", "High contrast"

Shapes

* Preferred geometric style
* Examples: "Rounded corners", "Sharp rectangles", "Organic curves"

Typography

* Font hierarchy and style guidance
* Examples: "Bold headings with readable body text", "Monospace for code"

To Save: Click Apply Changes after editing

Visual Settings

Favicon

* The small icon shown in browser tabs
* Upload your custom favicon (recommended: 32x32px or 64x64px PNG/ICO)
* Appears in:
* Browser tabs
* Bookmarks
* Mobile home screen (when app is saved)

Default Theme

* Light: Light background, dark text (default)
* Dark: Dark background, light text
* Users can override with in-app theme toggle if implemented

Main Screen Size

* Optimizes the preview and design for your primary use case

Desktop

* Wider layout
* More screen real estate
* Suitable for: Dashboards, data-heavy apps, admin panels

Mobile

* Narrow, touch-friendly layout
* Vertical scrolling emphasized
* Suitable for: Consumer apps, field work apps, messaging

Tablet

* Medium width layout
* Balance between desktop and mobile
* Suitable for: Point-of-sale, kiosk apps, hybrid use cases


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.riff.ai/archive/features-legacy-databutton-web-app-builder/app-preference-features/app-design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.