> ## Documentation Index
> Fetch the complete documentation index at: https://visitdocs.planpoint.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Colors

> The five brand colours, what each one actually controls, and how to reset them.

The **Colors** tab of the [style editor](/customize/style-editor) has five fields. Each can be picked with the colour swatch or typed as a hex value, and **Reset** puts everything back to the defaults.

<Frame caption="The Colors tab — five values drive the whole viewer">
  <img src="https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/colors.png?fit=max&auto=format&n=0E3RRUq_T5nIh8kn&q=85&s=1a6d373534eeed938cbc21fdcd0f2b37" alt="Style editor Colors tab showing the five colour fields" width="1600" height="1208" data-path="images/customize/colors.png" />
</Frame>

## The five colours

| Field               | Default        | What it controls                                                                            |
| ------------------- | -------------- | ------------------------------------------------------------------------------------------- |
| **Hover**           | `#0f172a`      | The highlight on floor outlines and room polygons when a visitor hovers or taps them.       |
| **Accent**          | `#2563eb`      | Viewpoint markers on the floor plan and [feature hotspots](/build/hotspots) on room photos. |
| **Button**          | inherits Hover | Primary buttons such as **Reimagine this room with AI**.                                    |
| **General text**    | theme default  | Body text colour throughout the viewer.                                                     |
| **Page background** | `#ffffff`      | The background behind the two panes.                                                        |

<Warning>
  **Hover ≠ Accent.** This trips people up: the shape that lights up on the exterior photo follows **Hover**, while the dots and pins on the floor plan follow **Accent**. If a highlight looks wrong, check you edited the right one.
</Warning>

## Choosing colours that work

* **Hover** sits on top of a photograph at partial opacity. Dark, saturated colours read clearly; pale ones disappear against a bright facade.
* **Accent** sits on a white floor plan. Something with contrast — a brand blue, a deep red — keeps markers findable.
* Leave **Button** empty unless your brand button colour differs from Hover; it inherits sensibly.
* Leave **General text** empty unless you have a reason. The default has been tuned for contrast in both light and dark mode.

## Where the colours show up

<Frame caption="Hover drives the polygon highlight; Accent drives markers and hotspots">
  <img src="https://mintcdn.com/planpoint-visit/0E3RRUq_T5nIh8kn/images/customize/colors-in-viewer.png?fit=max&auto=format&n=0E3RRUq_T5nIh8kn&q=85&s=d19beabfeadb38f00d2db091b0b17894" alt="Viewer showing a highlighted floor outline next to accent-coloured viewpoint markers" width="1600" height="811" data-path="images/customize/colors-in-viewer.png" />
</Frame>

## Dark mode

If you enable the [dark mode toggle](/customize/dark-mode), your brand colours are preserved and only the neutral surfaces flip. You can also override the dark background colour separately — cards and borders are derived from it automatically.

## Need more control?

Anything the five fields cannot reach can be styled with [Custom CSS](/customize/custom-css).