Brand & theming
Give each project its own palette with brand tokens, and lift colors automatically from a brand CSS file.
Last updated 2026-07-02
Each project carries its own brand — a small set of color tokens that theme the console when that project is active. This makes it easy to tell at a glance which product you're looking at, and it keeps a shared, product-agnostic UI looking at home for every project.
Brand tokens
A brand is a handful of hex colors plus optional named accents:
| Token | Used for | Example |
|---|---|---|
primary | Accent color — active navigation, primary buttons, highlights | #3385E0 |
ink | The dark sidebar | #2B2F36 |
surface | The light content background | #FFFFFF |
subAccents | Optional named extra colors your project uses | { "warn": "#E9A83C" } |
The active project's brand is injected through the app's environment, so shared components — cards, buttons, the sidebar — automatically read the right palette. When no project is selected, AppRelay's own default palette applies.
Setting a brand
Open the project editor and choose the Brand section. Set the primary, ink, and surface colors, and add any named sub-accents you want to reference. Changes apply immediately so you can see the console re-theme as you go.
Lifting colors from a brand CSS file
If your product already defines its palette in CSS, you don't have to retype it. During onboarding (or from the Brand editor) you can point AppRelay at a brand stylesheet and it will lift the #RRGGBB tokens it finds into the brand.
Brand travels with the project
Brand tokens are part of the project's data, so they're included when you export a .relay archive. Anyone who imports the project sees it themed exactly as you set it — no separate asset to share.