# Supported appearance options Review the appearance options available for Embedded Components. The [embedded components Figma UI toolkit](https://www.figma.com/community/file/1438614134095442934) contains every component, common patterns, and an example application. You can use it to visualize and design embedded UIs in your website. You can use any of the following `appearance` properties on [the customization page](https://docs.stripe.com/connect/customize-connect-embedded-components.md). This page also automatically generates a snippet for you to use on your site based on the specified `appearance` parameters. These options are the only way to change styles in Connect embedded components. You can’t override their styles with CSS selectors or other mechanisms. > #### Necessary popups > > Some behavior in embedded components, such as [user authentication](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components), is always presented in a popup. You can’t customize the embedded component to eliminate such popups. To view the `variables` object for mobile SDKs, refer to the links below: - [iOS](https://stripe.dev/stripe-ios/stripeconnect/documentation/stripeconnect/embeddedcomponentmanager/appearance) - [Android](https://stripe.dev/stripe-android/connect/com.stripe.android.connect.appearance/index.html) ## Variables The `variables` object includes the following optional properties, which apply to all Connect embedded components in your application. ### Commonly used variables | Name | Type | Example Value | | ----------------- | ------ | ------------- | | `fontFamily` | string | `sans-serif` | The [font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) value used throughout embedded components. If an embedded component inherits a `font-family` value from an element on your site in which it’s placed, this setting overrides that inheritance. | | `fontSizeBase` | string | `16px` | The baseline font size set on the embedded component root. This scales the value of other font size variables. This supports pixel values only. | | `spacingUnit` | string | `8px` | The base spacing unit that derives all spacing values. Increase or decrease this value to make your layout more or less spacious. This supports pixel values only. | | `borderRadius` | string | `15px` | The general border radius used in embedded components. This sets the default border radius for all components. This supports pixel values only. | | `colorPrimary` | string | `#0074D4` | The primary color used throughout embedded components. Set this to your primary brand color. This accepts hex values or RGB/HSL strings. | | `colorBackground` | string | `#FFFFFF` | The background color for embedded components, including overlays, tooltips, and popovers. This accepts hex values or RGB/HSL strings. | | `colorText` | string | `#444444` | The color used for regular text. This accepts hex values or RGB/HSL strings. | | `colorDanger` | string | `#DF1B41` | The color used to indicate errors or destructive actions. This accepts hex values or RGB/HSL strings. | ### Less commonly used variables | Name | Type | Example Value | | ---------------------------------------- | ------ | ------------- | | `buttonPrimaryColorBackground` | string | `#0074D4` | The color used as a background for primary buttons. This accepts hex values or RGB/HSL strings. | | `buttonPrimaryColorBorder` | string | `#0074D4` | The border color used for primary buttons. This accepts hex values or RGB/HSL strings. | | `buttonPrimaryColorText` | string | `#FFFFFF` | The text color used for primary buttons. This accepts hex values or RGB/HSL strings. | | `buttonSecondaryColorBackground` | string | `#EBEEF1` | The color used as a background for secondary buttons. This accepts hex values or RGB/HSL strings. | | `buttonSecondaryColorBorder` | string | `#EBEEF1` | The color used as a border for secondary buttons. This accepts hex values or RGB/HSL strings. | | `buttonSecondaryColorText` | string | `#393B3E` | The text color used for secondary buttons. This accepts hex values or RGB/HSL strings. | | `buttonDangerColorBackground` | string | `#E61947` | The color that we use as the background for danger buttons to indicate destructive actions. This value accepts hex values or RGB/HSL strings. | | `buttonDangerColorBorder` | string | `#E61947` | The border color for danger buttons to indicate destructive actions. This accepts hex values or RGB/HSL strings. | | `buttonDangerColorText` | string | `#FFFFFF` | The text color for danger buttons to indicate destructive actions. This accepts hex values or RGB/HSL strings. | | `buttonPaddingX` | string | `4px` | The horizontal padding for buttons. This supports pixel values only. | | `buttonPaddingY` | string | `4px` | The vertical padding for buttons. This supports pixel values only. | | `buttonLabelFontSize` | string | `16px` | The font size for button label typography. Button label typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `buttonLabelFontWeight` | string | `400` | The font weight for button label typography. Button label typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `buttonLabelTextTransform` | string | `uppercase` | The text transform for button label typography. Button label typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `colorSecondaryText` | string | `#717171` | The color used for secondary text. This accepts hex values or RGB/RGBA/HSL strings. | | `actionPrimaryColorText` | string | `#0074D4` | The color used for primary actions and links. This accepts hex values or RGB/HSL strings. | | `actionPrimaryTextDecorationLine` | string | `underline` | The line type used for text decoration of primary actions and links. This accepts a valid [text decoration line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) value. | | `actionPrimaryTextDecorationColor` | string | `#0074D4` | The color used for text decoration of primary actions and links. This accepts hex values or RGB/HSL strings. | | `actionPrimaryTextDecorationStyle` | string | `solid` | The style of text decoration of primary actions and links. This accepts a valid [text decoration style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) value. | | `actionPrimaryTextDecorationThickness` | string | `1px` | The thickness of text decoration of primary actions and links. This accepts a valid [text decoration thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) value. | | `actionPrimaryTextTransform` | string | `uppercase` | The text transform for the primary actions and links. This accepts accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `actionSecondaryColorText` | string | `#444444` | The color used for secondary actions and links. This accepts hex values or RGB/HSL strings. | | `actionSecondaryTextDecorationLine` | string | `underline` | The line type used for text decoration of secondary actions and links. This accepts a valid [text decoration line](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line) value. | | `actionSecondaryTextDecorationColor` | string | `#0074D4` | The color used for text decoration of secondary actions and links. This accepts hex values or RGB/HSL strings. | | `actionSecondaryTextDecorationStyle` | string | `solid` | The style of text decoration of secondary actions and links. This accepts a valid [text decoration style](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style) value. | | `actionSecondaryTextDecorationThickness` | string | `1px` | The thickness of text decoration of secondary actions and links. This accepts a valid [text decoration thickness](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness) value. | | `actionSecondaryTextTransform` | string | `uppercase` | The text transform for the secondary actions and links. This accepts accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `badgeNeutralColorBackground` | string | `#E4ECEC` | The background color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings. | | `badgeNeutralColorText` | string | `#545969` | The text color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/HSL strings. | | `badgeNeutralColorBorder` | string | `#CBD5D6` | The border color used to represent neutral state or lack of state in status badges. This accepts hex values or RGB/RGBA/HSL strings. | | `badgeSuccessColorBackground` | string | `#CEF6BB` | The background color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings. | | `badgeSuccessColorText` | string | `#05690D` | The text color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings. | | `badgeSuccessColorBorder` | string | `#B4E1A2` | The border color used to reinforce a successful outcome in status badges. This accepts hex values or RGB/RGBA/HSL strings. | | `badgeWarningColorBackground` | string | `#FCEEBA` | The background color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings. | | `badgeWarningColorText` | string | `#A82C00` | The text color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/HSL strings. | | `badgeWarningColorBorder` | string | `#F5DA80` | The border color used in status badges to highlight things that might require action, but are optional to resolve. This accepts hex values or RGB/RGBA/HSL strings. | | `badgeDangerColorBackground` | string | `#F9E4F1` | The background color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings. | | `badgeDangerColorText` | string | `#B3063D` | The text color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/HSL strings. | | `badgeDangerColorBorder` | string | `#F2C9E3` | The border color used in status badges for high-priority, critical situations that the user must address immediately, and to indicate failed or unsuccessful outcomes. This accepts hex values or RGB/RGBA/HSL strings. | | `badgePaddingX` | string | `6px` | The horizontal padding for badges. This supports pixel values only. | | `badgePaddingY` | string | `2px` | The vertical padding for badges. This supports pixel values only. | | `badgeLabelFontSize` | string | `14px` | The font size for badge label typography. Badge label typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `badgeLabelFontWeight` | string | `400` | The font weight for badge label typography. Badge label typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `badgeLabelTextTransform` | string | `uppercase` | The text transform for badge label typography. Badge label typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `offsetBackgroundColor` | string | `#FFFFFF` | The background color used when highlighting information, like the selected row on a table or particular piece of UI. This accepts hex values or RGB/HSL strings. | | `formBackgroundColor` | string | `#FFFFFF` | The background color used for form items. This accepts hex values or RGB/HSL strings. | | `colorBorder` | string | `#D7D7D7` | The color used for borders throughout the component. This accepts hex values or RGB/RGBA/HSL strings. | | `formHighlightColorBorder` | string | `#D7D7D7` | The color used to highlight form items when focused. This accepts hex values or RGB/RGBA/HSL strings. | | `formAccentColor` | string | `#0074D4` | The color used for to fill in form items like checkboxes, radio buttons and switches. This accepts hex values or RGB/HSL strings. | | `formPlaceholderTextColor` | string | `#AAAAAA` | The color for placeholder text in form items. This accepts hex values or RGB/HSL strings. | | `inputFieldPaddingX` | string | `8px` | The horizontal padding for input fields in forms. This supports pixel values only. | | `inputFieldPaddingY` | string | `4px` | The vertical padding for input fields in forms. This supports pixel values only. | | `tableRowPaddingY` | string | `8px` | The vertical padding for table rows. This supports pixel values only. | | `buttonBorderRadius` | string | `4px` | The border radius used for buttons. This supports pixel values only. | | `formBorderRadius` | string | `6px` | The border radius used for form elements. This supports pixel values only. | | `badgeBorderRadius` | string | `4px` | The border radius used for badges. This supports pixel values only. | | `overlayBorderRadius` | string | `8px` | The border radius used for overlays. This supports pixel values only. | | `overlayZIndex` | number | `1000` | A [z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) to use for the overlay throughout embedded components. Set this number to control the z-order of the overlay. | | `overlayBackdropColor` | string | `#F9E4F1` | The backdrop color when an overlay is opened. This accepts hex values or RGB/RGBA/HSL strings. | | `bodyMdFontSize` | string | `16px` | The font size for the medium body typography. Body typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `bodyMdFontWeight` | string | `400` | The font weight for the medium body typography. Body typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `bodySmFontSize` | string | `14px` | The font size for the small body typography. Body typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `bodySmFontWeight` | string | `400` | The font weight for the small body typography. Body typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingXlFontSize` | string | `28px` | The font size for the extra large heading typography. Heading typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `headingXlFontWeight` | string | `700` | The font weight for the extra large heading typography. Heading typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingXlTextTransform` | string | `uppercase` | The text transform for the extra large heading typography. Heading typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `headingLgFontSize` | string | `24px` | The font size for the large heading typography. Heading typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `headingLgFontWeight` | string | `700` | The font weight for the large heading typography. Heading typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingLgTextTransform` | string | `uppercase` | The text transform for the large heading typography. Heading typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `headingMdFontSize` | string | `20px` | The font size for the medium heading typography. Heading typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `headingMdFontWeight` | string | `700` | The font weight for the medium heading typography. Heading typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingMdTextTransform` | string | `uppercase` | The text transform for the medium heading typography. Heading typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `headingSmFontSize` | string | `16px` | The font size for the small heading typography. Heading typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `headingSmFontWeight` | string | `700` | The font weight for the small heading typography. Heading typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingSmTextTransform` | string | `uppercase` | The text transform for the small heading typography. Heading typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `headingXsFontSize` | string | `12px` | The font size for the extra small heading typography. Heading typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `headingXsFontWeight` | string | `700` | The font weight for the extra small heading typography. Heading typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `headingXsTextTransform` | string | `uppercase` | The text transform for the extra small heading typography. Heading typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `labelMdFontSize` | string | `14px` | The font size for the medium label typography. Label typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `labelMdFontWeight` | string | `400` | The font weight for the medium label typography. Label typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `labelMdTextTransform` | string | `uppercase` | The text transform for the medium label typography. Label typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | | `labelSmFontSize` | string | `12px` | The font size for the small label typography. Label typography variables accept a valid [font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) value. | | `labelSmFontWeight` | string | `400` | The font weight for the small label typography. Label typography variables accept a valid [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) value. | | `labelSmTextTransform` | string | `uppercase` | The text transform for the small label typography. Label typography variables accept a valid [text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) value. | ## Overlays The `overlays` property controls whether to use a dialog (also known as a modal) UI or a drawer UI for overlays. Choose the value that best suits your website. | Name | Type | Example value | | ---------- | ------ | ------------- | | `overlays` | string | `dialog` | The type of overlay embedded components uses. Valid values are `dialog` (default) and `drawer`. |