App Designer
The App Designer controls how your whole portal looks to everyone who signs in: its layout, logo, colors, gradients and corner rounding. The left side is a live preview of your portal. The right side holds the controls, and every change shows in the preview before you save.
Opening the Designer
- Go to Settings → Design.
- On the Application Design card, click Open App Designer.
The designer lives at /settings/app-design/. Access follows the cove_appearance_manage capability, so you can grant it per role in User Management → Permissions. It is not locked to administrators.
The preview is your real portal, and you can click around inside it. Use the Back, Forward and Refresh buttons above it to navigate. Use Desktop, Tablet and Mobile to check the design at each size.
How the Designer Is Organized
The controls panel runs top to bottom in this order:
| Section | What it sets |
|---|---|
| Layout Style | Standard Block or Cove Dock |
| Theme Mode Options | Which of light and dark mode your portal offers |
| Logo Settings | Which logo shows, its height and offset |
| User Profile Menu | Where the avatar and profile menu sit |
| Sidebar Sign-Off Link | A sign-out link in the sidebar footer |
| Content Area Spacing | Padding around the main content area |
| Border Radius | Corner rounding for the dock, cards, buttons and form fields |
| Quick Start Palettes | A full color set in one click |
| Gradients | Background and accent gradients |
| Color Editor | Every individual color, gradient fine-tuning and custom CSS |
Logo Settings, Content Area Spacing, Border Radius, Quick Start Palettes, Gradients and Color Editor are collapsible sections. Click a section's title to open or close it. The designer remembers which sections you left open, per browser.
Changed in v4.137.0: Theme Mode Options moved up to sit directly under Layout Style, and every group now uses the same collapsible layout.
Layout Style and Theme Mode
Layout Style sets the overall shape of the app:
- Standard Block — a classic flat layout where the header, sidebar, content and footer sit at the same level.
- Cove Dock — the main content area is raised as a rounded card with a border. The header, sidebar and footer share one background, set with Dock Background and Dock Text Color in the Color Editor.
Theme Mode Options chooses which modes your portal offers:
- Both Modes — people can switch between light and dark. Design both color schemes in the Color Editor. Marked Beta.
- Light Only — the portal always shows light mode, and the theme switcher is hidden.
- Dark Only — the portal always shows dark mode, and the theme switcher is hidden. Marked Beta.
Logo, Profile Menu and Spacing
Logo Settings picks the Active Logo: Light Logo (Full), Light Icon, Dark Logo (Full) or Dark Icon. It also sets Logo Height (20–60px) and Logo Offset (0–40px). Upload the logos themselves in Settings → Design.
User Profile Menu sets where the avatar and profile dropdown appear:
- Auto — the header in Standard Block, the sidebar footer in Cove Dock
- Header — the top-right of the header bar
- Sidebar — the bottom of the sidebar
Sidebar Sign-Off Link adds a sign-out link to the sidebar footer.
Content Area Spacing sets Space Top, Space Right, Space Bottom and Space Left around the main content area, from 0 to 60px each.
Border Radius
New in v4.137.0: Border Radius is its own section, with separate controls for cards, buttons and form fields.
Each slider sets how rounded the corners are, in pixels:
| Slider | What it rounds | Range |
|---|---|---|
| Dock | The raised content card in Cove Dock. Only shown when Layout Style is Cove Dock. | 0–50px |
| Cards | Cards and panels, including their header and footer corners | 0–30px |
| Buttons | Standard buttons | 0–30px |
| Form Fields | Text inputs and selects | 0–30px |
Buttons with their own shape, such as round icon buttons and pill buttons, keep it. The same goes for any element that already has its own rounding.
Nothing changes on your portal until you save. The card, button and field sliders start at the portal's existing rounding. After the first save, standard buttons round from 7.6px to 8px unless you move that slider.
Quick Start Palettes
A palette sets every color in one click. Palettes come in light and dark versions, under the Light Palettes and Dark Palettes tabs.
With Pair light & dark checked (the default), choosing a palette also applies its matching palette in the other mode, so both modes stay coherent. Uncheck it to set the two modes separately.
| Light palette | Dark counterpart |
|---|---|
| Ocean Blue | Midnight Blue |
| Cobalt | Cobalt Night |
| Sky Blue | Sky Night |
| Blue Slate | Blue Slate Night |
| Forest Green | Emerald Night |
| Sunset Orange | Amber Glow |
| Lavender Purple | Violet Dream |
| Slate Gray | Steel Gray |
| Crimson Red | Rose Pink |
| Warm Clay | Warm Clay Night |
| Spectrum | Spectrum Night |
| Paper White | Graphite |
New in v4.137.0: Cobalt, Sky Blue and Blue Slate, each with a matching dark version.
Reset to Default restores Ocean Blue for light mode and Midnight Blue for dark mode, and saves right away.
A palette is a starting point. Adjust any single color afterwards in the Color Editor.
Gradients
The Gradients section has two groups, Background Gradient and Accent Gradient. Use the Light and Dark tabs at the top to choose separately for each mode.
Background Gradient
Paints the background behind your content: the page in Standard Block, and the surface around the content card in Cove Dock. Cards and the content area stay solid, so text contrast doesn't change.
Presets: Aurora, Mist, Dawn, Tide, Meadow, Ember, Halo, Deep Blue and Blue Gray.
To turn a gradient off, click None, or click the selected gradient again.
New in v4.137.0: Deep Blue and Blue Gray presets, and clicking the selected gradient again turns it off. Choosing None now also clears a saved gradient from the preview.
In Cove Dock, the background gradient also sits behind the sidebar. If you choose a deep gradient, check that your sidebar text color still reads clearly against it.
Accent Gradient
New in v4.137.0: Accent Gradient.
The tinted wash on highlighted surfaces:
- The current stage in a project's Process and Status views
- The list columns on a project's Board
Presets: Sky, Deep Blue, Blue Gray, Mint, Lavender and Sand. Default keeps the built-in warm wash, and it is what your portal uses until you choose something else.
Color Editor
The Color Editor sets every individual color. When your portal offers both modes, it has Light Mode and Dark Mode tabs. Switching tabs also switches the preview to that mode.
The colors cover the app header, side menu, page background, titles and body text, cards and card headers, links, the accent, primary and secondary colors with the text that sits on each, and the footer. In Cove Dock, the header, side menu and footer colors are replaced by Dock Background, Dock Text Color and Border Color.
Fine-tuning gradients
New in v4.137.0: Gradient fine-tuning in the Color Editor.
Below the colors, a Gradients block fine-tunes both gradients for the selected mode:
- Background Gradient — Start, Middle and End colors, plus an Angle from 0° to 360°
- Accent Gradient — the Tint color and the color it Fades to
The fields start from whichever preset is selected, so you are adjusting what's on screen. As soon as you change any stop, that gradient switches to Custom. The preset cards deselect, and the Gradients section notes that a custom gradient is in use. Choosing a preset again replaces your custom stops.
A small swatch beside each heading previews the result.
Custom CSS
Each mode has an optional Custom CSS box for anything the controls don't reach. You maintain these styles yourself across theme updates.
Saving Your Design
Click Save Design at the bottom of the panel. Your whole portal updates for everyone, and the preview reloads with the saved design.
Cancel leaves without saving, after a confirmation. Back to Settings returns to Settings → Design.
Changes in the preview are not saved until you click Save Design. Leaving the page, or clicking Cancel, discards them.