> For the complete documentation index, see [llms.txt](https://docs.amondo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.amondo.com/developer-guides/css-variables.md).

# CSS Variables

Amondo exposes a wide range of CSS custom properties via the SDK, giving you full control over how Imprints look and feel within your digital environment. You can override layout, colours, typography and styling for specific components using your own stylesheet, all without modifying the SDK itself.

Use this guide to understand which variables are available and how to apply them.

#### How to use

To customise an Imprint:

1. Add the desired CSS variables to your global stylesheet or inline styles.
2. Apply them to the container wrapping the Amondo Imprint embed.
3. Variables will automatically be applied by the SDK.

```css
/* Example */
:root .amondo-sdk-container {
  --amo-font-size-base: 18px;
  --amo-carousel-arrow-background-color: #ffffff;
}
```

To customise multiple SDK on the page independently, use custom class `.amondo-sdk-container-${imprintId}`

```css
:root .amondo-sdk-container-1a6baa8f-f78b-4429-a8c3-470b5a98d153 {
  --amo-font-size-base: 18px;
  --amo-carousel-arrow-background-color: #ffffff;
}

:root .amondo-sdk-container-bc719aca-88a9-4b41-8185-dc713f2ebf93 {
  --amo-font-size-base: 24px;
  --amo-carousel-arrow-background-color: #000000;
}
```

#### Base variables

| Variable                            | Default                        | Description                                  |
| ----------------------------------- | ------------------------------ | -------------------------------------------- |
| `--amo-font-size-base`              | `16px`                         | Base font size                               |
| `--amo-mobile-popup-gradient-color` | `var(--amo-color-black)`       | Gradient background colour for mobile popups |
| `--amo-primary-roundness`           | `12px`                         |                                              |
| `--amo-secondary-roundness`         | `8px`                          |                                              |
| `--amo-color-button`                | `var(--amo-color-white)`       |                                              |
| `--amo-color-button-text`           | `var(--amo-color-black)`       |                                              |
| `--amo-color-button-icon`           | `var(--amo-color-button-text)` |                                              |

### Imprint formats

#### Layout

| Variable                     | Default                       | Description             |
| ---------------------------- | ----------------------------- | ----------------------- |
| `--amo-grid-spacing-desktop` | `var(--amo-grid-gap-desktop)` | Grid spacing on desktop |
| `--amo-grid-spacing-mobile`  | `var(--amo-grid-gap-mobile)`  | Grid spacing on mobile  |

#### Carousel

| Variable                                 | Default                                     | Description                 |
| ---------------------------------------- | ------------------------------------------- | --------------------------- |
| `--amo-carousel-arrow-border-radius`     | `50%`                                       | Border radius of arrows     |
| `--amo-carousel-arrow-background-color`  | `transparent`                               | Background colour of arrows |
| `--amo-carousel-progress-active-color`   | `var(--amo-color-accent, --amo-color-blue)` | Progress indicator (active) |
| `--amo-carousel-max-width`               | `1200px`                                    | Max width of carousel       |
| `--amo-carousel-arrow-border-color`      | no default value                            |                             |
| `--amo-carousel-arrow-color`             | no default value                            |                             |
| `--amo-carousel-progress-inactive-color` | no default value                            |                             |

#### Stories

| Variable                       | Default                                       | Description             |
| ------------------------------ | --------------------------------------------- | ----------------------- |
| `--amo-story-inner-ring-color` | `var(--amo-color-white)`                      | Inner ring colour       |
| `--amo-story-outer-ring-color` | `var(--amo-color-accent)`                     | Outer ring colour       |
| `--amo-story-border-radius`    | `50%`                                         | Shape of story items    |
| `--amo-story-background-color` | `var(--amo-color-accent)`                     | Background colour       |
| `--amo-story-size-mobile`      | `60px`                                        | Size on mobile          |
| `--amo-story-size-desktop`     | `90px`                                        | Size on desktop         |
| `--amo-story-spacing`          | `16px`                                        | Spacing between stories |
| `--amo-story-title-font`       | `var(--amo-system-font, 'Inter, sans-serif')` | Font for story titles   |
| `--amo-story-title-color`      | `var(--amo-color-black)`                      | Colour of story titles  |
| `--amo-story-title-size`       | `0.75em`                                      | Size of story titles    |

#### Gallery

| Variable                                                     | Default                                       | Description |
| ------------------------------------------------------------ | --------------------------------------------- | ----------- |
| `--amo-pagination-bar-background`                            | `var(--amo-color-system-background)`          |             |
| `--amo-pagination-bar-border-radius`                         | `var(--amo-secondary-roundness)`              |             |
| `--amo-pagination-bar-font`                                  | `var(--amo-system-font, 'Inter, sans-serif')` |             |
| `--amo-pagination-bar-button-border-radius`                  | `var(--amo-secondary-roundness)`              |             |
| `--amo-pagination-bar-button-background`                     | `var(--amo-color-system-background)`          |             |
| `--amo-pagination-bar-button-text-hover-color`               | `unset`                                       |             |
| `--amo-pagination-bar-button-text-color`                     | `var(--amo-color-details-text-secondary)`     |             |
| `--amo-pagination-bar-selected-page-button-background-color` | `var(--amo-color-accent)`                     |             |
| `--amo-pagination-bar-selected-page-button-text-color`       | `var(--amo-color-tile-text-primary)`          |             |
| `--amo-pagination-scroll-top-offset`                         | `200px`                                       |             |

### Tiles

#### General

| Variable                      | Default                        | Description                  |
| ----------------------------- | ------------------------------ | ---------------------------- |
| `--amo-tile-border-radius`    | `var(--amo-primary-roundness)` | Tile shape                   |
| `--amo-tile-background-color` | `var(--amo-color-accent)`      | Background colour            |
| `--amo-mobile-author-color`   | `var(--amo-color-white)`       | Author text colour on mobile |

#### Frame

| Variable                                    | Default                          | Description                         |
| ------------------------------------------- | -------------------------------- | ----------------------------------- |
| `--amo-frame-background-color`              | `var(--amo-color-black)`         | Frame background                    |
| `--amo-frame-font`                          | `Inter, sans-serif`              | Default font                        |
| `--amo-frame-arrow-background-color`        | `rgba(255, 255, 255, 0.1)`       | Arrow background (default)          |
| `--amo-frame-arrow-active-background-color` | `rgba(255, 255, 255, 0.2)`       | Arrow background (active)           |
| `--amo-frame-arrow-border-color`            | `rgba(255, 255, 255, 0.1)`       | Border colour                       |
| `--amo-frame-arrow-border-radius`           | `50%`                            | Shape of arrows                     |
| `--amo-frame-avatar-border-radius`          | `50%`                            | Avatar shape                        |
| `--amo-frame-button-border-radius`          | `var(--amo-secondary-roundness)` | Button shape                        |
| `--amo-frame-button-font`                   | `Inter, sans-serif`              | Button font                         |
| `--amo-frame-button-color`                  | `var(--amo-color-button-text)`   | Button text                         |
| `--amo-frame-button-background-color`       | `var(--amo-color-button)`        | Button background                   |
| `--amo-frame-icon-color`                    | `var(--amo-color-white)`         | Icon colour                         |
| `--amo-frame-mobile-padding`                | `100px`                          | Bottom padding for the mobile frame |

#### Frame details

| Variable                                            | Default                                     | Description             |
| --------------------------------------------------- | ------------------------------------------- | ----------------------- |
| `--amo-frame-details-background-color`              | `var(--amo-color-system-background)`        | Base details background |
| `--amo-frame-details-background-color-media`        | `var(--amo-frame-details-background-color)` | Media tile              |
| `--amo-frame-details-background-color-text`         | `var(--amo-frame-details-background-color)` | Text tile               |
| `--amo-frame-details-background-color-submission`   | `var(--amo-frame-details-background-color)` | Submission tile         |
| `--amo-frame-details-background-color-tiktok`       | `var(--amo-frame-details-background-color)` | TikTok tile             |
| `--amo-frame-details-background-color-article`      | `var(--amo-frame-details-background-color)` | Article tile            |
| `--amo-frame-details-background-color-quiz`         | `var(--amo-frame-details-background-color)` | Quiz tile               |
| `--amo-frame-details-background-color-poll`         | `var(--amo-frame-details-background-color)` | Poll tile               |
| `--amo-frame-details-background-color-spotify`      | `var(--amo-frame-details-background-color)` | Spotify tile            |
| `--amo-frame-details-background-color-youtube`      | `var(--amo-frame-details-background-color)` | YouTube tile            |
| `--amo-frame-details-background-color-clickthrough` | `var(--amo-frame-details-background-color)` | Clickthrough tile       |

#### Media tile

| Variable                      | Default                     | Description |
| ----------------------------- | --------------------------- | ----------- |
| `--amo-media-tile-text-font`  | `Inter, sans-serif`         | Font        |
| `--amo-media-tile-text-color` | `var(--amo-color-white-80)` | Text colour |

#### Text tile

| Variable                     | Default                              | Description |
| ---------------------------- | ------------------------------------ | ----------- |
| `--amo-text-tile-text-color` | `var(--amo-color-tile-text-primary)` | Text colour |
| `--amo-text-tile-text-font`  | `Inter, sans-serif`                  | Text font   |

#### Quiz tile

| Variable                                                 | Default                  | Description                       |
| -------------------------------------------------------- | ------------------------ | --------------------------------- |
| `--amo-quiz-tile-title-font`                             | `Inter, sans-serif`      | Title font                        |
| `--amo-quiz-tile-title-color`                            | `var(--amo-color-white)` | Title colour                      |
| `--amo-quiz-tile-title-with-background-title-color`      | `var(--amo-color-black)` | Title on coloured background      |
| `--amo-quiz-tile-title-with-background-background-color` | `var(--amo-color-white)` | Background colour for quiz titles |
| `--amo-quiz-tile-title-font-size-mobile`                 | `1em`                    | Title font size on mobile         |
| `--amo-quiz-tile-title-font-size-desktop`                | `1.5em`                  | Title font size on desktop        |
| `--amo-quiz-tile-title-font-weight`                      | `700`                    | Title font weight                 |
| `--amo-quiz-tile-title-padding-mobile`                   | `4px`                    | Title padding on mobile           |
| `--amo-quiz-tile-title-padding-desktop`                  | `8px`                    | Title padding on desktop          |
| `--amo-quiz-tile-button-font-size-mobile`                | `0.75em`                 | Button font size on mobile        |
| `--amo-quiz-tile-button-font-size-desktop`               | `1em`                    | Button font size on desktop       |
| `--amo-quiz-tile-button-padding-mobile`                  | `2px 12px`               | Button padding on mobile          |
| `--amo-quiz-tile-button-padding-desktop`                 | `8px 16px`               | Button padding on desktop         |

#### Quiz leaderboard

| Variable                                        | Default                              | Description            |
| ----------------------------------------------- | ------------------------------------ | ---------------------- |
| `--amo-leaderboard-progress-color`              | `var(--amo-color-accent)`            | Progress bar colour    |
| `--amo-leaderboard-progress-height`             | `16px`                               | Progress bar height    |
| `--amo-leaderboard-progress-radius`             | `16px`                               | Progress bar roundness |
| `--amo-leaderboard-tooltip-color`               | `var(--amo-color-accent)`            | Tooltip colour         |
| `--amo-leaderboard-tooltip-padding`             | `6px 12px`                           | Tooltip padding        |
| `--amo-leaderboard-tooltip-font-size`           | `16px`                               | Tooltip font size      |
| `--amo-leaderboard-progress-background-opacity` | `20%`                                | Background opacity     |
| `--amo-leaderboard-tooltip-text`                | `var(--amo-color-tile-text-primary)` | Tooltip text colour    |
| `--amo-leaderboard-tooltip-radius`              | `8px`                                | Tooltip roundness      |
| `--amo-leaderboard-tooltip-font`                | `var(--amo-system-font)`             | Tooltip font           |

#### Poll tile

| Variable                       | Default                     | Description        |
| ------------------------------ | --------------------------- | ------------------ |
| `--amo-poll-title-color`       | `var(--amo-color-white)`    | Title colour       |
| `--amo-poll-label-color`       | `var(--amo-color-white-80)` | Label colour       |
| `--amo-poll-description-color` | `var(--amo-color-white-80)` | Description colour |

#### Poll options

| Variable                                       | Default                     | Description                  |
| ---------------------------------------------- | --------------------------- | ---------------------------- |
| `--amo-poll-option-radius`                     | `12px`                      | Option shape                 |
| `--amo-poll-option-text-title`                 | `var(--amo-color-black)`    | Option title text            |
| `--amo-poll-option-text-description`           | `var(--amo-color-black)`    | Option description text      |
| `--amo-poll-option-text-primary`               | `var(--amo-color-blue-600)` | Primary option text          |
| `--amo-poll-option-bg-voted-for`               | `var(--amo-color-blue-100)` | Background when selected     |
| `--amo-poll-option-bg-not-voted-for`           | `var(--amo-color-zinc-200)` | Background when not selected |
| `--amo-poll-option-border`                     | `var(--amo-color-blue-600)` | Option border colour         |
| `--amo-poll-option-background`                 | `var(--amo-color-white)`    | Background colour            |
| `--amo-poll-option-confirm-button-bg`          | `var(--amo-color-blue-600)` | Confirm button background    |
| `--amo-poll-option-confirm-button-text`        | `var(--amo-color-white)`    | Confirm button text colour   |
| `--amo-poll-option-cancel-button-text`         | `var(--amo-color-black)`    | Cancel button text colour    |
| `--amo-poll-option-cancel-primary-button-bg`   | `#e4e4e7`                   | Cancel primary button bg     |
| `--amo-poll-option-cancel-secondary-button-bg` | `#a1a1aa`                   | Cancel secondary button bg   |