Supported appearance options

Review the appearance options available for Embedded Components.

The embedded components Figma UI toolkit contains every component, common patterns, and an example application. You can use it to visualise and design embedded UIs in your website.

You can use any of the following appearance properties on the customisation page. This page also automatically generates a snippet for you to use on your site based on the specified appearance parameters.

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 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 all spacing values derive from. 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 colour used throughout embedded components. Set this to your primary brand colour. This accepts hex values or RGB/HSL strings.
`colorBackground`	string	`#FFFFFF`
The background colour for embedded components, including overlays, tooltips, and popovers. This accepts hex values or RGB/HSL strings.
`colorText`	string	`#444444`
The colour used for normal text. This accepts hex values or RGB/HSL strings.
`colorDanger`	string	`#DF1B41`
The colour 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 colour used as a background for primary buttons. This accepts hex values or RGB/HSL strings.
`buttonPrimaryColorBorder`	string	`#0074D4`
The border colour used for primary buttons. This accepts hex values or RGB/HSL strings.
`buttonPrimaryColorText`	string	`#FFFFFF`
The text colour used for primary buttons. This accepts hex values or RGB/HSL strings.
`buttonSecondaryColorBackground`	string	`#EBEEF1`
The colour used as a background for secondary buttons. This accepts hex values or RGB/HSL strings.
`buttonSecondaryColorBorder`	string	`#EBEEF1`
The colour used as a border for secondary buttons. This accepts hex values or RGB/HSL strings.
`buttonSecondaryColorText`	string	`#393B3E`
The text colour used for secondary buttons. This accepts hex values or RGB/HSL strings.
`colorSecondaryText`	string	`#717171`
The colour used for secondary text. This accepts hex values or RGB/RGBA/HSL strings.
`actionPrimaryColorText`	string	`#0074D4`
The colour 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 value.
`actionPrimaryTextDecorationColor`	string	`#0074D4`
The colour 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 value.
`actionPrimaryTextDecorationThickness`	string	`1px`
The thickness of text decoration of primary actions and links. This accepts a valid text decoration thickness value.
`actionSecondaryColorText`	string	`#444444`
The colour 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 value.
`actionSecondaryTextDecorationColor`	string	`#0074D4`
The colour 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 value.
`actionSecondaryTextDecorationThickness`	string	`1px`
The thickness of text decoration of secondary actions and links. This accepts a valid text decoration thickness value.
`badgeNeutralColorBackground`	string	`#E4ECEC`
The background colour 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 colour 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 colour 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 colour used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
`badgeSuccessColorText`	string	`#05690D`
The text colour used to reinforce a successful outcome in status badges. This accepts hex values or RGB/HSL strings.
`badgeSuccessColorBorder`	string	`#B4E1A2`
The border colour used to reinforce a successful outcome in status badges. This accepts hex values or RGB/RGBA/HSL strings.
`badgeWarningColorBackground`	string	`#FCEEBA`
The background colour 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 colour 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 colour 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 colour 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 colour 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 colour 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.
`offsetBackgroundColor`	string	`#FFFFFF`
The background colour 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 colour used for form items. This accepts hex values or RGB/HSL strings.
`colorBorder`	string	`#D7D7D7`
The colour used for borders throughout the component. This accepts hex values or RGB/RGBA/HSL strings.
`formHighlightColorBorder`	string	`#D7D7D7`
The colour used to highlight form items when focused. This accepts hex values or RGB/RGBA/HSL strings.
`formAccentColor`	string	`#0074D4`
The colour used for to fill in form items such as tickboxes, radio buttons and switches. This accepts hex values or RGB/HSL strings.
`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 to use for the overlay throughout embedded components. Set this number to control the z-order of the overlay.
`overlayBackdropColor`	string	`#F9E4F1`
The backdrop colour 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 value.
`bodyMdFontWeight`	string	`400`
The font weight for the medium body typography. Body typography variables accept a valid font weight value.
`bodySmFontSize`	string	`14px`
The font size for the small body typography. Body typography variables accept a valid font size value.
`bodySmFontWeight`	string	`400`
The font weight for the small body typography. Body typography variables accept a valid font weight value.
`headingXlFontSize`	string	`28px`
The font size for the extra large heading typography. Heading typography variables accept a valid font size value.
`headingXlFontWeight`	string	`700`
The font weight for the extra large heading typography. Heading typography variables accept a valid font weight value.
`headingXlTextTransform`	string	`uppercase`
The text transform for the extra large heading typography. Heading typography variables accept a valid text transform value.
`headingLgFontSize`	string	`24px`
The font size for the large heading typography. Heading typography variables accept a valid font size value.
`headingLgFontWeight`	string	`700`
The font weight for the large heading typography. Heading typography variables accept a valid font weight value.
`headingLgTextTransform`	string	`uppercase`
The text transform for the large heading typography. Heading typography variables accept a valid text transform value.
`headingMdFontSize`	string	`20px`
The font size for the medium heading typography. Heading typography variables accept a valid font size value.
`headingMdFontWeight`	string	`700`
The font weight for the medium heading typography. Heading typography variables accept a valid font weight value.
`headingMdTextTransform`	string	`uppercase`
The text transform for the medium heading typography. Heading typography variables accept a valid text transform value.
`headingSmFontSize`	string	`16px`
The font size for the small heading typography. Heading typography variables accept a valid font size value.
`headingSmFontWeight`	string	`700`
The font weight for the small heading typography. Heading typography variables accept a valid font weight value.
`headingSmTextTransform`	string	`uppercase`
The text transform for the small heading typography. Heading typography variables accept a valid text transform value.
`headingXsFontSize`	string	`12px`
The font size for the extra small heading typography. Heading typography variables accept a valid font size value.
`headingXsFontWeight`	string	`700`
The font weight for the extra small heading typography. Heading typography variables accept a valid font weight value.
`headingXsTextTransform`	string	`uppercase`
The text transform for the extra small heading typography. Heading typography variables accept a valid text transform value.
`labelMdFontSize`	string	`14px`
The font size for the medium label typography. Label typography variables accept a valid font size value.
`labelMdFontWeight`	string	`400`
The font weight for the medium label typography. Label typography variables accept a valid font weight value.
`labelMdTextTransform`	string	`uppercase`
The text transform for the medium label typography. Label typography variables accept a valid text transform value.
`labelSmFontSize`	string	`12px`
The font size for the small label typography. Label typography variables accept a valid font size value.
`labelSmFontWeight`	string	`400`
The font weight for the small label typography. Label typography variables accept a valid font weight value.
`labelSmTextTransform`	string	`uppercase`
The text transform for the small label typography. Label typography variables accept a valid text transform value.

Overlays

The overlays property controls whether to use a dialogue window (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`.