Brand Concierge Style Guide (Android)

This document provides a comprehensive reference for all styling properties supported by the Brand Concierge Android SDK. Themes are configured using JSON files that follow a web-compatible CSS variable format.

Overview

The theme configuration is loaded from a JSON file using ConciergeThemeLoader.load(context, filename). The framework supports CSS-like variable names (prefixed with --) that are automatically mapped to native Kotlin properties.

Loading a theme

Copy
// Load from app assets
val theme = ConciergeThemeLoader.load(context, "theme-default")

// Use default theme
val defaultTheme = ConciergeThemeLoader.default()
Copied to your clipboard
// Load from app assets
val theme = ConciergeThemeLoader.load(context, "theme-default")

// Use default theme
val defaultTheme = ConciergeThemeLoader.default()

Applying a theme

Apply the theme using the ConciergeTheme composable:

Copy
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeLoader

@Composable
fun MyApp() {
    val context = LocalContext.current
    
    // Load theme from assets
    val theme = remember {
        ConciergeThemeLoader.load(context, "my-theme") 
            ?: ConciergeThemeLoader.default()
    }
    
    ConciergeTheme(theme = theme) {
        // Your app content here
        // Concierge UI components will use the theme
    }
}
Copied to your clipboard
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.platform.LocalContext
import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeTheme
import com.adobe.marketing.mobile.concierge.ui.theme.ConciergeThemeLoader

@Composable
fun MyApp() {
    val context = LocalContext.current
    
    // Load theme from assets
    val theme = remember {
        ConciergeThemeLoader.load(context, "my-theme") 
            ?: ConciergeThemeLoader.default()
    }
    
    ConciergeTheme(theme = theme) {
        // Your app content here
        // Concierge UI components will use the theme
    }
}

You can also load themes by filename directly:

Copy
@Composable
fun MyApp() {
    ConciergeTheme(themeFileName = "my-theme.json") {
        // Your app content here
    }
}
Copied to your clipboard
@Composable
fun MyApp() {
    ConciergeTheme(themeFileName = "my-theme.json") {
        // Your app content here
    }
}

Applying a theme in XML/Views

For XML-based apps using ConciergeChatView, pass the theme when binding:

Copy
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // Load theme
        val theme = ConciergeThemeLoader.load(this, "my-theme")
        val surfaces = listOf("web://example.com/your-surface.html")
        
        val chatView = findViewById<ConciergeChatView>(R.id.concierge_chat)
        chatView.bind(
            lifecycleOwner = this,
            viewModelStoreOwner = this,
            surfaces = surfaces,
            theme = theme,
            onClose = { finish() }
        )
    }
}
Copied to your clipboard
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // Load theme
        val theme = ConciergeThemeLoader.load(this, "my-theme")
        val surfaces = listOf("web://example.com/your-surface.html")
        
        val chatView = findViewById<ConciergeChatView>(R.id.concierge_chat)
        chatView.bind(
            lifecycleOwner = this,
            viewModelStoreOwner = this,
            surfaces = surfaces,
            theme = theme,
            onClose = { finish() }
        )
    }
}

Important: The ConciergeTheme composable provides theme tokens to all child composables through CompositionLocal.

Default theming

• When no theme is loaded (theme = null): The SDK uses built-in light or dark colors (LightConciergeColors / DarkConciergeColors) based on the device’s light/dark setting.
• When a theme is loaded (theme = <ConciergeThemeData>): The theme JSON always takes precedence.

JSON structure

The theme JSON file contains these top-level keys:

Value formats

Understanding the value formats used throughout this document.

Colors

Colors are specified as hex strings:

Copy
"--color-primary": "#EB1000"
"--message-user-background": "#EBEEFF"
"--input-box-shadow": "0 2px 8px 0 #00000014"
Copied to your clipboard
"--color-primary": "#EB1000"
"--message-user-background": "#EBEEFF"
"--input-box-shadow": "0 2px 8px 0 #00000014"

Supported formats:

• #RRGGBB - 6 digit hex
• #RRGGBBAA - 8 digit hex with alpha

Dimensions

Dimensions use CSS pixel units:

Copy
"--input-height-mobile": "52px"
"--input-border-radius-mobile": "12px"
"--message-max-width": "100%"
Copied to your clipboard
"--input-height-mobile": "52px"
"--input-border-radius-mobile": "12px"
"--message-max-width": "100%"

Padding

Padding follows CSS shorthand syntax:

Copy
"--message-padding": "8px 16px"
Copied to your clipboard
"--message-padding": "8px 16px"

Formats:

• 8px - All sides
• 8px 16px - Vertical, horizontal
• 8px 16px 4px - Top, horizontal, bottom
• 8px 16px 4px 2px - Top, right, bottom, left

Shadows

Shadows use CSS box-shadow syntax:

Copy
"--input-box-shadow": "0 2px 8px 0 #00000014"
"--multimodal-card-box-shadow": "none"
Copied to your clipboard
"--input-box-shadow": "0 2px 8px 0 #00000014"
"--multimodal-card-box-shadow": "none"

Format: offsetX offsetY blurRadius spreadRadius color

Font Weights

Font weights use CSS numeric or named values:

Text Alignment

Metadata

Theme identification information.

Example

Copy
{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  }
}
Copied to your clipboard
{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  }
}

Behavior

Feature toggles and interaction configuration.

Multimodal Carousel

Input

Chat

Product Card

Welcome Card

Prompt Suggestions

Feedback

Citations

Privacy Notice

Example

Copy
{
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "scroll"
    },
    "productCard": {
      "cardStyle": "productDetail",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": null
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "privacyNotice": {
      "title": "Privacy Notice",
      "text": "Privacy notice text."
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "below",
      "showCloseButton": true,
      "showCancelButton": false
    },
    "citations": {
      "showLinkIcon": true
    },
    "welcomeCard": {
      "closeButtonAlignment": "start",
      "promptFullWidth": false,
      "promptMaxLines": 1,
      "contentAlignment": "top"
    },
    "promptSuggestions": {
      "itemMaxLines": 1,
      "showHeader": true
    }
  }
}
Copied to your clipboard
{
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "scroll"
    },
    "productCard": {
      "cardStyle": "productDetail",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": null
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "privacyNotice": {
      "title": "Privacy Notice",
      "text": "Privacy notice text."
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "below",
      "showCloseButton": true,
      "showCancelButton": false
    },
    "citations": {
      "showLinkIcon": true
    },
    "welcomeCard": {
      "closeButtonAlignment": "start",
      "promptFullWidth": false,
      "promptMaxLines": 1,
      "contentAlignment": "top"
    },
    "promptSuggestions": {
      "itemMaxLines": 1,
      "showHeader": true
    }
  }
}

Disclaimer

Legal disclaimer text with embedded links.

Example

Copy
{
  "disclaimer": {
    "text": "AI responses may be inaccurate. Check answers and sources. {Terms}",
    "links": [
      {
        "text": "Terms",
        "url": "https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
      }
    ]
  }
}
Copied to your clipboard
{
  "disclaimer": {
    "text": "AI responses may be inaccurate. Check answers and sources. {Terms}",
    "links": [
      {
        "text": "Terms",
        "url": "https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
      }
    ]
  }
}

To hide the disclaimer, omit the disclaimer key from the theme or set disclaimer.text to an empty string.

Text (Copy)

Localized UI strings using dot-notation keys.

✅ Content Recommendations

While there are no strict requirements for character limits in many of these text fields, it is strongly recommended that the values be tested on target device(s) prior to deployment, ensuring the UI renders as desired.

Header

Tip: To hide the header subtitle, set text["header.subtitle"] to "". The subtitle is automatically hidden when its text is blank.

Welcome Screen

Input

Cards & Carousel

System Messages

Feedback Dialog

Sources & Feedback Footer

Prompt Suggestions

Example

Copy
{
  "text": {
    "welcome.heading": "Welcome to Brand Concierge!",
    "welcome.subheading": "I'm your personal guide to help you explore.",
    "input.placeholder": "How can I help?",
    "error.network": "I'm sorry, I'm having trouble connecting.",
    "loading.message": "Generating response from our knowledge base...",
    "feedbackHelpfulLabel": "Was this helpful?",
    "sourcesLabel": "Sources & Feedback",
    "suggestions.header": "Suggestions",
    "feedback.dialog.title.positive": "Your feedback is appreciated",
    "feedback.dialog.title.negative": "Your feedback is appreciated",
    "feedback.dialog.question.positive": "What went well? Select all that apply.",
    "feedback.dialog.question.negative": "What went wrong? Select all that apply.",
    "feedback.dialog.notes": "Notes",
    "feedback.dialog.submit": "Submit",
    "feedback.dialog.cancel": "Cancel",
    "feedback.dialog.notes.placeholder": "Additional notes (optional)",
    "feedback.toast.success": "Thank you for the feedback."
  }
}
Copied to your clipboard
{
  "text": {
    "welcome.heading": "Welcome to Brand Concierge!",
    "welcome.subheading": "I'm your personal guide to help you explore.",
    "input.placeholder": "How can I help?",
    "error.network": "I'm sorry, I'm having trouble connecting.",
    "loading.message": "Generating response from our knowledge base...",
    "feedbackHelpfulLabel": "Was this helpful?",
    "sourcesLabel": "Sources & Feedback",
    "suggestions.header": "Suggestions",
    "feedback.dialog.title.positive": "Your feedback is appreciated",
    "feedback.dialog.title.negative": "Your feedback is appreciated",
    "feedback.dialog.question.positive": "What went well? Select all that apply.",
    "feedback.dialog.question.negative": "What went wrong? Select all that apply.",
    "feedback.dialog.notes": "Notes",
    "feedback.dialog.submit": "Submit",
    "feedback.dialog.cancel": "Cancel",
    "feedback.dialog.notes.placeholder": "Additional notes (optional)",
    "feedback.toast.success": "Thank you for the feedback."
  }
}

Arrays

List-based configuration for examples and feedback options.

Welcome Examples

You shouldn't have more than four items in your welcome examples.

Always test your values on device to ensure the UI looks as desired.

Feedback Options

You shouldn't have more than five options available for feedback.

Always test your values on device to ensure the UI looks as desired.

Example

Copy
{
  "arrays": {
    "welcome.examples": [
      {
        "text": "I'd like to explore templates to see what I can create.",
        "image": "https://example.com/template.png",
        "backgroundColor": "#F5F5F5"
      }
    ],
    "feedback.positive.options": [
      "Helpful and relevant recommendations",
      "Clear and easy to understand",
      "Other"
    ],
    "feedback.negative.options": [
      "Didn't understand my request",
      "Unhelpful or irrelevant information",
      "Other"
    ]
  }
}
Copied to your clipboard
{
  "arrays": {
    "welcome.examples": [
      {
        "text": "I'd like to explore templates to see what I can create.",
        "image": "https://example.com/template.png",
        "backgroundColor": "#F5F5F5"
      }
    ],
    "feedback.positive.options": [
      "Helpful and relevant recommendations",
      "Clear and easy to understand",
      "Other"
    ],
    "feedback.negative.options": [
      "Didn't understand my request",
      "Unhelpful or irrelevant information",
      "Other"
    ]
  }
}

Assets

Icon and image asset configuration.

Example

Copy
{
  "assets": {
    "icons": {
      "company": "https://example.com/brand-icon.png"
    }
  }
}
Copied to your clipboard
{
  "assets": {
    "icons": {
      "company": "https://example.com/brand-icon.png"
    }
  }
}

To use a local asset instead, place the image file in your app's assets/icons/ directory and set the value to the filename without its extension:

Copy
{
  "assets": {
    "icons": {
      "company": "company-logo"
    }
  }
}
Copied to your clipboard
{
  "assets": {
    "icons": {
      "company": "company-logo"
    }
  }
}

Theme Tokens

Visual styling using CSS-like variable names. All properties in the theme object use the --property-name format.

Typography

Colors - Primary

Colors - Surface

Colors - Messages

Colors - Buttons

Colors - Input

Colors - Welcome Prompts

Colors - Prompt Suggestions

Colors - Circular Citations

Colors - Feedback

Feedback Dialog Colors

These tokens style the feedback dialog (modal card and action bottom sheet).

Contrast note: When --feedback-sheet-background-color is pinned, also set --feedback-title-text-color, --feedback-question-text-color, and --feedback-options-text-color to maintain text contrast. System defaults track the device palette, not the themed surface.

Colors - Disclaimer

Colors - Thinking Animation

Colors - Extended Product Cards

Used when behavior.productCard.cardStyle is "productDetail".

Colors - CTA Button

Layout - Input

Layout - Messages

Layout - Chat

Layout - Cards & Carousel

Layout - Extended Product Cards

When behavior.productCard.cardStyle is "productDetail", product recommendations display as extended cards with image, badge, name, subtitle, and price. The following theme tokens customize the extended product card layout. See Colors - Extended Product Cards for color properties.

Layout - Buttons

Layout - Feedback

Feedback Dialog Layout

These tokens style the feedback dialog layout (modal card and action bottom sheet).

Components - Feedback

Non-CSS components.feedback overrides for the feedback dialog.

Note: The notes field is only available in "modal" display mode, gated by components.feedback.positiveNotesEnabled / negativeNotesEnabled.

Layout - Citations

Layout - Disclaimer

Layout - Welcome Screen

Layout - Thinking Animation

Complete Example

Copy
{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  },
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "paged"
    },
    "productCard": {
      "cardStyle": "actionButton",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": null
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "privacyNotice": {
      "title": "Privacy Notice",
      "text": "Privacy notice text."
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "inline"
    },
    "citations": {
      "showLinkIcon": false
    },
    "welcomeCard": {
      "closeButtonAlignment": "start",
      "promptFullWidth": false,
      "promptMaxLines": 1,
      "contentAlignment": "top"
    }
  },
  "disclaimer": {
    "text": "AI responses may be inaccurate. Check answers and sources. {Terms}",
    "links": [
      {
        "text": "Terms",
        "url": "https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
      }
    ]
  },
  "text": {
    "header.title": "Concierge",
    "header.subtitle": "Powered by Adobe",
    "welcome.heading": "Welcome to Brand Concierge!",
    "welcome.subheading": "I'm your personal guide to help you explore.",
    "input.placeholder": "How can I help?",
    "input.messageInput.aria": "Message input",
    "input.send.aria": "Send message",
    "input.aiChatIcon.tooltip": "Ask AI",
    "input.mic.aria": "Voice input",
    "card.aria.select": "Select example message",
    "carousel.prev.aria": "Previous cards",
    "carousel.next.aria": "Next cards",
    "scroll.bottom.aria": "Scroll to bottom",
    "error.network": "I'm sorry, I'm having trouble connecting to our services right now.",
    "loading.message": "Generating response from our knowledge base...",
    "feedbackHelpfulLabel": "Was this helpful?",
    "sourcesLabel": "Sources",
    "feedback.dialog.title.positive": "Your feedback is appreciated",
    "feedback.dialog.title.negative": "Your feedback is appreciated",
    "feedback.dialog.question.positive": "What went well? Select all that apply.",
    "feedback.dialog.question.negative": "What went wrong? Select all that apply.",
    "feedback.dialog.notes": "Notes",
    "feedback.dialog.submit": "Submit",
    "feedback.dialog.cancel": "Cancel",
    "feedback.dialog.notes.placeholder": "Additional notes (optional)",
    "feedback.toast.success": "Thank you for the feedback.",
    "feedback.thumbsUp.aria": "Thumbs up",
    "feedback.thumbsDown.aria": "Thumbs down"
  },
  "arrays": {
    "welcome.examples": [
      {
        "text": "I'd like to explore templates to see what I can create.",
        "image": "https://example.com/template.png",
        "backgroundColor": "#F5F5F5"
      },
      {
        "text": "Help me find recommendations.",
        "image": "https://example.com/example.png",
        "backgroundColor": "#F5F5F5"
      },
      {
        "text": "Where can I learn more?",
        "image": "https://example.com/learn-more.png",
        "backgroundColor": "#F5F5F5"
      }
    ],
    "feedback.positive.options": [
      "Helpful and relevant recommendations",
      "Clear and easy to understand",
      "Friendly and conversational tone",
      "Visually appealing presentation",
      "Other"
    ],
    "feedback.negative.options": [
      "Didn't understand my request",
      "Unhelpful or irrelevant information",
      "Too vague or lacking detail",
      "Errors or poor quality response",
      "Other"
    ]
  },
  "assets": {
    "icons": {
      "company": ""
    }
  },
  "theme": {
    "--welcome-input-order": "3",
    "--welcome-cards-order": "2",
    "--header-title-font-size": "18px",
    "--welcome-title-font-size": "16px",
    "--welcome-text-align": "left",
    "--welcome-content-padding": "16px",
    "--welcome-prompt-image-size": "16px",
    "--welcome-prompt-padding": "12px",
    "--welcome-prompt-corner-radius": "20px",
    "--welcome-prompt-background-color": "#F5F5F5",
    "--welcome-prompt-text-color": "#000000",
    "--welcome-prompt-spacing": "8px",
    "--suggestion-background-color": "#F0F0F0",
    "--suggestion-text-color": "#131313",
    "--suggestion-item-border-radius": "10px",
    "--thinking-dot-color": "#1B6B58",
    "--thinking-dot-size": "8px",
    "--thinking-dot-spacing": "8px",
    "--thinking-bubble-border-radius": "8px",
    "--thinking-bubble-padding-horizontal": "16px",
    "--thinking-bubble-padding-vertical": "8px",
    "--thinking-dot-vertical-alignment": "center",
    "--welcome-title-bottom-spacing": "6px",
    "--welcome-prompts-top-spacing": "12px",
    "--font-family": "",
    "--color-primary": "#EB1000",
    "--color-text": "#131313",
    "--color-container": "#F0F0F0",
    "--line-height-body": "1.75",
    "--main-container-background": "#FFFFFF",
    "--main-container-bottom-background": "#FFFFFF",

    "--message-blocker-background": "#00000066",

    "--message-user-background": "#E3F2FD",
    "--message-user-text": "#000000",

    "--message-concierge-background": "#F5F5F5",
    "--message-concierge-text": "#000000",
    "--message-concierge-link-color": "#1976D2",

    "--message-max-width": "100%",
    "--message-border-radius": "10px",
    "--message-padding": "8px 16px",
    "--agent-icon-size": "39px",
    "--agent-icon-spacing": "12px",

    "--chat-interface-max-width": "768px",
    "--chat-history-padding": "16px",
    "--chat-history-padding-top-expanded": "0",
    "--chat-history-bottom-padding": "0",
    "--message-blocker-height": "105px",

    "--input-height-mobile": "52px",
    "--input-border-radius-mobile": "12px",
    "--button-primary-background": "#1976D2",
    "--button-primary-text": "#FFFFFF",
    "--button-secondary-border": "#1976D2",
    "--button-secondary-text": "#1976D2",
    "--button-height-s": "30px",
    "--button-disabled-background": "#E0E0E0",

    "--submit-button-fill-color": "#FFFFFF",
    "--submit-button-fill-color-disabled": "#C6C6C6",
    "--color-button-submit": "#1976D2",

    "--disclaimer-color": "#757575",
    "--disclaimer-font-size": "12px",
    "--disclaimer-font-weight": "400",

    "--input-background": "#FFFFFF",
    "--input-outline-color": null,
    "--input-outline-width": "2px",
    "--input-box-shadow": "0 2px 8px 0 #00000014",
    "--input-focus-outline-width": "2px",
    "--input-text-color": "#000000",
    "--input-focus-outline-color": "#1976D2",
    "--input-send-icon-color": "#000000",
    "--input-send-arrow-icon-color": "#FFFFFF",
    "--input-send-arrow-background-color": "#1976D2",
    "--input-mic-icon-color": "#000000",
    "--input-mic-recording-icon-color": "#FFFFFF",
    "--input-font-size": "16px",
    "--input-button-height": "32px",
    "--input-button-width": "32px",
    "--input-button-border-radius": "8px",
    "--input-send-icon-color": "#1976D2",
    "--input-mic-icon-color": "#1976D2",

    "--citations-text-font-weight": "700",
    "--citations-desktop-button-font-size": "12px",
    "--citations-background-color": "#E0E0E0",
    "--citations-text-color": "#000000",

    "--feedback-icon-btn-background": "#FFFFFF",
    "--feedback-icon-btn-hover-background": "#F5F5F5",
    "--feedback-icon-btn-size-desktop": "32px",
    "--feedback-container-gap": "4px",
    "--feedback-sheet-background-color": "#FFFFFF",
    "--feedback-title-text-color": "#131313",
    "--feedback-question-text-color": "#424242",
    "--feedback-options-text-color": "#131313",
    "--feedback-checkbox-border-color": "#131313",
    "--feedback-drag-handle-color": "#CCCCCC",
    "--feedback-submit-button-fill-color": "#006554",
    "--feedback-submit-button-text-color": "#FFFFFF",
    "--feedback-submit-button-border-radius": "10px",
    "--feedback-submit-button-font-weight": "600",
    "--feedback-cancel-button-fill-color": "#006554",
    "--feedback-cancel-button-text-color": "#006554",
    "--feedback-cancel-button-border-color": "#006554",
    "--feedback-cancel-button-border-width": "1px",
    "--feedback-cancel-button-border-radius": "10px",
    "--feedback-cancel-button-font-weight": "600",
    "--feedback-checkbox-border-radius": "6px",
    "--feedback-title-text-align": "start",
    "--feedback-title-font-size": "22px",

    "--multimodal-card-box-shadow": "none",
    "--border-radius-card": "16px",

    "--product-card-outline-color": "#E3E3E3",
    "--product-card-width": "222px",
    "--product-card-height": "359px",
    "--product-card-border-radius": "8px",
    "--product-card-title-font-weight": "700",
    "--product-card-title-font-size": "14px",
    "--product-card-title-color": "#191F1C",
    "--product-card-subtitle-font-weight": "400",
    "--product-card-subtitle-font-size": "12px",
    "--product-card-subtitle-color": "#4F4F4F",
    "--product-card-price-font-weight": "400",
    "--product-card-price-font-size": "14px",
    "--product-card-price-color": "#191F1C",
    "--product-card-badge-font-weight": "700",
    "--product-card-badge-font-size": "12px",
    "--product-card-badge-text-color": "#FFFFFF",
    "--product-card-badge-background-color": "#1976D2",
    "--product-card-background-color": "#FFFFFF",
    "--product-card-was-price-color": "#6E6E6E",
    "--product-card-was-price-font-size": "12px",
    "--product-card-was-price-font-weight": "400",
    "--product-card-was-price-text-prefix": "previously ",
    "--product-card-text-horizontal-padding": "16px",
    "--product-card-text-top-padding": "24px",
    "--product-card-text-bottom-padding": "16px",
    "--product-card-text-spacing": "8px",
    "--product-card-carousel-horizontal-padding": "16px",
    "--product-card-carousel-spacing": "12px"
  }
}
Copied to your clipboard
{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  },
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "paged"
    },
    "productCard": {
      "cardStyle": "actionButton",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": null
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "privacyNotice": {
      "title": "Privacy Notice",
      "text": "Privacy notice text."
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "inline"
    },
    "citations": {
      "showLinkIcon": false
    },
    "welcomeCard": {
      "closeButtonAlignment": "start",
      "promptFullWidth": false,
      "promptMaxLines": 1,
      "contentAlignment": "top"
    }
  },
  "disclaimer": {
    "text": "AI responses may be inaccurate. Check answers and sources. {Terms}",
    "links": [
      {
        "text": "Terms",
        "url": "https://www.adobe.com/legal/licenses-terms/adobe-gen-ai-user-guidelines.html"
      }
    ]
  },
  "text": {
    "header.title": "Concierge",
    "header.subtitle": "Powered by Adobe",
    "welcome.heading": "Welcome to Brand Concierge!",
    "welcome.subheading": "I'm your personal guide to help you explore.",
    "input.placeholder": "How can I help?",
    "input.messageInput.aria": "Message input",
    "input.send.aria": "Send message",
    "input.aiChatIcon.tooltip": "Ask AI",
    "input.mic.aria": "Voice input",
    "card.aria.select": "Select example message",
    "carousel.prev.aria": "Previous cards",
    "carousel.next.aria": "Next cards",
    "scroll.bottom.aria": "Scroll to bottom",
    "error.network": "I'm sorry, I'm having trouble connecting to our services right now.",
    "loading.message": "Generating response from our knowledge base...",
    "feedbackHelpfulLabel": "Was this helpful?",
    "sourcesLabel": "Sources",
    "feedback.dialog.title.positive": "Your feedback is appreciated",
    "feedback.dialog.title.negative": "Your feedback is appreciated",
    "feedback.dialog.question.positive": "What went well? Select all that apply.",
    "feedback.dialog.question.negative": "What went wrong? Select all that apply.",
    "feedback.dialog.notes": "Notes",
    "feedback.dialog.submit": "Submit",
    "feedback.dialog.cancel": "Cancel",
    "feedback.dialog.notes.placeholder": "Additional notes (optional)",
    "feedback.toast.success": "Thank you for the feedback.",
    "feedback.thumbsUp.aria": "Thumbs up",
    "feedback.thumbsDown.aria": "Thumbs down"
  },
  "arrays": {
    "welcome.examples": [
      {
        "text": "I'd like to explore templates to see what I can create.",
        "image": "https://example.com/template.png",
        "backgroundColor": "#F5F5F5"
      },
      {
        "text": "Help me find recommendations.",
        "image": "https://example.com/example.png",
        "backgroundColor": "#F5F5F5"
      },
      {
        "text": "Where can I learn more?",
        "image": "https://example.com/learn-more.png",
        "backgroundColor": "#F5F5F5"
      }
    ],
    "feedback.positive.options": [
      "Helpful and relevant recommendations",
      "Clear and easy to understand",
      "Friendly and conversational tone",
      "Visually appealing presentation",
      "Other"
    ],
    "feedback.negative.options": [
      "Didn't understand my request",
      "Unhelpful or irrelevant information",
      "Too vague or lacking detail",
      "Errors or poor quality response",
      "Other"
    ]
  },
  "assets": {
    "icons": {
      "company": ""
    }
  },
  "theme": {
    "--welcome-input-order": "3",
    "--welcome-cards-order": "2",
    "--header-title-font-size": "18px",
    "--welcome-title-font-size": "16px",
    "--welcome-text-align": "left",
    "--welcome-content-padding": "16px",
    "--welcome-prompt-image-size": "16px",
    "--welcome-prompt-padding": "12px",
    "--welcome-prompt-corner-radius": "20px",
    "--welcome-prompt-background-color": "#F5F5F5",
    "--welcome-prompt-text-color": "#000000",
    "--welcome-prompt-spacing": "8px",
    "--suggestion-background-color": "#F0F0F0",
    "--suggestion-text-color": "#131313",
    "--suggestion-item-border-radius": "10px",
    "--thinking-dot-color": "#1B6B58",
    "--thinking-dot-size": "8px",
    "--thinking-dot-spacing": "8px",
    "--thinking-bubble-border-radius": "8px",
    "--thinking-bubble-padding-horizontal": "16px",
    "--thinking-bubble-padding-vertical": "8px",
    "--thinking-dot-vertical-alignment": "center",
    "--welcome-title-bottom-spacing": "6px",
    "--welcome-prompts-top-spacing": "12px",
    "--font-family": "",
    "--color-primary": "#EB1000",
    "--color-text": "#131313",
    "--color-container": "#F0F0F0",
    "--line-height-body": "1.75",
    "--main-container-background": "#FFFFFF",
    "--main-container-bottom-background": "#FFFFFF",

    "--message-blocker-background": "#00000066",

    "--message-user-background": "#E3F2FD",
    "--message-user-text": "#000000",

    "--message-concierge-background": "#F5F5F5",
    "--message-concierge-text": "#000000",
    "--message-concierge-link-color": "#1976D2",

    "--message-max-width": "100%",
    "--message-border-radius": "10px",
    "--message-padding": "8px 16px",
    "--agent-icon-size": "39px",
    "--agent-icon-spacing": "12px",

    "--chat-interface-max-width": "768px",
    "--chat-history-padding": "16px",
    "--chat-history-padding-top-expanded": "0",
    "--chat-history-bottom-padding": "0",
    "--message-blocker-height": "105px",

    "--input-height-mobile": "52px",
    "--input-border-radius-mobile": "12px",
    "--button-primary-background": "#1976D2",
    "--button-primary-text": "#FFFFFF",
    "--button-secondary-border": "#1976D2",
    "--button-secondary-text": "#1976D2",
    "--button-height-s": "30px",
    "--button-disabled-background": "#E0E0E0",

    "--submit-button-fill-color": "#FFFFFF",
    "--submit-button-fill-color-disabled": "#C6C6C6",
    "--color-button-submit": "#1976D2",

    "--disclaimer-color": "#757575",
    "--disclaimer-font-size": "12px",
    "--disclaimer-font-weight": "400",

    "--input-background": "#FFFFFF",
    "--input-outline-color": null,
    "--input-outline-width": "2px",
    "--input-box-shadow": "0 2px 8px 0 #00000014",
    "--input-focus-outline-width": "2px",
    "--input-text-color": "#000000",
    "--input-focus-outline-color": "#1976D2",
    "--input-send-icon-color": "#000000",
    "--input-send-arrow-icon-color": "#FFFFFF",
    "--input-send-arrow-background-color": "#1976D2",
    "--input-mic-icon-color": "#000000",
    "--input-mic-recording-icon-color": "#FFFFFF",
    "--input-font-size": "16px",
    "--input-button-height": "32px",
    "--input-button-width": "32px",
    "--input-button-border-radius": "8px",
    "--input-send-icon-color": "#1976D2",
    "--input-mic-icon-color": "#1976D2",

    "--citations-text-font-weight": "700",
    "--citations-desktop-button-font-size": "12px",
    "--citations-background-color": "#E0E0E0",
    "--citations-text-color": "#000000",

    "--feedback-icon-btn-background": "#FFFFFF",
    "--feedback-icon-btn-hover-background": "#F5F5F5",
    "--feedback-icon-btn-size-desktop": "32px",
    "--feedback-container-gap": "4px",
    "--feedback-sheet-background-color": "#FFFFFF",
    "--feedback-title-text-color": "#131313",
    "--feedback-question-text-color": "#424242",
    "--feedback-options-text-color": "#131313",
    "--feedback-checkbox-border-color": "#131313",
    "--feedback-drag-handle-color": "#CCCCCC",
    "--feedback-submit-button-fill-color": "#006554",
    "--feedback-submit-button-text-color": "#FFFFFF",
    "--feedback-submit-button-border-radius": "10px",
    "--feedback-submit-button-font-weight": "600",
    "--feedback-cancel-button-fill-color": "#006554",
    "--feedback-cancel-button-text-color": "#006554",
    "--feedback-cancel-button-border-color": "#006554",
    "--feedback-cancel-button-border-width": "1px",
    "--feedback-cancel-button-border-radius": "10px",
    "--feedback-cancel-button-font-weight": "600",
    "--feedback-checkbox-border-radius": "6px",
    "--feedback-title-text-align": "start",
    "--feedback-title-font-size": "22px",

    "--multimodal-card-box-shadow": "none",
    "--border-radius-card": "16px",

    "--product-card-outline-color": "#E3E3E3",
    "--product-card-width": "222px",
    "--product-card-height": "359px",
    "--product-card-border-radius": "8px",
    "--product-card-title-font-weight": "700",
    "--product-card-title-font-size": "14px",
    "--product-card-title-color": "#191F1C",
    "--product-card-subtitle-font-weight": "400",
    "--product-card-subtitle-font-size": "12px",
    "--product-card-subtitle-color": "#4F4F4F",
    "--product-card-price-font-weight": "400",
    "--product-card-price-font-size": "14px",
    "--product-card-price-color": "#191F1C",
    "--product-card-badge-font-weight": "700",
    "--product-card-badge-font-size": "12px",
    "--product-card-badge-text-color": "#FFFFFF",
    "--product-card-badge-background-color": "#1976D2",
    "--product-card-background-color": "#FFFFFF",
    "--product-card-was-price-color": "#6E6E6E",
    "--product-card-was-price-font-size": "12px",
    "--product-card-was-price-font-weight": "400",
    "--product-card-was-price-text-prefix": "previously ",
    "--product-card-text-horizontal-padding": "16px",
    "--product-card-text-top-padding": "24px",
    "--product-card-text-bottom-padding": "16px",
    "--product-card-text-spacing": "8px",
    "--product-card-carousel-horizontal-padding": "16px",
    "--product-card-carousel-spacing": "12px"
  }
}