--- schema_version: "1" id: b77118e69fc201867d4b9fa90edef46a158afd5e83e205b0396b0a1439858af1 title: Generic Branding Tokens collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/service-cloud/messaging-in-app/guides/ios-colors-generic-branding-tokens.md canonical_url: https://developer.salesforce.com/docs/service/messaging-in-app/guide/ios-colors-generic-branding-tokens.html source_site: developer.salesforce.com content_type: documentation content_hash: 5d3a692163e9323611a39cea603bdb408a6951b347c543e4dfa861fa8342a790 products: - Enhanced In-App Chat - Service Cloud Developer Content --- # Generic Branding Tokens ![Generic branding tokens](https://developer.salesforce.com/docs/media/messaging-in-app/messaging-ios-device-colors.png) ![Generic branding tokens for pre-chat](https://developer.salesforce.com/docs/media/messaging-in-app/messaging-ios-prechat-colors.png) Use these tokens to adjust the colors of the app to match your product's brand. | Keyword | Default Light Color | Default Dark Color | Description | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | | SMI.primary | #FAFAF9 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FAFAF9.png '{"class": "image-icon-lg"}') | #2B2826 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/2B2B26.png '{"class": "image-icon-lg"}') | Primary branding color | | SMI.primaryVariant | #706E6B ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/706E6B.png '{"class": "image-icon-lg"}') | #2B2826 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/2B2826.png '{"class": "image-icon-lg"}') | Variant of the primary color | | SMI.onPrimary | #2B2B26 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/2B2B26.png '{"class": "image-icon-lg"}') | #ECEBEA ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/ECEBEA.png '{"class": "image-icon-lg"}') | Primary text color | | SMI.secondary | #0070D2 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/0070D2.png '{"class": "image-icon-lg"}') | #007ADD ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/007ADD.png '{"class": "image-icon-lg"}') | Secondary branding color | | SMI.onSecondary | #FFFFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFFFFF.png '{"class": "image-icon-lg"}') | #FFFFFF ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFFFFF.png '{"class": "image-icon-lg"}') | Secondary text color | | SMI.secondaryActive | #014485 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/014485.png '{"class": "image-icon-lg"}') | #16325C ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/16325C.png '{"class": "image-icon-lg"}') | Secondary color for active elements | | SMI.secondaryHighlight | #062680 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/062680.png '{"class": "image-icon-lg"}') | #6EC4FA ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/6EC4FA.png '{"class": "image-icon-lg"}') | Secondary color for highlighted elements | | ​​SMI.onSecondaryVariant | #DDDBDA ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/DDDBDA.png '{"class": "image-icon-lg"}') | #1A1B1E ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/1A1B1E.png '{"class": "image-icon-lg"}') | Alternate secondary text color | | SMI.background | #F3F2F2 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/F3F2F2.png '{"class": "image-icon-lg"}') | #080707 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/080707.png '{"class": "image-icon-lg"}') | Background color | | SMI.onBackground | #706E6B ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/706E6B.png '{"class": "image-icon-lg"}') | #B0ADAB ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/B0ADAB.png '{"class": "image-icon-lg"}') | Color for elements on the background color | | SMI.surface | #FFFFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFFFFF.png '{"class": "image-icon-lg"}') | #1A1B1E ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/1A1B1E.png '{"class": "image-icon-lg"}') | Primary color for surfaces | | SMI.onSurface | #2B2826 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/2B2826.png '{"class": "image-icon-lg"}') | #C9C7C5 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/C9C7C5.png '{"class": "image-icon-lg"}') | Text color on surfaces | | SMI.surfaceHighlight | #B3B3B3 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/B3B3B3.png '{"class": "image-icon-lg"}') | #66676B ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/66676B.png '{"class": "image-icon-lg"}') | Highlight color for surfaces | | SMI.surfaceVariant | #DDDBDA ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/DDDBDA.png '{"class": "image-icon-lg"}') | #30373D ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/30373D.png '{"class": "image-icon-lg"}') | Variant color for surfaces | | SMI.onSurfaceVariant | #0070D2 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/0070D2.png '{"class": "image-icon-lg"}') | #FFFFFF ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFFFFF.png '{"class": "image-icon-lg"}') | Variant color for surfaces | | SMI.surfaceSecondary | #CED0D2 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/CED0D2.png '{"class": "image-icon-lg"}') | #30373D ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/30373D.png '{"class": "image-icon-lg"}') | Secondary color for surfaces | | SMI.surfaceSecondaryVariant | #EDF4FF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/EDF4FF.png '{"class": "image-icon-lg"}') | #3F3F3F ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/3F3F3F.png '{"class": "image-icon-lg"}') | Secondary color variant for surfaces | | SMI.tertiary | #000000 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/000000.png '{"class": "image-icon-lg"}') | #000000 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/000000.png '{"class": "image-icon-lg"}') | Tertiary branding color | | SMI.highlight | #FCC003 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FCC003.png '{"class": "image-icon-lg"}') | #FCC003 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FCC003.png '{"class": "image-icon-lg"}') | Highlight color | | SMI.error | #A61A14 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/A61A14.png '{"class": "image-icon-lg"}') | #D4504C ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/D4504C.png '{"class": "image-icon-lg"}') | Error feedback color | | SMI.warning | #FFB75D ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFB75D.png '{"class": "image-icon-lg"}') | #FFB75D ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/FFB75D.png '{"class": "image-icon-lg"}') | Warning feedback color | | SMI.success | #04844B ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/04844B.png '{"class": "image-icon-lg"}') | #4BCA81 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/4BCA81.png '{"class": "image-icon-lg"}') | Success feedback color | | SMI.transparent | (alpha #00) #00FFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/0000FFFF.png '{"class": "image-icon-lg"}') | (alpha #00) #00FFFF ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/0000FFFF.png '{"class": "image-icon-lg"}') | Transparent color | | SMI.backgroundTransparent | (alpha #80) #F3F2F2 ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80F3F2F2.png '{"class": "image-icon-lg"}') | (alpha #80) #080707 ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80080707.png '{"class": "image-icon-lg"}') | Transparent background color | | SMI.surfaceTransparent | (alpha #80) #FFFFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80FFFFFF.png '{"class": "image-icon-lg"}') | (alpha #80) #1A1B1E ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/801A1B1E.png '{"class": "image-icon-lg"}') | Transparent surface color | | SMI.onSecondaryTransparent | (alpha #80) #FFFFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80FFFFFF.png '{"class": "image-icon-lg"}') | (alpha #80) #FFFFFF ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80FFFFFF.png '{"class": "image-icon-lg"}') | Transparent secondary color | | SMI.onSecondarySemiTransparent | (alpha #99) #FFFFFF ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80FFFFFF.png '{"class": "image-icon-lg"}') | (alpha #99) #FFFFFF ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/99FFFFFF.png '{"class": "image-icon-lg"}') | Transparent color on secondary | | SMI.onBackgroundSemiTransparent | (alpha: #80) #706E6B ![color light](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80706E6B.png '{"class": "image-icon-lg"}') | (alpha: #80) #B0ADAB ![color dark](https://developer.salesforce.com/docs/media/messaging-in-app/colors/80B0ADAB.png '{"class": "image-icon-lg"}') | Semi-transparent color for elements on the background color |