--- title: Styles API Reference description: Styles API Reference --- [Skip to content](https://knowledge.acquiredigital.com/styles-api-reference#main-content) English Show submenu for translations [More support](https://knowledge.acquiredigital.com/kb-tickets/new?hsLang=en) [Support Portal](https://knowledge.acquiredigital.com/support?hsLang=en) ![acquire-digital-logo](https://knowledge.acquiredigital.com/hs-fs/hubfs/Property%201=No%20Trademark.png?width=50&height=50&name=Property%201=No%20Trademark.png) Open main navigation Close main navigation - English Show submenu for translations - [More support](https://knowledge.acquiredigital.com/kb-tickets/new) - [Support Portal](https://knowledge.acquiredigital.com/support) - Contact us Contact us How can we help you? - There are no suggestions because the search field is empty. 1. [Acquire Digital Knowledgebase](https://knowledge.acquiredigital.com/?hsLang=en) 2. [Acquire Wayfinder](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en) 3. [JS Web Directory API V1.0](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#js-web-directory-api-v1-0) # Styles API Reference ## Typography **Font Family Primary** The main font for the component, applies to all content except for the destination cards in the main directory view. You may use any font available on your website. **Custom Property:** `--font-family-primary`**Default Value:** `'Lexend', sans-serif` **Font Family Secondary** The font used on the destination card components in the main directory view. **Custom Property:** `--font-family-secondary` **Default Value:** `'Lato', sans-serif` **Card Header Font Size** The font size for destination card headers. **Custom Property:** `--card-header-font-size` **Default Value:** `0.625rem` **Card Footer Font Size** The font size for destination card footers. **Custom Property:** `--card-footer-font-size` **Default Value:** `0.625rem` **Title Text Colour** The text colour for titles. **Custom Property:** `--title-text-colour` **Default Value:** `#000` **Body Text Colour** The text colour for body text.   **Custm Property:** `--body-text-colour` **Default Value:** `#5a5a5a` **Card Header Text Colour** he text colour for destination card headers. **Custom Property:** `--card-header-text-colour` **Card Footer Text Colour** The text colour for destination card footers. **Custom Property:** `--card-footer-text-colour` **Default Value:** `#828282` **Image Fallback Text Colour** The text colour for destination names, which are displayed in place of logos if a logo is not present for a destination. **Custom Property:** `--image-fallback-text-colour` **Default Value:** `#404040` **Form Component Text Colour** Text colour for form components in the search & filter bar. **Custom Property:** `--form-component-text-colour` **Default Value:** `#8a8a8a` #### **Theme Colours** **Primary Colour** Primary theme colour. Used for 'coming soon' card header background. **Custom Property:** `--primary-colour` **Default Value:** `#2d9cdb` **Secondary Colour** Secondary theme colour. Used for card header background. **Custom Property:** `--secondary-colour` **Default Value:** `#828282` **Success Colour** Success theme colour. Used for card header with status 'open'. **Custom Property:** `--success-colour` **Default Value:** `#27ae60` **Danger Colour** Danger theme colour. Used for card header with status 'closed' and status closed on destination view. **Custom Property:** `--danger-colour` **Default Value:** `#eb5757` #### **Borders** **Border Radius** Border radius for cards, buttons. **Custom Property:** `--border-radius` **Default Value:** `0.625rem` **Border Width** Border width. **Custom Property:** `--border-width` **Default Value:** `1px` #### **Dividers** **Category Divider Colour** Colour for dividers in the category sidebar. **Custom Property:** `--category-divider-colour` **Default Value:** `#e0e0e0`   **Destination Divider Colour** Colour for dividers in the destination view (when multiple instances of the destination shown). **Custom Property:** `--destination-divider-colour` **Default Value:** `#000` #### **Cards** **Card Border Colour** Border colour for destination cards. **Custom Property:** `--card-border-colour` **Default Value:** `#e5e5e5` **Card Footer Background Colour** Background colour for card footer backgrounds. **Custom Property:** `--card-footer-background-colour` **Default Value:** `#f2f2f2` #### **Form Components** **Form Component Border Colour** Colour for the borders of form components in the search & filter bar. **Custom Property:** `--form-component-border-colour` **Default Value:** `#c4c4c4` - [Software Installers](https://knowledge.acquiredigital.com/software-installers?hsLang=en) - [StudioDX & DX Player](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#main-content) - [Studio DX FAQ's](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#studio-dx-faqs) - [Acquire StudioDX User Documentation](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#acquire-studiodx-user-documentation) - [User Guide](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#user-guide) - [Widgets](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#widgets) - [Transitions](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#transitions) - [Warning Alerts](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#warning-alerts) - [Setup App](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#setup-app) - [Project Apps](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#project-apps) - [StudioDX Stream Deck Plugin](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#studiodx-stream-deck-plugin) - [XML Formats](https://knowledge.acquiredigital.com/studiodx-dx-player?hsLang=en#xml-formats) - [Acquire Wayfinder](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#main-content) - [Map Editor - Atlas](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#map-editor-atlas) - [Devices](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#devices) - [CMS User Management](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#cms-user-management) - [Project Settings](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#project-settings) - [The Map Editor](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#the-map-editor) - [JS Web Map UI V2.0](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#js-web-map-ui-v2-0) - [JS Web Map API V2.0](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#js-web-map-api-v2-0) - [JS Web Directory API V1.0](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#js-web-directory-api-v1-0) - [Wayfinder Map API](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#wayfinder-map-api) - [Broadsign Integration](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#broadsign-integration) - [Adverts Plugin](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#adverts-plugin) - [Wayfinder FAQs](https://knowledge.acquiredigital.com/acquire-wayfinder?hsLang=en#wayfinder-faqs) - [Beacon](https://knowledge.acquiredigital.com/beacon?hsLang=en#main-content) - [Devices](https://knowledge.acquiredigital.com/beacon?hsLang=en#devices) - [Layouts](https://knowledge.acquiredigital.com/beacon?hsLang=en#layouts) - [Information Displays](https://knowledge.acquiredigital.com/beacon?hsLang=en#information-displays) - [Playlists](https://knowledge.acquiredigital.com/beacon?hsLang=en#playlists) - [Project Settings](https://knowledge.acquiredigital.com/beacon?hsLang=en#project-settings) - [Activity Logs](https://knowledge.acquiredigital.com/beacon?hsLang=en#activity-logs) - [Acquire DOOHAD](https://knowledge.acquiredigital.com/acquire-doohad?hsLang=en#main-content) - [DOOHAd Standalone Installer & Advert Configuration Tool](https://knowledge.acquiredigital.com/acquire-doohad?hsLang=en#doohad-standalone-installer-advert-configuration-tool) - [DooHad FAQs](https://knowledge.acquiredigital.com/acquire-doohad?hsLang=en#doohad-faqs) - [Acquire Vision User Guide](https://knowledge.acquiredigital.com/acquire-vision-user-guide?hsLang=en) - [Acquire StudioDX & Wayfinder Trial Install Guides](https://knowledge.acquiredigital.com/acquire-studiodx-wayfinder-trial-install-guides?hsLang=en#main-content) - [Acquire Wayfinder Trial](https://knowledge.acquiredigital.com/acquire-studiodx-wayfinder-trial-install-guides?hsLang=en#acquire-wayfinder-trial) - [Acquire StudioDX Trial Installation Guide](https://knowledge.acquiredigital.com/acquire-studiodx-wayfinder-trial-install-guides?hsLang=en#acquire-studiodx-trial-installation-guide) - [Acquire Assist](https://knowledge.acquiredigital.com/acquire-assist?hsLang=en) - [Acquire Premier](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#main-content) - [Quick Start Guide.](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#quick-start-guide) - [Acquire Editor User Guide](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#acquire-editor-user-guide) - [Toolbox](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#toolbox) - [The PLUS! Network](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#the-plus-network) - [Acquire Site Manager](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#acquire-site-manager) - [Apps & Helpers Manuals](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#apps-helpers-manuals) - [Minute Master-Classes](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#minute-master-classes) - [Acquire Editor FAQs](https://knowledge.acquiredigital.com/acquire-premier?hsLang=en#acquire-editor-faqs) - [Acquire Player FAQs](https://knowledge.acquiredigital.com/acquire-player-faqs?hsLang=en) - [Site Manager](https://knowledge.acquiredigital.com/site-manager?hsLang=en#main-content) - [Site Manager User Guide](https://knowledge.acquiredigital.com/site-manager?hsLang=en#site-manager-user-guide) - [Site Manager FAQs](https://knowledge.acquiredigital.com/site-manager?hsLang=en#site-manager-faqs) - [Watchdog](https://knowledge.acquiredigital.com/watchdog?hsLang=en#main-content) - [Watchdog User Guide](https://knowledge.acquiredigital.com/watchdog?hsLang=en#watchdog-user-guide) - [Watchdog FAQs](https://knowledge.acquiredigital.com/watchdog?hsLang=en#watchdog-faqs) - [FAQs](https://knowledge.acquiredigital.com/faqs?hsLang=en) [![acquire-digital-logo](https://knowledge.acquiredigital.com/hs-fs/hubfs/Property%201=No%20Trademark.png?width=50&height=50&name=Property%201=No%20Trademark.png "acquire-digital-logo")](http://acquiredigital.com) [mailto:email@email.com](mailto:email@email.com) Copyright © 2026, Acquire Digital