> For the complete documentation index, see [llms.txt](https://docs.rewst.help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rewst.help/rewst-documentation/documentation/apps/app-branding-and-visual-design.md).
# App branding and visual design
Rewst App Builder has four separate layers where the appearance of an app gets decided. Page styling and custom CSS can be handled for you by the Rewst Agent. However, app appearance work can be intensive for the Agent's AI token spend. If you're looking to budget your app work, have the Rewst Agent build the app without branding or custom design. Then, read our documentation below, and manually adjust the visual customization as desired.
#### 1. Favicon and browser tab title - manual setup only, no Rewst Agent
These are the small settings that makes a portal feel real instead of borrowed: the icon and text in the browser tab.
* **Favicon** - the tiny icon on the browser tab where the app is displayed, set to whatever image you'd like
* **Browser tab title** - shows the page's title
To set your favicon
1. Navigate to your desired app.
2. Open the app's info page.
3. Click **Settings**. Note that this is not the settings for an individual page, but the entire app.
4. Upload your favicon image file, or paste a link to one already on your website.
#### 2. Page styling in the Canvas
Each page has a drag-and-drop Page Builder Canvas with a block library on the left side. Drag and drop the blocks onto the Canvas, then click on them to open their configuration menu and apply desired styles. Note that to have individual block styles consistent across all pages, you'll need to edit the styles on each individual page. For images specifically: upload to the **Image Library** once, then reuse that image on any page/app. That's where your logo files should live.
Read more about branding-related blocks [here in our blocks documentation](/rewst-documentation/documentation/apps/blocks.md).
**How to use it:**
1. Drag a block onto the Page Builder Canvas.
2. Click the block you just placed. Its settings appear in the right side configuration menu. Chart blocks and headers, for example, can all be color-coded to match your brand.
3. Change its options there. Depending on the block, these lay be under the **Config** tab or the **Properties** tab. For all blocks: under the **Properties** tab, the **Styles** menu at the bottom contains settings for dimensions, typography, colors, and opacity.\
\
4. Click **Save**.
#### 3. Customer branding - manual setup only, no Rewst Agent
This option isn't for adding your own branding to the app, but instead lets each customer see their own brand when they access the app. The app shows whichever customer is viewing it their logo and their colors. It won't give you dynamic display for fonts, spacing, or layout control.
Access these settings in the **Global** tab of the left side menu of the Page Builder.
* Check off **Use customer branding** to apply the color and logo settings for the entire app.\
* Click **Manage branding** to open a dialog that contains all the branding settings for the entire app.
The customer branding dialog
#### Layer 4: Custom CSS - custom fonts, spacing, gradients
{% hint style="info" %}
We recommend that you let the Rewst Agent do custom CSS for your app unless you are already deeply proficient in CSS coding. This is a very advanced feature of Rewst.
{% endhint %}
The Rewst Agent can use this layer for more extensive visual design when you need an app look like your product, not a Rewst app. Simply describe what you want and the Rewst Agent will write and apply the CSS.
This layer can be used to apply:
* Custom fonts and typography
* Dark mode — ask the Rewst Agent to set this up for you
* Exact brand hex colors, gradients, shadows, rounded corners, spacing
* Custom layouts — hero sections, sidebars, unusual page structures
* Theming the built-in components — Rewst tables and charts are styled through "design tokens" rather than direct CSS, so recoloring a table's header, rows, and toolbar is a specific technique
{% hint style="warning" %}
* The Rewst Agent can only build the header currently. Ask for the header in your prompt, then manually add a sidebar or footer yourself in the Global tab.
* Rewst treats this functionality in apps as a different build mode. An app is either "native/default" —Rewst-styled, theme picker, fully editable by clicking —or "custom visual" —hand-built HTML/CSS. Custom CSS gives you a far more polished result but the pages become less click-editable. It's a good idea to decide which you want up front.
{% endhint %}
---
# 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.rewst.help/rewst-documentation/documentation/apps/app-branding-and-visual-design.md?ask=&goal=
```
`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.
