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

# Widget colors and fonts reference

> Find every widget color and font control, including checkout, memberships, payment plans, and mobile styles.

Open **Design → Widget**, select your widget, then **All Settings → Design → Customize components**. Search for a setting name to go directly to its section. These controls style this widget; edit shared identity in [Brand](./brand-design).

Choose **Your Brand** for a live connection to the site's colors and font. Local component overrides continue to apply to this widget. A preset theme uses its own palette. Choosing a theme replaces existing design overrides. **Reset** removes component overrides and restores the currently selected theme; it does not switch themes. These changes save immediately, so review the result in the preview. See [Quick Settings](./quick-settings) for the appearance summary.

For colors, open the swatch, choose or enter a hex color, and confirm with the check button; cancel discards the draft. For fonts, open the font picker, choose the family and size, and set bold, italic, or underline. **Apply** saves the draft; **Cancel** leaves the saved font unchanged. **Use default font and style**, followed by Apply, restores the default. A selected brand font follows the site's uploaded font. Mobile typography is separate from desktop typography.

The same element can have both a color row and a font row. Payment plan colors apply separately to Payment Plan Container, Due Today Section, Future Payments, and Timeline. Change one at a time and inspect the preview. Colors and fonts are managed in the **Wix Editor → app Settings → Design** for Wix sites; this dashboard category is hidden there.

## Add to calendar button

<Accordion title="View current controls">
  <Frame caption="All Settings → Add to calendar button — Buttons and add-to-calendar styling. The circles identify Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-buttons-calendar.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=17452998322b874b21be03008861607c" alt="All Settings → Add to calendar button — Buttons and add-to-calendar styling. The circles identify Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-buttons-calendar.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Background** | Color | Set the color of this element; review contrast in the preview. |
| **Text** | Color | Set the color of this element; review contrast in the preview. |
| **Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Attendee details

<Accordion title="View current controls">
  <Frame caption="All Settings → Attendee details — Checkout and attendee form styling. The circles identify Theme and Pre-form text.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-attendee.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=2b0f2366a2d43cdd3988069a015255e8" alt="All Settings → Attendee details — Checkout and attendee form styling. The circles identify Theme and Pre-form text." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-attendee.png" />
  </Frame>

  <Frame caption="All Settings → Attendee details — Checkout and attendee form styling. Continued controls. The circles identify Form border color and Background color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-attendee-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=9615fb86d2563c61ce6ac2edd0cbffe6" alt="All Settings → Attendee details — Checkout and attendee form styling. Continued controls. The circles identify Form border color and Background color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-attendee-2.png" />
  </Frame>

  <Frame caption="All Settings → Attendee details — Checkout and attendee form styling. Continued controls. The circles identify Background color and Dropdown text color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-attendee-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=438dec039561aa9272a98faf4919f4e8" alt="All Settings → Attendee details — Checkout and attendee form styling. Continued controls. The circles identify Background color and Dropdown text color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-attendee-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Background color** | Color | Set the color of this element; review contrast in the preview. |
| **Check/Radio values** | Color | Set the color of this element; review contrast in the preview. |
| **Check/Radio values** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Dropdown background color** | Color | Set the color of this element; review contrast in the preview. |
| **Dropdown border color** | Color | Set the color of this element; review contrast in the preview. |
| **Dropdown text color** | Color | Set the color of this element; review contrast in the preview. |
| **Form border color** | Color | Set the color of this element; review contrast in the preview. |
| **Form labels** | Color | Set the color of this element; review contrast in the preview. |
| **Form labels** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Pre-form text** | Color | Set the color of this element; review contrast in the preview. |
| **Pre-form text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Background & colors

<Accordion title="View current controls">
  <Frame caption="All Settings → Background & colors — Change component styling and inspect preview. The circles identify Background and Event Listings.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-component-style.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=bfd5c478218fc435773aec4553186423" alt="All Settings → Background & colors — Change component styling and inspect preview. The circles identify Background and Event Listings." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-component-style.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Background** | Color | Set the color of this element; review contrast in the preview. |
| **Event Listings** | Color | Set the color of this element; review contrast in the preview. |
| **Loading Indicator** | Color | Set the color of this element; review contrast in the preview. |

## Buttons

<Accordion title="View current controls">
  <Frame caption="All Settings → Buttons — Buttons and add-to-calendar styling. The circles identify Text on hover and Background / Border.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-buttons.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=d9b566f4f33cadd04f305ca1a7de0ffb" alt="All Settings → Buttons — Buttons and add-to-calendar styling. The circles identify Text on hover and Background / Border." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-buttons.png" />
  </Frame>

  <Frame caption="All Settings → Buttons — Buttons and add-to-calendar styling. Continued controls. The circles identify Background / Border and Background on hover.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-buttons-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=922d4c5051b2a652ad5eff0719fefbb3" alt="All Settings → Buttons — Buttons and add-to-calendar styling. Continued controls. The circles identify Background / Border and Background on hover." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-buttons-2.png" />
  </Frame>

  <Frame caption="All Settings → Buttons — Buttons and add-to-calendar styling. Continued controls. The circles identify Load more text on hover and Load more background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-buttons-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=ede4d87db5a8b0fe1eb3e478db1c37bd" alt="All Settings → Buttons — Buttons and add-to-calendar styling. Continued controls. The circles identify Load more text on hover and Load more background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-buttons-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Background / Border** | Color | Set the color of this element; review contrast in the preview. |
| **Background on hover** | Color | Set the color of this element; review contrast in the preview. |
| **Load more background** | Color | Set the color of this element; review contrast in the preview. |
| **Load more background hover** | Color | Set the color of this element; review contrast in the preview. |
| **Load more text** | Color | Set the color of this element; review contrast in the preview. |
| **Load more text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Load more text on hover** | Color | Set the color of this element; review contrast in the preview. |
| **Show more text** | Color | Set the color of this element; review contrast in the preview. |
| **Show more text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Show more/less text background** | Color | Set the color of this element; review contrast in the preview. |
| **Text** | Color | Set the color of this element; review contrast in the preview. |
| **Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Text on hover** | Color | Set the color of this element; review contrast in the preview. |

## Calendar

<Accordion title="View current controls">
  <Frame caption="All Settings → Calendar — Calendar and multi-day styling. The circles identify Event.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=88957f726ca80f2e3c0ab6e3ce1efdd0" alt="All Settings → Calendar — Calendar and multi-day styling. The circles identify Event." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar.png" />
  </Frame>

  <Frame caption="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Navigation Foreground Color and Navigation Background Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=63df4a80123e1b2bb4d0478a349059a6" alt="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Navigation Foreground Color and Navigation Background Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-2.png" />
  </Frame>

  <Frame caption="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Selection Color and Today's Date Background Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=c82d321945db3be943cf750ba5570fc5" alt="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Selection Color and Today's Date Background Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-3.png" />
  </Frame>

  <Frame caption="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Selected Date Background Color and Selected Date Text Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-4.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=45b6fa9e50a2bdc7abc53ecd0940af79" alt="All Settings → Calendar — Calendar and multi-day styling. Continued controls. The circles identify Selected Date Background Color and Selected Date Text Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-4.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Date Header** | Color | Set the color of this element; review contrast in the preview. |
| **Date Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Day Names Header** | Color | Set the color of this element; review contrast in the preview. |
| **Event** | Color | Set the color of this element; review contrast in the preview. |
| **Event Indicator Color** | Color | Set the color of this element; review contrast in the preview. |
| **Navigation Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Navigation Foreground Color** | Color | Set the color of this element; review contrast in the preview. |
| **Now Date Color** | Color | Set the color of this element; review contrast in the preview. |
| **Selected Date Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Selected Date Text Color** | Color | Set the color of this element; review contrast in the preview. |
| **Selection Color** | Color | Set the color of this element; review contrast in the preview. |
| **Title** | Color | Set the color of this element; review contrast in the preview. |
| **Title** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Today's Date Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Today's Date Text Color** | Color | Set the color of this element; review contrast in the preview. |

## Checkout

<Accordion title="View current controls">
  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. The circles identify Theme and Checkout Section Title.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=e2ddd27932852dbf4306a402b94d21cc" alt="All Settings → Checkout — Checkout and attendee form styling. The circles identify Theme and Checkout Section Title." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout.png" />
  </Frame>

  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Quantity Selector and Ticket Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=7875e6073016b0126cc411e9ed6513a6" alt="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Quantity Selector and Ticket Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-2.png" />
  </Frame>

  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Cart Item Background Color and Cart Item Text Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=a1fc0c67a3e68adbc2a14e9132c2af1c" alt="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Cart Item Background Color and Cart Item Text Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-3.png" />
  </Frame>

  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Checkout Border Color and Checkout Form Dropdown Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-4.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=c263753ea60ecc00d1d3bc0868645227" alt="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Checkout Border Color and Checkout Form Dropdown Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-4.png" />
  </Frame>

  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Checkout Next Button Background and Checkout Back Button Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-5.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=97fa96814a2e942818bdeabcf7334b68" alt="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Checkout Next Button Background and Checkout Back Button Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-5.png" />
  </Frame>

  <Frame caption="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Promo Code Button Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-checkout-6.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=e15fad5702ec5ae263ddc3a80fa75e9c" alt="All Settings → Checkout — Checkout and attendee form styling. Continued controls. The circles identify Promo Code Button Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-checkout-6.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Cart Item Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Cart Item Text Color** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Back Button** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Back Button** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Checkout Back Button Background** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Next Button** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Next Button** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Checkout Next Button Background** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Section Title** | Color | Set the color of this element; review contrast in the preview. |
| **Checkout Section Title** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Confirmation Text** | Color | Set the color of this element; review contrast in the preview. |
| **Confirmation Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Pricing** | Color | Set the color of this element; review contrast in the preview. |
| **Pricing** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Promo Code Button Background** | Color | Set the color of this element; review contrast in the preview. |
| **Promo Code Button Text** | Color | Set the color of this element; review contrast in the preview. |
| **Promo Code Button Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Promo Code Text** | Color | Set the color of this element; review contrast in the preview. |
| **Promo Code Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Quantity Selector** | Color | Set the color of this element; review contrast in the preview. |
| **Step Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Step Section Color** | Color | Set the color of this element; review contrast in the preview. |
| **Step Text Color** | Color | Set the color of this element; review contrast in the preview. |
| **Step Text Color** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Ticket Availability** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Availability** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Ticket Background** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Badge Color** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Description** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Description** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Ticket Name** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Name** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Ticket Summary Header** | Color | Set the color of this element; review contrast in the preview. |
| **Ticket Summary Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Desktop typography

<Accordion title="View current controls">
  <Frame caption="All Settings → Desktop typography — Desktop and mobile typography controls. The circles identify Theme and Main Header.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=7e43a2bd14b7a719d5395941d0dfa8a5" alt="All Settings → Desktop typography — Desktop and mobile typography controls. The circles identify Theme and Main Header." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography.png" />
  </Frame>

  <Frame caption="All Settings → Desktop typography — Desktop and mobile typography controls. Continued controls. The circles identify Event Details Link.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography-2.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=cf773bb27ec0ed1ffc21867bde6c2680" alt="All Settings → Desktop typography — Desktop and mobile typography controls. Continued controls. The circles identify Event Details Link." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography-2.png" />
  </Frame>

  <Frame caption="All Settings → Desktop typography — Desktop and mobile typography controls. Continued controls. The circles identify On Sale Event Status and Postponed Event Status.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography-3.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=9b53195bed4f7ed6d6b0371ff08318fa" alt="All Settings → Desktop typography — Desktop and mobile typography controls. Continued controls. The circles identify On Sale Event Status and Postponed Event Status." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Dates** | Color | Set the color of this element; review contrast in the preview. |
| **Dates** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Event Details** | Color | Set the color of this element; review contrast in the preview. |
| **Event Details** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Event Details Link** | Color | Set the color of this element; review contrast in the preview. |
| **Event Header** | Color | Set the color of this element; review contrast in the preview. |
| **Event Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Main Header** | Color | Set the color of this element; review contrast in the preview. |
| **Main Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Next Event** | Color | Set the color of this element; review contrast in the preview. |
| **Next Event** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **On Sale Event Status** | Color | Set the color of this element; review contrast in the preview. |
| **On Sale Event Status** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Postponed Event Status** | Color | Set the color of this element; review contrast in the preview. |
| **Postponed Event Status** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Venue** | Color | Set the color of this element; review contrast in the preview. |
| **Venue** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Zoom Event Text** | Color | Set the color of this element; review contrast in the preview. |
| **Zoom Event Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Memberships

<Accordion title="View current controls">
  <Frame caption="All Settings → Memberships — Membership card styling. The circles identify Membership Price Color and Featured Badge Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-membership.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=3d2f7d0b047eb606c787dbcd06c6bff0" alt="All Settings → Memberships — Membership card styling. The circles identify Membership Price Color and Featured Badge Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-membership.png" />
  </Frame>

  <Frame caption="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Featured Badge Text and Benefit Checkmark Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-membership-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=fedfd51c449efbaef65039a15d7d4be6" alt="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Featured Badge Text and Benefit Checkmark Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-membership-2.png" />
  </Frame>

  <Frame caption="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Add Button Text and Add Button Hover Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-membership-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=e1efdff8c5ff222371a73712937b4316" alt="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Add Button Text and Add Button Hover Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-membership-3.png" />
  </Frame>

  <Frame caption="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Added Badge Border and Added Badge Text.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-membership-4.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=a91d1f8f1a63c36623760e8db4f2a914" alt="All Settings → Memberships — Membership card styling. Continued controls. The circles identify Added Badge Border and Added Badge Text." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-membership-4.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Add Button Background** | Color | Set the color of this element; review contrast in the preview. |
| **Add Button Hover Background** | Color | Set the color of this element; review contrast in the preview. |
| **Add Button Hover Text** | Color | Set the color of this element; review contrast in the preview. |
| **Add Button Text** | Color | Set the color of this element; review contrast in the preview. |
| **Added Badge Background** | Color | Set the color of this element; review contrast in the preview. |
| **Added Badge Border** | Color | Set the color of this element; review contrast in the preview. |
| **Added Badge Text** | Color | Set the color of this element; review contrast in the preview. |
| **Benefit Checkmark Background** | Color | Set the color of this element; review contrast in the preview. |
| **Benefit Checkmark Color** | Color | Set the color of this element; review contrast in the preview. |
| **Featured Badge Background** | Color | Set the color of this element; review contrast in the preview. |
| **Featured Badge Text** | Color | Set the color of this element; review contrast in the preview. |
| **Membership Card Selected Background** | Color | Set the color of this element; review contrast in the preview. |
| **Membership Card Selected Border** | Color | Set the color of this element; review contrast in the preview. |
| **Membership Price Color** | Color | Set the color of this element; review contrast in the preview. |

## Mobile typography

<Accordion title="View current controls">
  <Frame caption="All Settings → Mobile typography — Desktop and mobile typography controls. The circles identify Theme and Main Header.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography-mobile.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=1249e51d91b6df3eb0c0d736c87a6200" alt="All Settings → Mobile typography — Desktop and mobile typography controls. The circles identify Theme and Main Header." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography-mobile.png" />
  </Frame>

  <Frame caption="All Settings → Mobile typography — Desktop and mobile typography controls. Continued controls. The circles identify Event Details and Dates.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography-mobile-2.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=6ae3af72caaed2dcbe8db8d376163ec2" alt="All Settings → Mobile typography — Desktop and mobile typography controls. Continued controls. The circles identify Event Details and Dates." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography-mobile-2.png" />
  </Frame>

  <Frame caption="All Settings → Mobile typography — Desktop and mobile typography controls. Continued controls. The circles identify Venue and On Sale Event Status.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-typography-mobile-3.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=d4995ff04f8e81fb031d5c461b7b2b93" alt="All Settings → Mobile typography — Desktop and mobile typography controls. Continued controls. The circles identify Venue and On Sale Event Status." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-typography-mobile-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Dates** | Color | Set the color of this element; review contrast in the preview. |
| **Dates** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Event Details** | Color | Set the color of this element; review contrast in the preview. |
| **Event Details** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Event Header** | Color | Set the color of this element; review contrast in the preview. |
| **Event Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Main Header** | Color | Set the color of this element; review contrast in the preview. |
| **Main Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Next Event** | Color | Set the color of this element; review contrast in the preview. |
| **Next Event** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **On Sale Event Status** | Color | Set the color of this element; review contrast in the preview. |
| **On Sale Event Status** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Postponed Event Status** | Color | Set the color of this element; review contrast in the preview. |
| **Postponed Event Status** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Venue** | Color | Set the color of this element; review contrast in the preview. |
| **Venue** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Multi-day selection

<Accordion title="View current controls">
  <Frame caption="All Settings → Multi-day selection — Calendar and multi-day styling. The circles identify Date Picker Calendar Icon and Date Picker Border Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-multi-day.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=e39039f35a097db6a38c2f2257832e97" alt="All Settings → Multi-day selection — Calendar and multi-day styling. The circles identify Date Picker Calendar Icon and Date Picker Border Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-multi-day.png" />
  </Frame>

  <Frame caption="All Settings → Multi-day selection — Calendar and multi-day styling. Continued controls. The circles identify Date Picker Header Background Color and Date Picker Selected Date Highlight Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-multi-day-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=a307d6c89fe5c27823047c37c44801c9" alt="All Settings → Multi-day selection — Calendar and multi-day styling. Continued controls. The circles identify Date Picker Header Background Color and Date Picker Selected Date Highlight Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-multi-day-2.png" />
  </Frame>

  <Frame caption="All Settings → Multi-day selection — Calendar and multi-day styling. Continued controls. The circles identify Date Picker Selected Date Highlight Color and Date Picker Selected Date Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-calendar-multi-day-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=ef73ed3322596d3a52a7de1aa36d5420" alt="All Settings → Multi-day selection — Calendar and multi-day styling. Continued controls. The circles identify Date Picker Selected Date Highlight Color and Date Picker Selected Date Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-calendar-multi-day-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Date Picker Available Date Color** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Available Date Highlight Color** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Border Color** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Calendar Icon** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Current Month Header** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Current Month Header** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Date Picker Day Name** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Day Name** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Date Picker Header Background Color** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Selected Date Color** | Color | Set the color of this element; review contrast in the preview. |
| **Date Picker Selected Date Highlight Color** | Color | Set the color of this element; review contrast in the preview. |

## Payment plan

<Accordion title="View current controls">
  <Frame caption="All Settings → Payment plan — Payment-plan component styling. The circles identify Background Color and Border Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-installments.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=7ca6ee3852b6041c6f6a148011f913fe" alt="All Settings → Payment plan — Payment-plan component styling. The circles identify Background Color and Border Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-installments.png" />
  </Frame>

  <Frame caption="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Title Text Color and Secondary Text Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-installments-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=d689483e32708c560d83fa7f7e265260" alt="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Title Text Color and Secondary Text Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-installments-2.png" />
  </Frame>

  <Frame caption="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Background Color and Border Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-installments-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=fc465e26455c893f65315fba534bc800" alt="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Background Color and Border Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-installments-3.png" />
  </Frame>

  <Frame caption="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Border Color and Amount Text Color.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-installments-4.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=b66cc746e66ed3bca6a24fd61a101797" alt="All Settings → Payment plan — Payment-plan component styling. Continued controls. The circles identify Border Color and Amount Text Color." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-installments-4.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Amount Text Color** | Color | Future Payments: set the amount text color and check contrast. |
| **Amount Text Color** | Color | Due Today Section: set the amount text color and check contrast. |
| **Background Color** | Color | Future Payments: set the background color and check contrast. |
| **Background Color** | Color | Payment Plan Container: set the background color and check contrast. |
| **Background Color** | Color | Due Today Section: set the background color and check contrast. |
| **Border Color** | Color | Future Payments: set the border color and check contrast. |
| **Border Color** | Color | Payment Plan Container: set the border color and check contrast. |
| **Border Color** | Color | Due Today Section: set the border color and check contrast. |
| **Secondary Text Color** | Color | Payment Plan Container: set the secondary text color and check contrast. |
| **Timeline Dot Color** | Color | Timeline: set the timeline dot color and check contrast. |
| **Timeline Line Color** | Color | Timeline: set the timeline line color and check contrast. |
| **Title Text Color** | Color | Payment Plan Container: set the title text color and check contrast. |

## Visitor search & filters

<Accordion title="View current controls">
  <Frame caption="All Settings → Visitor search & filters — Visitor filter styling. The circles identify Filter background.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-style-search.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=e05e1e9649dd3b37a40df13af0f38d5e" alt="All Settings → Visitor search & filters — Visitor filter styling. The circles identify Filter background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-search.png" />
  </Frame>

  <Frame caption="All Settings → Visitor search & filters — Visitor filter styling. Continued controls. The circles identify Filter background and Search/Filter button background.">
    <img src="https://mintcdn.com/ticketspot/MArS01cvcWeItYxr/assets/refresh/branding-and-design/widget-style-search-2.png?fit=max&auto=format&n=MArS01cvcWeItYxr&q=85&s=b789186e278dcc540504586db236be1f" alt="All Settings → Visitor search & filters — Visitor filter styling. Continued controls. The circles identify Filter background and Search/Filter button background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-search-2.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Filter background** | Color | Set the color of this element; review contrast in the preview. |
| **Filter Text** | Color | Set the color of this element; review contrast in the preview. |
| **Filter Text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |
| **Icon** | Color | Set the color of this element; review contrast in the preview. |
| **Search/Filter button background** | Color | Set the color of this element; review contrast in the preview. |
| **Search/Filter button text** | Color | Set the color of this element; review contrast in the preview. |
| **Search/Filter button text** | Font and style | Set the font family, size, bold, italic, and underline styling for this text. |

## Workshops & add-ons

<Accordion title="View current controls">
  <Frame caption="All Settings → Workshops & add-ons — Workshop and add-on styling. The circles identify Addon Card Price and Time Slot Selected Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-addons.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=89124eb66720d4abf5f7d3d11ae504f0" alt="All Settings → Workshops & add-ons — Workshop and add-on styling. The circles identify Addon Card Price and Time Slot Selected Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-addons.png" />
  </Frame>

  <Frame caption="All Settings → Workshops & add-ons — Workshop and add-on styling. Continued controls. The circles identify Time Slot Selected Border and Time Slot Selected Hover Background.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-addons-2.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=00c6165c634a578a838357ee3a1e3004" alt="All Settings → Workshops & add-ons — Workshop and add-on styling. Continued controls. The circles identify Time Slot Selected Border and Time Slot Selected Hover Background." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-addons-2.png" />
  </Frame>

  <Frame caption="All Settings → Workshops & add-ons — Workshop and add-on styling. Continued controls. The circles identify Workshop Select Button Border and Workshop Select Button Text.">
    <img src="https://mintcdn.com/ticketspot/hFz01uahBcVrYNFh/assets/refresh/branding-and-design/widget-style-addons-3.png?fit=max&auto=format&n=hFz01uahBcVrYNFh&q=85&s=a6c9a61ec643328be42f056efb9c0d2b" alt="All Settings → Workshops & add-ons — Workshop and add-on styling. Continued controls. The circles identify Workshop Select Button Border and Workshop Select Button Text." style={{ width: "100%", maxWidth: "515px", height: "auto" }} width="513" height="885" data-path="assets/refresh/branding-and-design/widget-style-addons-3.png" />
  </Frame>
</Accordion>

| Option | Control | What it changes |
| - | - | - |
| **Addon Card Price** | Color | Set the color of this element; review contrast in the preview. |
| **Time Slot Selected Background** | Color | Set the color of this element; review contrast in the preview. |
| **Time Slot Selected Border** | Color | Set the color of this element; review contrast in the preview. |
| **Time Slot Selected Hover Background** | Color | Set the color of this element; review contrast in the preview. |
| **Time Slot Selected Hover Border** | Color | Set the color of this element; review contrast in the preview. |
| **Workshop Select Button Border** | Color | Set the color of this element; review contrast in the preview. |
| **Workshop Select Button Selected Background** | Color | Set the color of this element; review contrast in the preview. |
| **Workshop Select Button Selected Text** | Color | Set the color of this element; review contrast in the preview. |
| **Workshop Select Button Text** | Color | Set the color of this element; review contrast in the preview. |

## Save and verify

Wait for the setting update to finish, check the preview, and open the installed widget to confirm the result. If a control is unavailable, review its prerequisite, site type, and plan. [Return to widget setup](./widget-customization-overview).


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