Skip to main content

Container themes

Add customizable style across streams, cards, and card elements.

Add a Container theme

  1. From the Configuration section in the workbench sidebar menu, choose Container themes. Alternatively, open the command palette and type Container themes .
  2. Click the SDK tab
  3. Click Add theme button.

Understanding Container themes

This guide contains a detailed summary of which style attributes are customizable across streams, cards, and card elements and how to configure these via themes. Watch this video below for an overview.

Atomic.io Theme Editor training video. Running time 2:59.

Design principles

Styling the SDKs so they feel right at home in your host apps is crucial to a positive user experience – so we've made their appearance highly configurable.

When creating and sending a card to a container for the first time, you'll notice some sensible defaults are already set. When edited, this style propagates at once across Web, iOS, and Android simultaneously. However, some deviations in layout occur on each platform in order to adhere to their respective design conventions.

Differences

Aside from these platform deviations, at present, style is defined globally to establish consistency across platforms.

Error and loading states

Each SDK may be in one of the following three temporary states:

  • No internet connection;
  • An API issue;
  • Loading.

Loading and error states

There are two ways these states may be styled, depending on whether a theme has been cached on-device yet. When a stream container is loaded for the first time on a device, the SDK-level configuration options are used. On subsequent loads, once a theme has been cached, this theme is used to style the error and loading states.

This information applies to all display modes for all platforms, except single card view. For single card view, no visual error or loading states are shown at all, but instead the container is set to a collapsed state whilst loading or in an error state, as the intention for the single card view is to be as unobtrusive as possible.

Customizable style attributes

Workbench theme

These theme elements are used once a cached theme has been downloaded on the user's device.

If you wish to match your theme to the default style set by via the SDK on first load, the values are as follows:

  • iOS
    • Message text: San Francisco, 17px, weight regular(400)
    • Button text: San Francisco, 17px, weight bold(700)
  • Android
    • Message text: Roboto, 16px, weight regular(400)
    • Button text: Roboto, 14px, weight bold(700)
  • Web
    • Message text: System default font stack, 16px, weight regular(400)
    • Button text: System default font stack, 16px, weight bold(700)

SDK configuration

These theme attributes are set in code by your development team, and apply only on the first load of a theme for a stream container. Note that the SDK configuration has limited customizable style attributes for message text and button text, to reduce complexity while loading a theme for the first time.

  • Message text: Color
  • Button text: Color
  • Loading indicator: Color

See configuration detail documentation for iOS, Android, or Web.

Themes

In the Atomic Workbench, style is set in the theme editor, where you can edit, add, or delete themes. Go to: Configuration > SDK > Container themes.

The theme editor generates a structured JSON object. When editing the theme, you can edit the raw JSON by selecting the overflow menu then 'Show JSON'.

Themes

As a rule, most non-layout stylistic attributes are fully customizable. For example, you're able to define border radius, background color or font weight on a button to match your design language, but not layout properties like width or margin.

Fonts

Custom fonts can be added within the theme editor, and referenced in the theme. You can reference hosted OpenType (.otf) or TrueType (.ttf) fonts by url, or use fonts already embedded in your application, for iOS and Android.

If a font is not specified, Atomic uses the following fallbacks:

iOS

San Francisco

Android

Roboto

Web

The default of sans-serif is the last resort and will be different depending on operating system:

  • Apple operating systems will use San Francisco
  • Windows will use Segoe UI
  • Chromebooks will use Roboto
  • The fallback chain is: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

If you specify a default font in the theme, Atomic will use that font in every place you have not defined a font.

Embedded fonts

When creating your stream container's theme in the Atomic Workbench, you optionally define custom fonts that can be used by the stream container for UI elements. When defined in the Workbench, these fonts must point to a remote URL, so that the SDK can download the font, register it against the system and use it.

It is likely that the custom fonts you wish to use are already part of your app, particularly if they are a critical component of your brand identity. If this is the case, you can have a stream container font - with a given font family name, weight and style - reference a font embedded in your app instead. This is also useful if the license for your font only permits you to embed the font and not download it from a remote URL.

Position

Elements can be displayed within cards and subviews in any order. However, as mentioned above, their layout attributes are defined by Atomic and cannot be customized. An exception to this is the control over arrangement and spacing of action buttons as outlined below. To rearrange elements, simply drag them into the desired order in the Workbench card builder. There are only a few elements that cannot be re-arranged, to keep the user experience consistent – these are listed below.

Element positions

ElementPosition
CategoryTop left of card, or below a banner image if it is the first element in the card
Overflow menuTop right of card
Images and videos in the banner formatTop of card
Card actionsBottom of card, in any order
Subview buttonsBottom of subview, in any order
All other contentAny order

Action button layout

(introduced in 23.4.0)

The theme editor allows control over the arrangement and spacing of action buttons within a card. You are able to customize whether these buttons follow a horizontal or vertical layout as well as the spacing between the action buttons. When action buttons are configured to have a vertical layout you can additionally control whether the buttons should fill the width of the card or if the width should be dictated by the button contents. In the case of buttons fitting the content width, you can control the horizontal alignment of the buttons.

Button layout is customizable at both the top-level card & subview levels, but within those levels the same settings apply to both primary & secondary action button variants.

Variants

Understanding that the default design provided by a white-label product like Atomic may not align exactly with your design language, many elements offer several different design variants to provide you with additional flexibility. For example, images can be displayed as they are, or as a thumbnail with accompanying text. Similarly, inputs can be displayed in multiple formats such as on a single line, stacked with a floating label, or placed alongside an optional image.

Variants

Action button variants

(introduced in 23.4.0)

The theme editor in the workbench allows you to create a distinct appearance for your application's action buttons. Two categories of variants can be defined: Primary and Secondary styles. These styles options are available at both the top-card level and on subviews.

Primary Style: This is the default style applied to action buttons. It includes all the customizable attributes such as background color, border style, typography, and title alignment.

Secondary Style: This style is applied to secondary action buttons, the same set of customizable attributes as the primary style has are available here.

These styles are independent of each other, offering a broad set of style attributes to create a visually engaging user interface.

Fallback rules to the secondary style

When defining styles, it's crucial to understand the fallback rules that ensure a cohesive appearance across your application. Below are the established fallback rules:

  • Initial State: Existing and newly created themes will not have any values set for ‘secondary’ buttons at either the top-level or subview.

  • Inheritance: When no values are defined for a secondary button, either at the top-level or subview, it will inherit the styling of the primary button at that same level.

  • Partial Definition: As soon as any one of the properties for a secondary button is defined, the button will no longer inherit the primary button styling.

  • Incomplete Configuration: If only some properties of the secondary button are defined, the undefined properties will revert to the SDK’s default styles (often rendered in black and white).

Summary: Secondary button styles default to primary button styles when undefined. However, if you begin to theme secondary buttons, ensure you define all relevant properties to prevent falling back to the SDK defaults.

Theme definition

You can define your theme in the Theme editor in the workbench UI; all of the settings you choose are then saved as a JSON object. Read the Themes section in this page if you want to know how to edit the raw JSON.

Font families

Custom font families are supported across all SDKs. You can declare as many fonts as you like in your theme definition, each with any number of weights. OpenType (OTF), TrueType (TTF) and Web Open Font (WOFF & WOFF2) fonts are supported.

A font is unique by a combination of its font name, style and weight. This means that if you want to use the same font, but with different weights, you need to import it for each combination.

Custom font families have the following properties:

  • fontFamily: The name of the font family. A font is unique by a combination of its font name, style and weight.
  • weight: Expressed as a numerical value, including 400 for regular or 700 for bold.
  • style: Either normal or italic.
  • src: The HTTPS URL to download the font from.
info

The type of font (either OpenType or TrueType) is inferred from the file extension in the src attribute. Ensure your font URL has a file extension of either otf, ttf, woff or woff2 otherwise your font may not be registered correctly.

Colors

Color objects are defined as a hex color code, with an associated opacity:

  • color: The hex color code for the color; e.g. #00FF00.
  • opacity: The opacity of the color, between 0 and 1.

Typography

Typography styles are defined as an object with a font family name, size, transform, weight, style and line height.

When resolving fonts in the SDKs, the combination of font family, weight and style is used.

All three font properties must match

Add a separate font variable for every combination of name, weight and style that you use on components unless the font is already present on the target device. If there is no matching variable then the text will fall back to a system default font.

Typography properties are:

  • fontFamily: The name of the custom font family to use. To use the system font for the platform, you can omit this property. The system font is San Francisco on iOS, Roboto on Android and a platform-specific font on Web.
  • size: The size to use for the font, as a string with a px suffix; e.g. 15px.
  • transform: Transformation to apply to the text - either none or uppercase.
  • weight: Font weight to use - either normal or bold.
  • style: Font style to use - either normal or italic.
  • lineHeight: The line height to apply to the font, as a decimal. Omitting this property is equivalent to using a value of 1.

Shape

Shape properties are used to express measurements used by the SDK, including border radius, shadow blur, offset and border widths. Their value is a pixel value as a string; e.g. 10px.

The following rules apply to shape properties across platforms:

  • On iOS, the value is interpreted in points (pt);
  • On Android, the value is interpreted in device pixels (dp);
  • On Web, the value is interpreted in pixels.

Markdown

Text formatting is available using a subset of Markdown features on text elements.

Supported Markdown features

FeatureSyntax
Italic*Text*
Bold**Text**
Bold italic***Text***
Bulleted list- Text
Numbered list1. Text
Link[Label](URL)

Markdown

When using the Link syntax, you can point it to one of the subviews you created in the Workbench. The syntax is [Label](subview:Id), where Id is the unique ID of a subview, which can be accessed on the subview page in the Workbench.

Subview ID

Theme editor

The theme editor is located at Configuration > SDK > Container themes.

In the theme editor, the preview switcher on the right enables you to look at your specific cards, to see what they will look like with that theme applied.

The editable elements of the theme are divided into 5 categories in the UI:

  1. Variables
  2. Containers
  3. Top-level card
  4. Subview
  5. System

Each of these is covered below in the Theme reference.

Theme reference

The list below contains a description of the properties of each theme and style element. Each of these are customizable in the Workbench. Their dot notation name references a path expression within the JSON object.

Variables

The three types of variables that can be used throughout the rest of the theme.

Colors

Color variables can be referenced throughout your theme, and to allow quick updates across multiple elements at once. Colors must be specified in hex e.g. #RRGGBB or #RGB.

Variable Colors

Fonts

Font variables can be referenced throughout your theme, and to allow quick updates across multiple elements at once.

They are specified in otf or ttf, woff or woff2 format.

If you allocate a default font in the theme, Atomic will use that font in every place you have not defined a font.

Font sizes

Font size variables can be referenced throughout your theme, and to allow quick updates across multiple elements at once.

Font sizes must be specified in px.

Containers

The Container of streams and subviews.

Stream

Header

Header button
DescriptionNameType
Color for navigation bar buttonsfeed.colors.text.navigationActionColor
Typography style for navigation bar buttonsfeed.typography.navigationActionTypography
Header text, large
DescriptionNameType
Color of large navigation bar titlefeed.colors.text.listTitleColor
Typography style for large navigation bar titlefeed.typography.listTitleTypography
Header text
DescriptionNameType
Color of the navigation bar titlefeed.colors.text.navigationTitleColor
Typography style for the navigation bar titlefeed.typography.navigationTitleTypography
Header background
DescriptionNameType
Background color for the navigation barfeed.colors.background.navigationColor
Header shadow
DescriptionNameType
Color of the navigation bar shadowfeed.colors.shadow.navigationColor
Blur radius for the navigation bar shadowfeed.shape.blur.navigationShadowShape
Vertical offset for the navigation bar shadowfeed.shape.offset.navigationShadowShape
Body background
DescriptionNameType
Background color for the stream container or subview. This property is ignored for the stream container in single card view.feed.colors.background.defaultColor

Background

Subview
Header action
DescriptionNameType
Color for navigation bar buttonsworkflow.colors.text.navigationActionColor
Typography style for navigation bar buttonsworkflow.typography.navigationActionTypography
Header text
DescriptionNameType
Color of the navigation bar titleworkflow.colors.text.navigationTitleColor
Typography style for the navigation bar titleworkflow.typography.navigationTitleTypography
Header background
DescriptionNameType
Background color for the subview navigation barworkflow.colors.background.navigationColor
Header shadow
DescriptionNameType
Color of the subview navigation bar shadowworkflow.colors.shadow.navigationColor
Blur radius for the subview navigation bar shadowworkflow.shape.blur.navigationShadowShape
Vertical offset for the subview navigation bar shadowworkflow.shape.offset.navigationShadowShape
Body background
DescriptionNameType
Background color of a subviewworkflow.colors.background.defaultColor

Top-level card

The default view of a card.

Card

Card background

Background
DescriptionNameType
Background color for a cardfeed.colors.background.cardColor
Border
DescriptionNameType
Color of the border around a cardfeed.colors.border.cardColor
Width of the border around a cardfeed.shape.border.cardShape
Border radius applied to a cardfeed.shape.borderRadius.cardShape
Shadow
DescriptionNameType
Color of the shadow behind a cardfeed.colors.shadow.cardColor
Blur radius for the shadow behind a cardfeed.shape.blur.cardShadowShape
Vertical offset of the shadow behind a cardfeed.shape.offset.cardShadowShape
Category

Category

Typography

Styles applied to the category label, usually displayed in the top left of a card.

DescriptionNameType
Text color for the card categoryfeed.colors.text.categoryColor
Typography style for the card categoryfeed.typography.categoryTypography

Overflow

Button icon

Icon color for the button displayed in the top right of a card, which opens the card menu.

DescriptionNameType
Color of the overflow iconfeed.colors.icon.optionsColor
Button background

(introduced in 23.4.0)

Background color for the button displayed in the top right of a card, which opens the card menu.

DescriptionNameType
Background color of the overflow iconfeed.colors.background.optionsColor
Button states

Icon and background color applied to the card menu button when active.

DescriptionNameType
Color of the overflow icon when in the active statefeed.colors.icon.optionsActiveColor
Background color of the overflow icon when it is in the active statefeed.colors.background.optionsActiveColor
Item icon

Icon color for items displayed in the card menu.

DescriptionNameType
Icon color for items in the overflow menufeed.colors.icon.sheetItemColor
Icon color for items in the overflow menu when activefeed.colors.icon.sheetItemActive & workflow.colors.icon.sheetItemActiveColor
Item text
DescriptionNameType
Text color of items in the overflow menuworkflow.colors.text.sheetItem & feed.colors.text.sheetItemColor
Text color of items in the overflow menu when activeworkflow.colors.text.sheetItemActive & feed.colors.text.sheetItemActiveColor
Typography style applied to overflow menu itemsworkflow.typography.sheetItem & feed.typography.sheetItemTypography
Item background, active
DescriptionNameType
Background color applied to overflow menu items when they are in the active stateworkflow.colors.background.sheetItemActive & feed.colors.background.sheetColor
DescriptionNameType
Color of the divider displayed between item groups in the overflow menuworkflow.colors.border.sheetItemDivider & feed.colors.border.sheetItemDividerColor
DescriptionNameType
Background color displayed behind the overflow menu when it is on screenfeed.colors.overlay.sheet & workflow.colors.overlay.sheetColor
Border radius for the overflow menufeed.shape.borderRadius.sheetShape

Color fill behind the menu when open, which obscures the background content and brings focus to the open menu. Applies to iOS (stream container and single card view) and Android (single card view).

DescriptionNameType
Color fill behind the menufeed.colors.overlay.sheet.color & workflow.colors.overlay.sheet.colorColor
Headline

Headline

Typography

Styles applied to headline elements in cards.

DescriptionNameType
Text color of the headline textfeed.colors.text.headlineColor
Typography style to apply to headlinesfeed.typography.headlineTypography
Body

Body text

Text

Styles applied to body text - such as that inside of text blocks.

DescriptionNameType
Text color for body textfeed.colors.text.bodyColor
Typography style for body textfeed.typography.bodyTypography
DescriptionNameType
Color to use for links in body textfeed.colors.text.linkColor
Icon
DescriptionNameType
Color of optional icon displayed to the left of body textfeed.colors.icon.bodyColor
Bullet point
DescriptionNameType
Color for bullets displayed in body text (using Markdown)feed.colors.icon.bulletColor
Typography style for bulletsfeed.typography.bulletTypography
Input

Input

Label inline/Value stacked

Color and text style for the label on inline date pickers and dropdowns, and the value on stacked date pickers and dropdowns. This style is also used for labels on steppers and switches, and the entered value in text or number inputs

DescriptionNameType
Text color to use for primary textworkflow.colors.text.primaryColor
Typography style for primary textworkflow.typography.primaryTypography
Label stacked

Color and text style for the label on stacked date pickers and dropdowns.

DescriptionNameType
Text color to use for pinned text (less emphasis)workflow.colors.text.pinnedColor
Typography style for pinned textworkflow.typography.pinnedTypography
Value inline

Color and text style for the value on inline date pickers and dropdowns.

DescriptionNameType
Text color to use for secondary textworkflow.colors.text.secondaryColor
Typography style for secondary textworkflow.typography.secondaryTypography
Placeholder text

Color for placeholder text in a text or number input.

DescriptionNameType
Color to use for placeholder text in input fieldsworkflow.colors.text.hintColor

Dropdown

Styles applied to dropdown components (dropdowns and date pickers).

DescriptionNameType
Color of the icon displayed to the right of the dropdownworkflow.colors.icon.dropdownColor

Validation

Validation text

Styles applied to validation messages on subviews.

DescriptionNameType
Text color for validation messagesworkflow.colors.text.errorColor
Typography style for validation messagesworkflow.typography.errorTypography
Stroke highlight
DescriptionNameType
Color to use for the border on focused inputsworkflow.colors.border.inputActiveColor
Color to use for the border on non-focused inputsworkflow.colors.border.inputInactiveColor
Border
DescriptionNameType
Color to use for the border around a subview componentworkflow.colors.border.componentColor
Background
DescriptionNameType
Background color of a subview componentworkflow.colors.background.componentColor
Switch

Styles applied to binary switches on subviews.

Switch

Unchecked
DescriptionNameType
Color for the thumb on the switch when offworkflow.colors.icon.switchOffColor
Color for the track when the switch is offworkflow.colors.background.switchOffColor
Checked
DescriptionNameType
Color for the thumb on the switch when onworkflow.colors.icon.switchOnColor
Color for the track when the switch is onworkflow.colors.background.switchOnColor
Stepper

Styles applied to numeric stepper components on subviews.

Stepper

Button enabled
DescriptionNameType
Color of the icon inside a stepper buttonworkflow.colors.icon.stepperColor
Background color of the stepper buttonsworkflow.colors.background.stepperColor
Button disabled
DescriptionNameType
Color of the icon inside a stepper button when disabledworkflow.colors.icon.stepperDisabledColor
Background color of stepper buttons when disabledworkflow.colors.background.stepperDisabledColor
Media

Image and video

Border
DescriptionNameType
Color for border around media elementsfeed.colors.border.mediaColor
Border radius for media elementsfeed.shape.borderRadius.mediaShape
Video tint
DescriptionNameType
Color for overlay on videos (the play button sits on top of this overlay)feed.colors.overlay.mediaBannerColor
Video play button
DescriptionNameType
Icon color for play button on videosfeed.colors.icon.mediaControlColor
Background color for play button on videosfeed.colors.background.mediaControlColor
Loading/empty state, stream
DescriptionNameType
Background color for media while it is loadingfeed.colors.background.mediaColor
Color for icon indicating media type while loadingfeed.colors.icon.mediaBannerColor
Loading/empty state, subview
DescriptionNameType
Background color for media while it is loadingworkflow.colors.background.mediaColor
Color for icon indicating media type while loadingworkflow.colors.icon.mediaBannerColor

Thumbnail

Thumb label
DescriptionNameType
Color for the title on thumbnail mediafeed.colors.text.mediaTitleColor
Typography style for the title on thumbnail mediafeed.typography.mediaTitleTypography
Thumb description
DescriptionNameType
Color for the subtitle on thumbnail mediafeed.colors.text.mediaSubtitleColor
Typography style for the subtitle on thumbnail mediafeed.typography.mediaSubtitleTypography
Thumb action
DescriptionNameType
Color for the action title on thumbnail media (e.g. Watch, View)feed.colors.text.mediaActionColor
Typography style for the action title on thumbnail mediafeed.typography.mediaActionTypography
Thumb background
DescriptionNameType
Background color for media using the thumbnail formatfeed.colors.background.mediaThumbnailColor
Button

Styles applied to actions on cards (submit, dismiss, snooze, link and voting buttons).

Action

A wide variety of style attributes are available here to create a distinctive appearance for your application's action buttons. More detail about how these styles are applied can be found in the action button variants section.

Subview

The secondary layout, accessed by link-buttons on the top-level.

Headline

Headline

Typography

Styles applied to headline elements in the subview.

DescriptionNameType
Text color of the headline textfeed.colors.text.headlineColor
Typography style to apply to headlinesfeed.typography.headlineTypography
Body
Text
DescriptionNameType
Text color for body textworkflow.colors.text.bodyColor
Typography style for body textworkflow.typography.bodyTypography
DescriptionNameType
Color to use for links in body textworkflow.colors.text.linkColor
Icon
DescriptionNameType
Color of optional displayed to the left of body textworkflow.colors.icon.bodyColor
Input

Input

Label inline/Value stacked

Color and text style for the label on inline date pickers and dropdowns, and the value on stacked date pickers and dropdowns. This style is also used for labels on steppers and switches, and the entered value in text or number inputs

DescriptionNameType
Text color to use for primary textworkflow.colors.text.primaryColor
Typography style for primary textworkflow.typography.primaryTypography
Label stacked

Color and text style for the label on stacked date pickers and dropdowns.

DescriptionNameType
Text color to use for pinned text (less emphasis)workflow.colors.text.pinnedColor
Typography style for pinned textworkflow.typography.pinnedTypography
Value inline

Color and text style for the value on inline date pickers and dropdowns.

DescriptionNameType
Text color to use for secondary textworkflow.colors.text.secondaryColor
Typography style for secondary textworkflow.typography.secondaryTypography
Placeholder text

Color for placeholder text in a text or number input.

DescriptionNameType
Color to use for placeholder text in input fieldsworkflow.colors.text.hintColor

Dropdown

Styles applied to dropdown components (dropdowns and date pickers).

DescriptionNameType
Color of the icon displayed to the right of the dropdownworkflow.colors.icon.dropdownColor

Validation

Validation text

Styles applied to validation messages on subviews.

DescriptionNameType
Text color for validation messagesworkflow.colors.text.errorColor
Typography style for validation messagesworkflow.typography.errorTypography
Stroke highlight
DescriptionNameType
Color to use for the border on focused inputsworkflow.colors.border.inputActiveColor
Color to use for the border on non-focused inputsworkflow.colors.border.inputInactiveColor
Border
DescriptionNameType
Color to use for the border around a subview componentworkflow.colors.border.componentColor
Background
DescriptionNameType
Background color of a subview componentworkflow.colors.background.componentColor
Switch

Styles applied to binary switches on subviews.

Switch

Unchecked
DescriptionNameType
Color for the thumb on the switch when offworkflow.colors.icon.switchOffColor
Color for the track when the switch is offworkflow.colors.background.switchOffColor
Checked
DescriptionNameType
Color for the thumb on the switch when onworkflow.colors.icon.switchOnColor
Color for the track when the switch is onworkflow.colors.background.switchOnColor
Stepper

Styles applied to numeric stepper components on subviews.

Stepper

Button enabled
DescriptionNameType
Color of the icon inside a stepper buttonworkflow.colors.icon.stepperColor
Background color of the stepper buttonsworkflow.colors.background.stepperColor
Button disabled
DescriptionNameType
Color of the icon inside a stepper button when disabledworkflow.colors.icon.stepperDisabledColor
Background color of stepper buttons when disabledworkflow.colors.background.stepperDisabledColor
Media

Image and video

Border
DescriptionNameType
Color for border around media elementsfeed.colors.border.mediaColor
Border radius for media elementsfeed.shape.borderRadius.mediaShape
Video tint
DescriptionNameType
Color for overlay on videos (the play button sits on top of this overlay)feed.colors.overlay.mediaBannerColor
Video play button
DescriptionNameType
Icon color for play button on videosfeed.colors.icon.mediaControlColor
Background color for play button on videosfeed.colors.background.mediaControlColor
Loading/empty state, stream
DescriptionNameType
Background color for media while it is loadingfeed.colors.background.mediaColor
Color for icon indicating media type while loadingfeed.colors.icon.mediaBannerColor
Loading/empty state, subview
DescriptionNameType
Background color for media while it is loadingworkflow.colors.background.mediaColor
Color for icon indicating media type while loadingworkflow.colors.icon.mediaBannerColor

Thumbnail

Thumb label
DescriptionNameType
Color for the title on thumbnail mediafeed.colors.text.mediaTitleColor
Typography style for the title on thumbnail mediafeed.typography.mediaTitleTypography
Thumb description
DescriptionNameType
Color for the subtitle on thumbnail mediafeed.colors.text.mediaSubtitleColor
Typography style for the subtitle on thumbnail mediafeed.typography.mediaSubtitleTypography
Thumb action
DescriptionNameType
Color for the action title on thumbnail media (e.g. Watch, View)feed.colors.text.mediaActionColor
Typography style for the action title on thumbnail mediafeed.typography.mediaActionTypography
Thumb background
DescriptionNameType
Background color for media using the thumbnail formatfeed.colors.background.mediaThumbnailColor
Button

Styles applied to actions on subviews.

Button

A wide variety of style attributes are available here to create a distinctive appearance for your application's action buttons. More detail about how these styles are applied can be found in the action button variants section.

System

All other system elements, including states, feedback, accessibility, and footer elements.

Quick actions

Styles applied to the card completion animation and swipe actions, which appear when a card is swiped left.

Dismiss
DescriptionNameType
Background color of the primary swipe actionfeed.colors.background.quickActionPrimaryColor
Color of the icon for the primary swipe actionfeed.colors.icon.quickActionPrimaryColor
Snooze
DescriptionNameType
Background color of the secondary swipe actionfeed.colors.background.quickActionSecondaryColor
Color of the icon for the secondary swipe actionfeed.colors.icon.quickActionSecondaryColor
Card completion

Card completion

Icon
DescriptionNameType
Color of the tick icon displayed in the card completion animationfeed.colors.icon.cardCompletionColor
Background
DescriptionNameType
Background color of the card completion animationfeed.colors.background.cardCompletionColor
Error states

Styles applied to error banners on the card list. Error banners appear from the top of the screen when there is no internet connection on the card list.

DescriptionNameType
Text color for the error state bannerfeed.colors.text.bannerColor
Typography of the error state bannerfeed.typography.bannerColor

Styles applied to error banners on the card list. Error banners appear from the top of the screen when there is no internet connection on the card list.

DescriptionNameType
Text color for the error state bannerworkflow.colors.text.bannerColor
Typography of the error state bannerworkflow.typography.bannerColor
DescriptionNameType
Background color for the error state bannerfeed.colors.background.bannerColor
DescriptionNameType
Background color for the error state bannerworkflow.colors.background.bannerColor
Overlay message

Styles applied to the error overlay on the card list. The error overlay appears if the card list fails to load when there are no existing cards on screen.

DescriptionNameType
Text color for the error overlay titlefeed.colors.text.errorOverlayTitleColor
Typography style for the error overlay titlefeed.typography.errorOverlayTitleTypography
Overlay button label
DescriptionNameType
Text color for the error overlay's action buttonfeed.colors.text.errorOverlayActionColor
Typography style for the error overlay's action buttonfeed.typography.errorOverlayActionTypography
Loading states

Loading spinner

Icon

Styles applied to the loading spinner on the card list.

DescriptionNameType
Color of the loading spinner iconfeed.colors.icon.loadingSpinnerColor
Background
DescriptionNameType
Background color for the loading spinnerfeed.colors.background.loadingSpinnerColor
Empty states
Icon

Styles applied to the empty list state. This state is displayed where there are no cards in the list.

DescriptionNameType
Color for the icon on the empty list statefeed.colors.icon.listEmptyStateColor
Text
DescriptionNameType
Text color for the empty list statefeed.colors.text.listEmptyStateColor
Typography style for the empty list statefeed.typography.listEmptyStateTypography
Toast messages

Toast

Text, stream
DescriptionNameType
Text color for the toast messagefeed.colors.text.toastColor
Typography style for the toast messagefeed.typography.toastTypography
Text, subview
DescriptionNameType
Text color for the toast messageworkflow.colors.text.toastColor
Typography style for the toast messageworkflow.typography.toastTypography
Button label, stream
DescriptionNameType
Text color for the toast action textfeed.colors.text.toastActionColor
Typography style for the toast action textfeed.typography.toastActionTypography
Button label, subview
DescriptionNameType
Text color for the subview toast action textworkflow.colors.text.toastActionColor
Typography style for the subview toast action textworkflow.typography.toastActionTypography
Background, stream

Styles applied to toast messages, such as those displayed when a card is dismissed or snoozed.

DescriptionNameType
Background color of the toast messagefeed.colors.background.toastColor
Background, subview
DescriptionNameType
Background color of the subview toast messageworkflow.colors.background.toastColor
User feedback
Unselected

Styles applied to radio groups on the card feedback screen only.

DescriptionNameType
Color to use for unselected radio group itemsworkflow.colors.icon.selectionIndicatorColor
Selected
DescriptionNameType
Color to use for the selected radio group itemworkflow.colors.icon.selectionIndicatorActiveColor
Accessibility
Focus ring

Styles applied to SDK elements when they become focused using the keyboard (Web SDK only).

DescriptionNameType
Color to use as the border of the current keyboard-focused elementfeed.colors.border.focusColor
Color to use as the border of the subview current keyboard-focused elementworkflow.colors.border.focusColor
Message

Styles applied to the optional message displayed at the footer of the card list. This message can be enabled in your SDK integration, and is never displayed in single card view.

DescriptionNameType
Text color for the card list footerfeed.colors.text.footerMessageColor
Typography style for the card list footerfeed.typography.footerMessageTypography