Design Panel

The Design panel is where you customize how your entire app looks and flows. It’s the single place to set your app’s typography, color palette, screen structure, and navigation — changes here apply across every screen at once.

​

Opening the Design panel

Click the paintbrush icon in the top toolbar of the Canvas to open the Design panel. It slides out from the left and stays open while you work. The panel has three tabs:

​

Objects tab

The Objects tab shows every screen and its objects as a nested tree. Use it to jump between screens, find a specific component, or reorder objects without hunting through the canvas.

• Click any screen name to open it on the canvas.
• Expand a screen to see its components and groups.
• Selecting an item here selects it on the canvas so you can edit it with the property toolbar.

​

Styles tab

The Styles tab controls your app’s visual identity. Anything you change here applies globally — every screen and every component updates instantly.

​

Typography

Pick a Main font for your app. Rey ships with a curated list of fonts (Commissioner is the default) that render well on iOS, Android, and the web. Every text component uses this font unless you override it on the individual component.

​

Color palette

Define the reusable colors your app uses. The palette is grouped by role so your design stays consistent:

• Screens — background colors for your screens.
• Text — default text colors.
• Containers — surfaces like cards, sheets, and grouped rows.
• Buttons — three levels of button styling:
  • Primary — your main call-to-action color.
  • Secondary — supporting actions.
  • Tertiary — low-emphasis actions and links.

When you set a color here, every component bound to that role updates across the whole app. This is the fastest way to rebrand or dark-mode-tune your app without touching individual screens.

​

Navigation tab

The Navigation tab controls how users move through your app.

​

Start screen

Pick which screen users see first when they open your app. You can also Apply rules to conditionally route users — for example, send signed-in users to a home screen and everyone else to a login screen.

​

Main navigation

Configure your app’s bottom tab bar by moving screens between Included and Excluded:

• Included — screens that appear as tabs in the bottom tab bar.
• Excluded — screens users reach through actions, links, or flows, but not from the tab bar.

​

Related