> For the complete documentation index, see [llms.txt](https://docs.crobox.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.crobox.com/how-to-guides/sagent/setup/design.md).
# Design
Match Sagent's appearance to your brand and website.
The **Design** section controls Sagent's visible interface on your website. Use it to match your brand without reducing readability or usability.
Configure the standard settings first. Review every change in preview on mobile and desktop before publishing.
Settings
#### Icon and color
* **Chat Icon** appears as Sagent's visual identifier. Use a clear brand-approved image.
* **Chat Background Image** appears behind the chat interface. Use an image that preserves text contrast.
* **Icon Background Color** fills the space behind the chat icon. Use it with transparent icons or remove it when unnecessary.
* **Icon Border Radius**, **Icon Width**, and **Icon Height** shape and size the icon. Keep the icon large enough to recognize and tap.
* **Primary Color** appears on key interactive elements, highlights, and shopper chat bubbles.
* **Primary Text Color** appears on primary-color surfaces. Choose a color with clear contrast.
* **Selected Buttons Background** appears after shoppers select a suggestion or option. It must remain visibly distinct from unselected buttons.
Set the icon and primary colors first. Check icon legibility, button states, and text contrast in the deployed context.
#### Product cards
* **Product Image Background Color** appears behind product images in recommendation cards. Match it to your image treatment.
* **Product Image Padding** adds whitespace around images in those cards. Increase it for tightly cropped imagery.
These settings affect recommendation cards only. They do not change your product images or catalog data.
#### Chat layout
* **Chat Width** and **Chat Height** set the visible chat panel dimensions.
* **Right Position** and **Bottom Position** set the panel's offset from the viewport edges.
* **Chat Border Radius** rounds the chat panel corners.
* **Buttons Border Radius** rounds buttons, suggestions, and other button surfaces.
* **Z-Index** controls whether Sagent sits above or below other website elements.
Use the defaults unless the website layout requires a change. Test narrow screens, sticky elements, navigation, consent banners, and checkout flows. Do not position Sagent where it blocks required page controls.
Landing Aurora Colors
Landing Aurora Colors control the animated gradient on Sagent's landing view. Shoppers see it before they begin a conversation.
* **Generation Method** controls how the landing gradient is created. Select **Manual** to define the colors yourself.
* **Gradient Type** controls the gradient direction and shape.
* **Angle** controls the direction of a linear gradient.
* **Color Stops** set each gradient color and its position. Add or remove stops to refine the transition.
Keep the animation subtle and readable. Check that landing titles, subtitles, and icons remain clear against every gradient state.
Custom CSS
**Custom CSS** provides advanced visual overrides when standard controls cannot meet a requirement. It can affect any visible Sagent surface.
Use it only for an approved, specific design requirement. Keep overrides minimal and test every affected state. Recheck custom styling after Sagent updates or theme changes.
Use the following examples when the prefilled selectors are unavailable. Adjust the color values for your brand.
```css
/* Loading-question gradient */
.question-container .question-gradient,
.results-summary .results-title .results-title-markup {
background-image: linear-gradient(
135deg,
#000000 0%,
#000000 34%,
#e2e1dc 37%,
#ffffff 40%,
#e2e1dc 45%,
#ffffff 50%,
#e2e1dc 55%,
#ffffff 60%,
#e2e1dc 66%,
transparent 75%,
transparent 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* Animated chat-input border */
.chat-input.animated-border::before {
background-image: linear-gradient(
135deg,
transparent 0%,
transparent 20%,
#e2e1dc 34%,
#ffffff 40%,
#e2e1dc 45%,
#ffffff 50%,
#e2e1dc 55%,
#ffffff 60%,
#e2e1dc 66%,
transparent 78%,
transparent 100%
) !important;
}
/* Chat background */
.expanded.expended-chat-wrapper {
background-color: #e2e1dc;
}
/* Reset icon */
.header-icons-wrapper .icon-btn.reset svg {
fill: black !important;
}
/* Privacy statement */
.privacy-toggle,
#privacy-statement-content a {
color: #0a0a0a !important;
}
/* Recommendation summary */
.recommendation-summary .summary-title {
color: #0a0a0a !important;
}
/* Rating stars */
.product-rating {
--star-fill: #0a0a0a !important;
}
/* Result benefit checkmarks */
.benefits-section .benefit-item .benefit-icon.advantage {
background: linear-gradient(135deg, #75827a, #ddd8cf) !important;
}
```
{% hint style="warning" %}
Without brand colors and an icon, Sagent uses Crobox default styling.
{% endhint %}
### Frequently asked questions
Which settings should I change first?
Set the chat icon, primary color, and primary text color first. Test the result on your website before changing layout settings.
When should I use Advanced styling?
Use it only when standard design settings cannot meet a specific brand requirement. Test each override after saving.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.crobox.com/how-to-guides/sagent/setup/design.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.