{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"redocly_category":"Guides","type":"markdown"},"seo":{"title":"Manage styling for the Mosaic-hosted SSO experience","description":"Everything about Mosaic Journeys, SDKs, and APIs","siteUrl":"https://developer.transmitsecurity.com/","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"manage-styling-for-the-mosaic-hosted-sso-experience","__idx":0},"children":["Manage styling for the Mosaic-hosted SSO experience"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style"]}," section in ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Admin Portal"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Management"]}," lets you create and manage reusable styles for the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mosaic-hosted SSO experience"]},". From here, you can configure elements such as fonts, logos, colors, card layout, and input field appearance so that the hosted SSO experience reflects your brand identity."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This styling applies to supported screens in the Mosaic-hosted SSO experience, such as:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Login screens"]}," where users select one or more authentication methods."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["OTP verification screens"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Passkey screens"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Collect Information screens:"]}," journey steps that collect information from the user."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Success or completion screens:"]}," screens shown when the flow is successfully completed."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/styling-screen.68361c5870a7a3d0059e6b73d0ce94c86be902896f512c28edb190bec1275e56.9c1bb791.gif","alt":"Style screen"},"children":[]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add Styles"]}," page is divided into two main sections: the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["configuration panel"]},", which includes style identification fields and expandable setting groups, and a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["real-time preview"]},", which shows how the Mosaic-hosted SSO experience will appear with desktop and mobile view toggles."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At the top of the page, before the settings groups, there are two identification fields:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style Name:"]}," the name used to identify the style within the portal."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style ID:"]}," the automatically generated unique identifier of the style, which can be used for API references."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"assign-styles-to-sso-clients","__idx":1},"children":["Assign styles to SSO clients"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To apply a style to SSO UIs, it is ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["mandatory to associate the style with the relevant SSO client"]},". This association is what makes the style available for that client in the SSO flow at runtime."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create the style in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Admin Portal"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style"]}," section and save it."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style"]}," page, locate the relevant style card, click the vertical three-dot menu, and select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Assign clients"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the popup, review the list of existing SSO clients and assign the style to the relevant ones."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about how SSO clients are configured and grouped, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/user/sso_orchestration/sso_config_service#client-groups"},"children":["Configure SSO Service"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"use-styles-in-sso-journeys","__idx":2},"children":["Use styles in SSO journeys"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In SSO journeys, you can preview and use a style in the form builder for supported client-facing steps that render the Mosaic-hosted SSO experience. Currently, this applies to the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/login_form"},"children":["Login Form"]}," step and the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/get_info_from_client"},"children":["Collect Information"]}," step."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The style dropdown is available only in SSO journeys, and a style appears there only if it has already been associated with the relevant SSO client."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use a style in one of these steps:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create the style in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Admin Portal"]}," > ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Style"]}," section and save it."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If you are working with an SSO journey, assign the style to the relevant SSO client first."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create or open the relevant journey."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/login_form"},"children":["Login Form"]}," step or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/journeys/get_info_from_client"},"children":["Collect Information"]}," step."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the step configuration, open ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Views & Actions"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["In the top-right corner of the editor, select the style you want to preview on the step."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Save the step configuration."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In addition to previewing a style, ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Views & Actions"]}," lets you customize the content of the displayed form, including its text, fields, and field behavior. For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/guides/orchestration/getting-started/form_builder"},"children":["Build forms with the form builder"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"default-fallback-behavior","__idx":3},"children":["Default fallback behavior"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a style is deleted or a client is unassociated from its style, the affected client automatically falls back to the default rendering. This means hosted pages will never break due to a missing style, but the visual appearance will change immediately and without warning to end users. The default Mosaic style cannot be deleted."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customizable-attributes-list","__idx":4},"children":["Customizable attributes list"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"general","__idx":5},"children":["General"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configures the overall look and feel of the standard authentication experience."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Setting"},"children":["Setting"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Uploads the brand logo displayed on the pages. Recommended: PNG or SVG with transparent background. Max: 50KB."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo placement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Determines where the logo is positioned on the page, for example in the header, footer, card top, or card bottom."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo alignment"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Defines the horizontal alignment of the logo, for example left, center, or right."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Default language"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the default language used for the authentication page text. If a browser does not specify a language or requests an unsupported language, the default language is shown."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Supported languages"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Lists the languages supported by the style. A language is supported when specified either in the request parameter or in the browser header."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font family"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Defines the font family used for all text across the authentication pages."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Text color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the primary text color used for body text and labels throughout the pages, in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mosaic logo"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Display Mosaic logo"]}," toggle enables or disables the Mosaic logo at the bottom of the card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Privacy notice"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Enable Privacy Notice"]}," toggle enables or disables a privacy notice on the authentication pages. When enabled, it displays: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["How we use cookies - This website only uses strictly necessary cookies that are essential for core functions like security, network management, and accessibility. We do not use any tracking or advertising cookies."]}]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"background","__idx":6},"children":["Background"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customizes the page background and layout."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Setting"},"children":["Setting"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background Color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the page background color in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Background Image"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Uploads a background image that overrides the page background color."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Page Background"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls how and where the page background is anchored, for example top, center, or bottom."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"buttons","__idx":7},"children":["Buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Defines the colors for all button types used across the pages."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Setting"},"children":["Setting"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Primary button background color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the background color of primary buttons, such as main actions like ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Continue"]},", in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Primary button text color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the text color of primary buttons in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondary button background color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the background color of secondary buttons, which are typically used for alternative actions and can also be transparent, in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondary button text color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the text color of secondary buttons in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondary button border color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the border color of secondary buttons in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Tertiary button color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the color of tertiary buttons, which are lower-emphasis and typically link-like, in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Buttons border radius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the corner radius applied to all buttons through a slider and numeric input in pixels."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"card","__idx":8},"children":["Card"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customizes the style and alignment of the card, which is the main container that holds authentication forms and content."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Setting"},"children":["Setting"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card position"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the position of the card within the page, for example left, center, or right."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card content alignment"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the alignment of the content inside the card, for example left, center, or right."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card width"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the card width in pixels through a slider and numeric input. It is applied as a max width and collapses to full width on mobile."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card background color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the background color of the card in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Card border radius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the corner radius of the card through a slider and numeric input in pixels."]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"input-fields","__idx":9},"children":["Input fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customizes the appearance of input fields and their labels (for example, username and password fields)."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"table"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Setting"},"children":["Setting"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Input field background color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the background color of input fields in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Input field label color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the color of labels associated with input fields in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Input field text color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the color of the text entered by the user in input fields in RGB or HEX."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Input field border radius"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sets the corner radius of input fields through a slider and numeric input in pixels."]}]}]}]}]}]}]},"headings":[{"value":"Manage styling for the Mosaic-hosted SSO experience","id":"manage-styling-for-the-mosaic-hosted-sso-experience","depth":1},{"value":"Assign styles to SSO clients","id":"assign-styles-to-sso-clients","depth":2},{"value":"Use styles in SSO journeys","id":"use-styles-in-sso-journeys","depth":2},{"value":"Default fallback behavior","id":"default-fallback-behavior","depth":2},{"value":"Customizable attributes list","id":"customizable-attributes-list","depth":2},{"value":"General","id":"general","depth":3},{"value":"Background","id":"background","depth":3},{"value":"Buttons","id":"buttons","depth":3},{"value":"Card","id":"card","depth":3},{"value":"Input fields","id":"input-fields","depth":3}],"frontmatter":{"markdown":{"toc":{"depth":2}},"seo":{"title":"Manage styling for the Mosaic-hosted SSO experience"}},"lastModified":"2026-06-15T09:14:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/guides/platform/hosted_ui_styles","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}