# Style Customization

On the **Style** page of the [dashboard](https://dashboard.direqt.ai/login), you can customize fonts, colors, and branding to match your site's design.

### Font Customization

**Font Family**: Select a font from the Font Family dropdown to match your brand.

**Font Color**: Set text color using the color dropper or enter a custom color code.

### Placeholder Customization

**Search Placeholder**: The text displayed in the search input before the user types (e.g., *"Search for articles..."*).

**Follow-Up Placeholder**: The prompt in the search input after a user submits a query (e.g., *"Ask a follow-up question..."*).

### Hyperlink Color

Adjust the color of links and clickable elements.

### Background Color

Adjust the background color of the overlay pop-up window.

{% hint style="info" %}
If you're installing AI Search on a search results page, no need to set background color - the Direqt interface has a transparent background to blend seamlessly into the page. 
{% endhint %}

### Branding <a href="#brand-logo" id="brand-logo"></a>

Customize how your brand is represented in the search interface.&#x20;

**Brand Logo**: Upload your brand's logo in .jpg, .jpeg, or .png format via the **Logo** field. This image will be displayed in the top-left corner of the interface.

{% hint style="info" %}
Horizonal logos with bold text work best.&#x20;
{% endhint %}

**Brand Name:** If no logo is uploaded, your brand name will appear in the top-left corner. By default, your brand name is set to 'Ask \[Your Website Name]'. You can edit this text in the **Brand Name** field.

### Examples

The table below shows two different AI Search interface customizations, along with the style settings used for each.

| **Example 1: Light Background, Brand Name**<img src="/files/hqPDBppS7JZzvkknYWoO" alt="" data-size="original"> | <p><strong>Brand Name</strong> - "NRO"</p><p><strong>Follow-Up Placeholder</strong> - "Search"</p><p><strong>Font</strong> - <code>Consolas</code></p><p><strong>Hyperlink Color</strong> - <code>#1e90ff</code></p><p><strong>Background Color</strong> - <code>#ffffff</code></p>                                                                                                                                                                          |
| -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Example 2: Dark Background, Brand Logo**<img src="/files/fM6vVWe9JnsSFAUoMs6b" alt="" data-size="original">  | <p></p><p><strong>Brand Logo</strong> - <img src="https://docs.direqt.ai/img/customizationExamples/logo.png" alt="Example" data-size="original"></p><p><strong>Follow-Up Placeholder</strong> - "Ask Me Anything"</p><p><strong>Font</strong> - <code>Arial</code></p><p><strong>Font Color</strong> - <code>#ffffff</code></p><p><strong>Hyperlink Color</strong> - <code>#0092ff</code></p><p><strong>Background Color</strong> - <code>#303030</code></p> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.direqt-search.com/customization/style-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.