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.

data-variant=warning

data-slots=text

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

// 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:

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:

@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:

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:

"--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:

"--input-height-mobile": "52px"
"--input-border-radius-mobile": "12px"
"--message-max-width": "100%"

Padding

Padding follows CSS shorthand syntax:

"--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:

"--input-box-shadow": "0 2px 8px 0 #00000014"
"--multimodal-card-box-shadow": "0 1px 3px 0 #00000014"

Format: offsetX offsetY blurRadius spreadRadius color. Set to "none" to disable a shadow entirely.

--multimodal-card-box-shadow renders as a drop shadow on ExtendedProductCard, but only two of the five values are actually applied — Compose's Modifier.shadow is elevation-based, not a literal box-shadow renderer:

Low alpha values (e.g. #00000014 ≈ 8%) are barely visible against a white background — increase alpha (e.g. #00000040+) for a more visible effect.

--input-box-shadow is parsed into the same shape but isn't rendered by any composable yet (see status table below).

Gradients

Some color tokens (input border, mic icon, arrow send button background, mic waveform bars) support a two-color linear gradient as an alternative to a solid color. Each gradient-capable token is configured via 3 CSS variables sharing a common prefix — a start color, an end color, and an optional angle:

"--input-outline-gradient-start-color": "#12B0A0",
"--input-outline-gradient-end-color": "#6DD3C4",
"--input-outline-gradient-angle": "90deg"

• Both the start and end color must be set for the gradient to render. Setting only one (or setting only the angle) does not produce a partial/fading gradient — the unset side is treated as a not-yet-configured placeholder, and the token silently falls back to its solid-color counterpart (e.g. --input-outline-color) exactly as if no gradient keys had been set at all.
• The angle accepts a CSS <n>deg value or a direction keyword (to top, to right, to bottom, to left, to top right, to top left, to bottom right, to bottom left) and follows CSS linear-gradient convention: 0deg/to top points up, increasing clockwise. Defaults to 180deg (to bottom) when omitted.
• Once both colors are set, the gradient takes priority over the corresponding solid-color token (e.g. --input-outline-gradient-* overrides --input-outline-color).
• The angle-to-render conversion is exact only for the 4 axis-aligned angles (0/90/180/270); other angles are a close visual approximation, not pixel-exact CSS gradient math.

Font Weights

Font weights use CSS numeric or named values:

Text Alignment

Metadata

Theme identification information.

Example

{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  }
}

Header

Chat header title, subtitle, and image configuration. This is a separate top-level header object — it is not part of text.

Note: title/subtitle only fall back to the defaults above when both are blank or unset. If you set either one, the other is left blank rather than defaulted — setting only header.subtitle hides the title instead of showing "Concierge".

Example

{
  "header": {
    "title": "Acme Assistant",
    "subtitle": "Here to help",
    "image": "logo",
    "layoutType": "imageOnly",
    "imageHeight": "24px"
  }
}

Behavior

Feature toggles and interaction configuration.

Multimodal Carousel

Input

Chat

Product Card

Welcome Card

Prompt Suggestions

Feedback

Citations

phoneIcon/storeIcon/defaultLinkIcon/linkIconStyle only affect links rendered inline within AI message text. The citation list icon (in the expanded sources accordion) is a fixed 14dp size tinted with the citation URL color, and always uses the built-in pop-out icon — only showLinkIcon applies to it.

Example

{
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "scroll"
    },
    "productCard": {
      "cardStyle": "productDetail",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": {
        "icon": "ai-assistant-icon"
      }
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "below",
      "showCloseButton": true,
      "showCancelButton": false,
      "alwaysDisplay": 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

{
  "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.

Welcome Screen

Input

System Messages

Feedback Dialog

Sources & Feedback Footer

Prompt Suggestions

Example

{
  "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 provided 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

{
  "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

{
  "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:

{
  "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 value format: All layout measurements are specified as CSS strings in the JSON theme object (e.g. "8px", "16px") and integer quantities as numeric strings (e.g. "700", "400"). The SDK parses these into their internal Kotlin types (Double for dp values, Int for weights and orders). The Type and Default columns below reflect the internal representation.

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

{
  "metadata": {
    "brandName": "Concierge Demo",
    "version": "1.0.0",
    "language": "en-US",
    "namespace": "brand-concierge"
  },
  "header": {
    "title": "Concierge",
    "subtitle": "Powered by Adobe"
  },
  "behavior": {
    "multimodalCarousel": {
      "cardClickAction": "openLink",
      "carouselStyle": "paged"
    },
    "productCard": {
      "cardStyle": "actionButton",
      "cardsAlignment": "center"
    },
    "input": {
      "enableVoiceInput": true,
      "sendButtonStyle": "default",
      "disableMultiline": false,
      "showAiChatIcon": {
        "icon": "ai-assistant-icon"
      }
    },
    "chat": {
      "messageAlignment": "left",
      "messageWidth": "100%",
      "userMessageBubbleStyle": "balloon"
    },
    "feedback": {
      "displayMode": "action",
      "thumbsPlacement": "inline",
      "alwaysDisplay": false
    },
    "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": {
    "welcome.heading": "Welcome to Brand Concierge!",
    "welcome.subheading": "I'm your personal guide to help you explore.",
    "input.placeholder": "How can I help?",
    "input.aiChatIcon.tooltip": "Ask AI",
    "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."
  },
  "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-primary-hover": "#1565C0",
    "--button-secondary-border": "#1976D2",
    "--button-secondary-text": "#1976D2",
    "--button-secondary-hover": "#E3F2FD",
    "--color-button-secondary-hover-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",
    "--color-button-submit-hover": "#1565C0",

    "--cta-button-background-color": "#EDEDED",
    "--cta-button-text-color": "#191F1C",
    "--cta-button-icon-color": "#161313",
    "--cta-button-border-radius": "99px",
    "--cta-button-horizontal-padding": "16px",
    "--cta-button-vertical-padding": "12px",
    "--cta-button-font-size": "14px",
    "--cta-button-font-weight": "400",
    "--cta-button-icon-size": "16px",

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

    "--input-background": "#FFFFFF",
    "--input-outline-color": null,
    "--input-outline-gradient-start-color": "#1976D2",
    "--input-outline-gradient-end-color": "#4B75FF",
    "--input-outline-gradient-angle": "90deg",
    "--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-send-arrow-background-gradient-start-color": "#1976D2",
    "--input-send-arrow-background-gradient-end-color": "#4B75FF",
    "--input-send-arrow-background-gradient-angle": "135deg",
    "--input-mic-icon-color": "#000000",
    "--input-mic-icon-gradient-start-color": "#1976D2",
    "--input-mic-icon-gradient-end-color": "#4B75FF",
    "--input-mic-icon-gradient-angle": "135deg",
    "--input-mic-recording-icon-color": "#FFFFFF",
    "--input-mic-waveform-gradient-start-color": "#1976D2",
    "--input-mic-waveform-gradient-end-color": "#4B75FF",
    "--input-mic-waveform-gradient-angle": "180deg",
    "--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": "#EB1000",
    "--feedback-submit-button-text-color": "#FFFFFF",
    "--feedback-submit-button-border-radius": "10px",
    "--feedback-submit-button-font-weight": "600",
    "--feedback-cancel-button-fill-color": null,
    "--feedback-cancel-button-text-color": "#EB1000",
    "--feedback-cancel-button-border-color": "#EB1000",
    "--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-min-height": "240px",
    "--product-card-max-height": "360px",
    "--product-card-border-radius": "8px",
    "--product-image-width": "190px",
    "--product-image-height": "190px",
    "--product-image-scale": "fill",
    "--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-title-subtitle-spacing": "8px",
    "--product-card-section-spacing": "16px",
    "--product-card-price-spacing": "0px",
    "--product-card-carousel-horizontal-padding": "16px",
    "--product-card-carousel-spacing": "12px",
    "--product-card-cta-button-background-color": "#BB5811",
    "--product-card-cta-button-text-color": "#FFFFFF",
    "--product-card-cta-button-border-radius": "40px",
    "--product-card-cta-button-horizontal-padding": "16px",
    "--product-card-cta-button-vertical-padding": "8px",
    "--product-card-cta-button-font-size": "12px",
    "--product-card-cta-button-font-weight": "600"
  }
}

Implementation Status

This section documents which properties are fully implemented, partially implemented, or not yet implemented in the Android SDK based on actual usage in composables.

Legend

Note: The tables below include a "Used In" column showing which UI composables consume each theme property.

Implementation Summary

Overall Implementation Status:

• Colors: ~70% implemented (most core colors used, hover states not applicable)
• Typography: 60% implemented (fontFamily not yet supported)
• Layout: ~15% implemented (only outline widths and font sizes currently used)
• Behavior: ~10% implemented (only enableVoiceInput functional)
• Text/Copy: ~50% implemented (main strings used; *.aria accessibility-label keys and text["header.*"] are not supported at all — see Header for the real title/subtitle keys)

Key Differences from Web/iOS:

• Hover states (--button-primary-hover, --feedback-icon-btn-hover-background) are parsed but not applicable on Android
• Box shadows are parsed but not currently rendered
• Most layout dimensions (padding, margins, border radius) are hardcoded rather than theme-driven
• *.aria text keys and behavior.privacyNotice.* are not parsed by the Android SDK at all (not just unused) — omit them

Metadata

Header

Behavior

Disclaimer

Text (Copy)

Behavior — Feedback & Citations

Arrays

Assets

Theme Tokens - Typography

Theme Tokens - Colors

Note: The following base colors are not configurable via JSON themes. They are hardcoded in LightConciergeColors / DarkConciergeColors and serve as fallback colors throughout the UI:

• secondary, onSurfaceVariant, outline, error, onError

These colors are used internally by composables but cannot be customized in theme JSON files. See "Fallback Colors" section at the end.

Note: container (card/chip background) is now configurable via --color-container.

Note: The feedback dialog checkbox uses --color-primary for the check box filled color; the checkmark icon is white and is not configurable via theme.

Theme Tokens - Layout

Unsupported CSS Variables

The following CSS variables from web themes are not supported on Android (desktop-only properties like --input-height and --input-border-radius without -mobile suffix):

Fallback Colors (Not Theme-Configurable)

The following colors from LightConciergeColors / DarkConciergeColors are hardcoded and cannot be customized via JSON themes. They serve as fallback colors throughout the UI:

Note: While these colors provide consistent fallback styling, they cannot be overridden in theme JSON files. If you need custom colors for these UI elements, use the theme-specific CSS variables that map to these elements (e.g., use --input-outline-color instead of relying on the outline fallback).

Recommendations for Theme Authors

What to Focus On

When creating themes for the Android SDK, focus on these actively used properties for the best results:

Essential Colors (Highest Impact):

• --color-primary - Primary brand color (used for buttons, feedback checkbox checked state, mic button icon, thinking animation fallback)
• --color-text - Primary text color for main background (header, welcome card when theme loaded, prompt suggestions).
• --main-container-background - Main screen background color (welcome card, chat area, feedback dialog)
• --main-container-bottom-background - Bottom container background (input area)
• --message-user-background / --message-user-text - User message styling
• --message-concierge-background / --message-concierge-text - AI message styling, feedback dialog styling, feedback button icons, expanded citation text, chat footer (Sources label and icon)
• --message-concierge-link-color - Links in AI content and expanded citation URLs
• --button-primary-background / --button-primary-text - Primary buttons
• --button-secondary-border / --button-secondary-text - Secondary buttons
• --input-background / --input-text-color - Input field colors
• --input-outline-color / --input-focus-outline-color - Input borders
• --input-send-icon-color / --input-mic-icon-color - Send and mic button icon colors
• --input-send-arrow-icon-color / --input-send-arrow-background-color - Arrow send button colors (when sendButtonStyle is "arrow")
• --input-mic-recording-icon-color - Waveform animation color during voice recording
• --input-mic-waveform-gradient-start-color / --input-mic-waveform-gradient-end-color / --input-mic-waveform-gradient-angle - Optional gradient for the waveform bars (falls back to --input-mic-recording-icon-color)
• --input-outline-gradient-start-color / -end-color / -angle, --input-mic-icon-gradient-*, --input-send-arrow-background-gradient-* - Optional gradients for the input border, mic icon, and arrow send button circle (each overrides its solid-color counterpart when set — see Gradients)
• --submit-button-fill-color / --color-button-submit - Submit button
• --disclaimer-color / --disclaimer-font-size / --disclaimer-font-weight - Disclaimer text at bottom
• --citations-background-color / --citations-text-color - Citation pill (badge).
• --feedback-icon-btn-background - Feedback button styling

Essential Text/Copy:

• header.title / header.subtitle - Header title and subtitle (root-level header object, not text)
• text["welcome.heading"] - Welcome screen title
• text["welcome.subheading"] - Welcome screen description
• text["input.placeholder"] - Input field hint
• text["loading.message"] - Loading indicator text
• All text["feedback.dialog.*"] - Feedback dialog strings

Essential Behavior:

• behavior.input.enableVoiceInput - Show/hide microphone button
• behavior.input.sendButtonStyle - "default" (paper airplane) or "arrow" (filled circle with upward arrow)
• behavior.input.enableMicPulseBackground - Show/hide the pulsing colored disc behind the mic/waveform icon while recording (default true; set false for a bare waveform)
• behavior.productCard.cardStyle - Use "productDetail" for extended product cards (image, badge, name, subtitle, price)
• behavior.productCard.cardsAlignment - Horizontal alignment of product cards: "start" (left), "center" (default), or "end" (right)
• behavior.multimodalCarousel.carouselStyle - Use "paged" for prev/next/dots or "scroll" for continuous scroll
• behavior.welcomeCard.closeButtonAlignment - Close button position ("start" or "end")
• behavior.welcomeCard.promptFullWidth - Full-width cards vs compact pill chips
• behavior.welcomeCard.promptMaxLines - Max prompt text lines (set 1 for uniform pills)
• behavior.welcomeCard.contentAlignment - Welcome card vertical position ("top" or "center")

Essential Layout:

• --input-outline-width / --input-focus-outline-width - Input border thickness
• --input-border-radius-mobile - Input field corner radius
• --input-font-size - Input text size
• --input-send-icon-color / --input-mic-icon-color - Input button icon colors
• --disclaimer-font-size - Disclaimer text size
• --citations-desktop-button-font-size - Citation text size
• --line-height-body - Text line spacing

Extended Product Cards (when behavior.productCard.cardStyle is "productDetail"):

• --product-card-width / --product-card-min-height / --product-card-max-height - Card dimensions
• --product-card-title-* / --product-card-subtitle-* / --product-card-price-* - Text styling
• --product-card-badge-* - Badge styling
• --product-card-background-color / --product-card-outline-color - Card appearance
• --product-card-was-price-* - Strikethrough price styling

What Can Be Skipped

These properties are parsed but not currently used and can be omitted without affecting the UI:

• Hover states (all *-hover properties)
• Box shadows (all *-box-shadow properties)
• Most layout dimensions (padding, margins, border radius) - currently hardcoded
• Disabled button states
• Accessibility labels (*.aria text keys are not parsed by the Android SDK at all)
• Welcome screen ordering (--welcome-input-order, --welcome-cards-order)
• Font family (--font-family - not yet implemented)

Testing Your Theme

1. Test core flows: Create a theme, load it, send messages, provide feedback
2. Check on multiple devices: Test on different screen sizes and Android versions
3. Verify contrast ratios: Ensure text is readable on all backgrounds
4. Test with and without a theme: With no theme loaded, the welcome card and prompts follow system light/dark (dark background + light text in dark mode). With a theme loaded, welcome example backgroundColor and theme colors are applied
5. Test light/dark modes: If supporting both, verify colors work in both contexts