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

# CSS Customization

> [!WARNING]
>
> This feature is in **beta**. This means it might at any time be changed, withdrawn from your account, or become part of a paid add-on module. You might also experience interruptions of this service, degradation of user experience or faulty behavior even in critical processes such as automations and sendouts. Voyado welcomes feedback on beta features, and encourages you to try them, but you should *not* build business critical logic on beta features. Only when a feature reaches its full release can you trust it to function reliably with no further breaking changes.

All visual tokens are CSS custom properties on `:root`. Override them to match your brand.

```css theme={null}
:root {
  /* Colors */
  --voyado-rating: #66C1BF;               /* Filled star / accent */
  --voyado-neutral: #D8D8D5;              /* Empty star / dividers */
  --voyado-text: #333333;                 /* Body text */
  --voyado-cta-color: #437984;            /* CTA button background */
  --voyado-cta-text-color: #FFFFFF;       /* CTA button label */
  --voyado-review-interactions-color: #A7A7A7;
  --voyado-trophy-color: #E1C32E;
  --voyado-select-bg: #FFFFFF;
  --voyado-select-border-color: #E5E5E5;

  /* Typography */
  --voyado-font-family: "Helvetica", sans-serif;
  --voyado-font-size-large: 28px;
  --voyado-font-size-medium: 22px;
  --voyado-font-size-small: 16px;
  --voyado-font-size-micro: 12px;

  /* Star sizes */
  --voyado-star-size-large: 40px;
  --voyado-star-size-small: 16px;

  /* Spacing */
  --voyado-spacing-xs: 5px;
  --voyado-spacing-sm: 10px;
  --voyado-spacing-md: 20px;
  --voyado-spacing-lg: 40px;

  /* Accessibility */
  --voyado-focus-color: #005fcc;
  --voyado-focus-ring-width: 2px;
}
```

## Brand override example

```css theme={null}
:root {
  --voyado-rating: #ff6b35;
  --voyado-cta-color: #4a90e2;
  --voyado-font-family: "Inter", sans-serif;
}

/* Or scoped to a wrapper */
.my-product-page {
  --voyado-rating: #FFD700;
}
```

## CSS classes for overrides

| Class | Element |
| - | - |
| `.voyado-star--filled` | Filled star SVG |
| `.voyado-star--half` | Half-filled star |
| `.voyado-star--empty` | Empty star SVG |
| `.voyado-ratings--value` | Numeric score text |
| `.voyado-ratings--count` | Review count text |
| `.voyado-badge--score` | Large numeric score |
| `.voyado-cta` | CTA button (Badge, Rate) |
| `.voyado-review--author` | Reviewer name |
| `.voyado-review--text` | Review body |
| `.voyado-review--interactions` | Thumbs + comment row |
| `.voyado-reviews--select` | Sort dropdown |
| `.voyado-summary--title` | AI summary heading |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.