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  | #2B2826  | Primary branding color |
| SMI.primaryVariant | #706E6B  | #2B2826  | Variant of the primary color |
| SMI.onPrimary | #2B2B26 | #ECEBEA  | Primary text color |
| SMI.secondary | #0070D2  | #007ADD  | Secondary branding color |
| SMI.onSecondary | #FFFFFF  | #FFFFFF | Secondary text color |
| SMI.secondaryActive | #014485  | #16325C  | Secondary color for active elements |
| SMI.secondaryHighlight | #062680  | #6EC4FA  | Secondary color for highlighted elements |
| SMI.onSecondaryVariant | #DDDBDA  | #1A1B1E  | Alternate secondary text color |
| SMI.background | #F3F2F2  | #080707  | Background color |
| SMI.onBackground | #706E6B | #B0ADAB  | Color for elements on the background color |
| SMI.surface | #FFFFFF | #1A1B1E | Primary color for surfaces |
| SMI.onSurface | #2B2826 | #C9C7C5  | Text color on surfaces |
| SMI.surfaceHighlight | #B3B3B3  | #66676B  | Highlight color for surfaces |
| SMI.surfaceVariant | #DDDBDA | #30373D  | Variant color for surfaces |
| SMI.onSurfaceVariant | #0070D2 | #FFFFFF | Variant color for surfaces |
| SMI.surfaceSecondary | #CED0D2  | #30373D | Secondary color for surfaces |
| SMI.surfaceSecondaryVariant | #EDF4FF  | #3F3F3F  | Secondary color variant for surfaces |
| SMI.tertiary | #000000  | #000000 | Tertiary branding color |
| SMI.highlight | #FCC003  | #FCC003 | Highlight color |
| SMI.error | #A61A14  | #D4504C  | Error feedback color |
| SMI.warning | #FFB75D  | #FFB75D | Warning feedback color |
| SMI.success | #04844B  | #4BCA81  | Success feedback color |
| SMI.transparent | (alpha #00) #00FFFF  | (alpha #00) #00FFFF | Transparent color |
| SMI.backgroundTransparent | (alpha #80) #F3F2F2  | (alpha #80) #080707  | Transparent background color |
| SMI.surfaceTransparent | (alpha #80) #FFFFFF  | (alpha #80) #1A1B1E  | Transparent surface color |
| SMI.onSecondaryTransparent | (alpha #80) #FFFFFF | (alpha #80) #FFFFFF | Transparent secondary color |
| SMI.onSecondarySemiTransparent | (alpha #99) #FFFFFF | (alpha #99) #FFFFFF  | Transparent color on secondary |
| SMI.onBackgroundSemiTransparent | (alpha: #80) #706E6B  | (alpha: #80) #B0ADAB  | Semi-transparent color for elements on the background color |
j
