# Global aesthetics settings in the Design tab URL: https://www.panoramr.com/help/design-global-aesthetics Category: Design and branding Keywords: global aesthetics, colors, primary color, secondary color, automatic text color, text color, icon color, font, glass effect, transparency, backdrop blur, radar size Last checked: 2026-10-30 Every setting of the Global aesthetics panel: colors, glass effect, hotspot color, radar size and font. Where it is, what it starts as and what visitors see. Global aesthetics sets the colors, the frosted-glass effect and the font that the whole player shares: its bars, panels, buttons and hotspots. This page lists every setting of the Global aesthetics panel (Design tab > Global aesthetics) in the **Design** tab, in the order the panel shows them. For the look of one bar, start with [Customize the player's bars, sidebar and gallery](https://www.panoramr.com/help/customizing-the-ui-top-navigation-bottom-bar-and-sidebars). **Who can use it.** The owner and, by default, an Admin collaborator can open the Design tab; it is not open to Editors or Viewers. Every plan can change these settings on any theme. The panel has three tabs: **Colour**, **Surface** and **Type**. The **Basic** view shows **Primary UI colour**, **Text colour**, **Hotspot colour** and **Font**; the **Advanced** view adds the rest, including the whole **Surface** tab. **What a theme does to them.** Applying a theme sets all of these, and a setting the theme does not state goes back to its default ([What a theme carries](https://www.panoramr.com/help/themes-and-my-designs#what-a-theme-carries)). A tour in a Pro theme that visitors may not use shows them the free Default look, so these settings are the Default's ([Pro themes](https://www.panoramr.com/help/pro-themes)). **When visitors get a change.** The preview beside the panels shows it at once. Visitors get it after you click **Save & Render**, or after **Publish changes** when the tour uses Draft Workflows ([My changes do not show for visitors](https://www.panoramr.com/help/when-do-changes-show)). **Bars with their own style.** The Top nav bar, the side menu, the icon bar and the pan and zoom controls each have an override switch for their own colors. While it is on, that bar ignores the colors here ([Icon bar settings](https://www.panoramr.com/help/design-icon-bar)). ## Colour tab These settings are on the **Colour** tab, in the cards **Interface** and **Hotspots and radar**. ### Primary UI colour The base color of panels and buttons. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Interface** > **Primary UI colour**. Basic and Advanced view. **Default:** `#141419` (a near-black) **What it does:** Sets the background of the panels, bars and buttons that follow the theme. The color is shown with the see-through amount of **Transparency**, so a solid color on the Surface tab can look lighter than the swatch. The hover color is the same color 25 points more solid. With **Text and icons** on **Automatic**, the text and icons are worked out from it. Choosing a color here (or a **Secondary colour**) makes the whole tour follow it: a part that has colors of its own, as a theme may give the side menu or the icon bar, has its **Use your own colours** switched off (the multi menu goes back to the **Theme** look), and the panel says which, for example `The side menu and the icon bar now follow these colours.` Their own colors are kept, so switching that part back on in its panel brings them back. **What visitors see:** Panels, bars and buttons in that color, frosted as the **Surface** tab says. **Related:** **Secondary colour**, **Text and icons**, **Transparency**. ### Secondary colour The color of the highlights. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Interface** > **Secondary colour**. Basic and Advanced view. **Default:** empty, which is the highlight color of the theme the tour wears (its hotspot color for a theme made before this field; Averline's is brass, `#d9c08a`), shown faintly in the box until you choose one. A tour with no theme, or a theme without one, uses indigo (`#6366f1`), the color the player has always used **What it does:** Colors what should stand out: hotspots that have no color of their own (and when **Hotspot colour** is empty), the floor plan's pins and radar cone, focus rings, and the item you are on: the room you are in in the side menu, the current photo in the thumbnail strip and, in the multi menu's **Theme** look, the line and word of the item you are on. A label on it is black or white, whichever reads better. When it is too close to **Primary UI colour** to stand out, the panel says `Your secondary colour is close to your primary, so highlights use the text colour.` and the player does that. **Use the theme's colour** (or **Use indigo** without a theme color) empties it. **What visitors see:** Highlights in that color. **Related:** **Primary UI colour**, **Hotspot colour**. ### Text and icons Let the player choose the text and icon color, or choose your own. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Interface** > **Text and icons**. Basic and Advanced view. **Default:** **Choose my own** (a tour keeps the colors it has) **What it does:** **Automatic** writes the text and icons in white or near-black (`#0b1220`), whichever reads better on **Primary UI colour** (read over a mid-dark scene when the panels are see-through), and says how readable it is, for example `Readable: 16.5:1` (4.5:1 is the usual minimum for text). Muted text, lines between items and the hover color come from it too. **Choose my own** shows **Text colour** and **Icon colour**, and warns when the text is hard to read on the primary. Applying a theme keeps your choice. **Your colours** under the fields shows every color the player will use: panels, text, muted text, lines, hover, highlight and the label on a highlight. **What visitors see:** Text and icons in those colors. **Related:** **Primary UI colour**, **Text colour**. ### Text colour The color of the words in the player. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Interface** > **Text colour**. Basic and Advanced view. **Default:** `#ffffff` (white) **What it does:** Sets the text of menus, panels and bars. A softer copy of it (65% strong) is used for secondary text. It shows when **Text and icons** is on **Choose my own**. **What visitors see:** Words in that color. The panel warns when it is hard to read on **Primary UI colour**. **Related:** **Primary UI colour**. ### Icon colour The color of the icons in bars and panels. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Interface** > **Icon colour**. Advanced view. **Default:** `#ffffff` (white) **What it does:** Sets the interface icons and the arrows of link hotspots drawn in the player's own icon shapes. **What visitors see:** Icons in that color. **Related:** **Primary UI colour**. ### Hotspot colour The accent color of the hotspots. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Hotspots and radar** > **Hotspot colour**. Basic and Advanced view. **Default:** `none` (empty, which follows the theme color) **What it does:** The field's hint reads `Empty uses the secondary colour, or the theme colour without one.` Once you pick a color, **Use theme** appears and empties the field again. A color set on one hotspot is stronger than this one. **What visitors see:** Hotspot markers, and the radar cone on the floor plan, in that color. A hotspot icon pack you apply sets it too ([Hotspot looks and presets](https://www.panoramr.com/help/hotspot-looks-and-presets)). **Related:** **Radar size**, **Use theme**. ### Use theme Empties **Hotspot colour**. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Hotspots and radar**, under **Hotspot colour**. Basic and Advanced view. It shows only while a hotspot color is set. **Default:** none **What it does:** Sets **Hotspot colour** back to empty. **What visitors see:** Hotspots in the theme's accent color again. The radar cone is drawn in a fixed blue-violet (`#6366f1`) while the field is empty, not in the theme color the panel shows beside the field. **Related:** **Hotspot colour**. ### Radar size The size of the viewing cone on the floor plan. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Colour** tab > card **Hotspots and radar** > **Radar size**. Advanced view. **Default:** `100` percent. The slider runs from 30 to 200. **What it does:** Sets the size of the cone that shows where the visitor is looking: the number is its width and height in pixels on the minimap marker, so 100 is the standard size. The hint reads `The radar cone on the floor plan.` **What visitors see:** A larger or smaller cone on the marker of the room they are in. **Needs:** A floor plan with panoramas placed on it ([Floor plans and minimaps](https://www.panoramr.com/help/adding-floor-plans-and-interactive-minimaps-to-your-tours)). **Related:** **Hotspot colour**. ## Surface tab These settings are on the **Surface** tab, in the card **Glass**. The tab is in the **Advanced** view only. ### Transparency How solid the panels and bars are. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Surface** tab > card **Glass** > **Transparency**. Advanced view. **Default:** `60` percent **What it does:** A number from 0 to 100. The hint reads `100% is solid, 0% is invisible.` **What visitors see:** Panels and bars through which the picture shows more at lower numbers. **Related:** **Backdrop blur**, **Primary UI colour**. ### Hover brightness How much lighter a button gets under the pointer. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Surface** tab > card **Glass** > **Hover brightness**. Advanced view. **Default:** `25` percent **What it does:** A number from 0 to 100: the strength of the white that is laid over an icon or button when it is hovered. The hint reads `How much lighter icons and buttons get under the pointer.` **What visitors see:** A button that lightens when the pointer is over it. A touch screen has no hover. **Related:** **Transparency**. ### Backdrop blur How frosted the glass is. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Surface** tab > card **Glass** > **Backdrop blur**. Advanced view. **Default:** `12` pixels. The slider runs from 0 to 40. **What it does:** Blurs the picture behind a see-through panel. The hint reads `Frosting behind transparent elements.` **What visitors see:** A frosted effect behind panels and bars. It shows only where **Transparency** is below 100. **Related:** **Transparency**. ## Type tab These settings are on the **Type** tab, in the card **Typography**. ### Font The font of all the text in the tour. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Type** tab > card **Typography** > **Font**. Basic and Advanced view. **Default:** `default`, shown as `Default system font` **What it does:** Chooses one of ten fonts: Inter, Roboto, Poppins, Montserrat, Open Sans, Raleway, Playfair Display, Lora, Merriweather and Space Mono. The list gives each a short note, for example `Premium serif`. The hint reads `Applies to all text in the tour.` **What visitors see:** All text in that font, except on a bar that has its own font. The player carries its own copies of the ten fonts, so they load from Panoramr and not from another site. **Related:** **Base size**. ### Base size The size of the text. **Where:** the Global aesthetics panel (Design tab > Global aesthetics), **Type** tab > card **Typography** > **Base size**. Advanced view. **Default:** `16` pixels. The slider runs from 12 to 24. **What it does:** Sets the text size of the player page. The hint reads `Default is 16px.` **What visitors see:** Larger or smaller text. **Related:** **Font**. ## Troubleshooting **I changed the color and one bar did not follow.** That bar has its own style switched on. Open its panel and switch off the override, or change the color there. **The panel looks lighter than the color I picked.** **Transparency** is below 100: the color is laid over the picture. **The Surface tab is missing.** The **Basic** view hides it. Click **Show advanced** at the foot of the panel, or **Advanced** in the switch beside the tab row.