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.

/* 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}

: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