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.

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

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.

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

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