Style Guide

A Style in the iOS design system library is a set of visual changes applied to a UI component. The MDS uses a functional approach for styling visual components.

Platform availability: iOS 17.0+

When to use:

• Use MDS Styles when you need consistent, themeable styling across your application's UI components.
• Consider inline styling only for one-off customizations that don't need to be reused or themed.

Note: For a list of all available styles, see DesignSystem.Styles.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

API reference

Style Type

A style is a closure that takes the intended UI component as a parameter and returns nothing

                                                        
                                                        
                                                            typealias Style<Component> = (Component) -> Void
                                                        
                                                            

Example declarations:

                                                        
                                                        
                                                            let primaryButtonStyle: Style<UIButton>
                                                        let roundImageViewStyle: Style<UIImageView>
                                                        
                                                            

Style Operator

The <> operator merges two styles together, creating a new style that applies both. This supports extending existing styles without modifying the originals.

Usage

Basic usage

Apply a style to a component:

                                                        
                                                        
                                                            let someButton: Button
                                                        
                                                        DesignSystem.shared.styles.primaryButton(someButton)
                                                        
                                                            

Creating a custom style

                                                        
                                                        
                                                            let primaryButtonStyle: Style<Button> = { button in
                                                            button.setTitleColor(.white, for: .normal)
                                                            button.setTitleColor(.gray, for: .disabled)
                                                        
                                                            button.normalBackgroundColor = .blue
                                                            button.disabledBackgroundColor = .darkGray
                                                            button.highlightedBackgroundColor = .systemBlue
                                                        
                                                            button.indicator.color = .white
                                                        }
                                                        
                                                        primaryButtonStyle(someButton)
                                                        
                                                            

Merging two styles

Use the <> operator to merge styles:

                                                        
                                                        
                                                            let noCornerRadiusButtonStyle = DesignSystem.shared.styles.primaryButton <> { button in
                                                            button.cornerRadius = .none
                                                        }
                                                        
                                                        noCornerRadiusButtonStyle(yourButton)
                                                        
                                                            

Fully custom style

                                                        
                                                        
                                                            let customButtonStyle: Style<Button> = { button in
                                                            button.setTitleColor(.red, for: .normal)
                                                            button.setTitleColor(.cyan, for: .highlighted)
                                                            button.setTitleColor(.green, for: .disabled)
                                                            button.titleLabel?.font = UIFont.preferredFont(forTextStyle: .body, weight: .regular)
                                                        
                                                            button.normalBackgroundColor = .blue
                                                            button.disabledBackgroundColor = .systemPink
                                                            button.highlightedBackgroundColor = .purple
                                                            button.indicator.color = .orange
                                                            button.minimumHeight = 88
                                                            button.cornerRadius = .large()
                                                        }
                                                        
                                                        customButtonStyle(button)
                                                        
                                                            

Using MDS tokens

Always use MDS tokens instead of hardcoded values to ensure consistency:

                                                        
                                                        
                                                            view.backgroundColor = Theme.colors.background.page
                                                        
                                                            

Changing a style globally

Note: All global changes should happen right after DesignSystem initialization.
Override a style completely:

                                                        
                                                        
                                                            DesignSystem.shared.styles.primaryButton = { button in
                                                            // Custom button styling
                                                        }
                                                        
                                                            

Changing a style locally

Create a local style for screen-specific or journey-specific changes:

                                                        
                                                        
                                                            let localPrimaryButton = DesignSystem.shared.styles.primaryButton <> { button in
                                                            button.cornerRadius = .none
                                                        }
                                                        
                                                        localPrimaryButton(myButton)
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options.

Best practices

When customizing styles, ensure:

• Text colors have sufficient contrast against backgrounds.
• Interactive elements meet minimum touch target sizes.
• All component states have distinct visual feedback.

Dependencies

• External dependencies: None
• Internal dependencies: DesignSystem.Styles, DesignSystem.Colors, DesignSystem.Fonts

Design tokens

This guide documents styling concepts rather than a specific component. For design tokens used by individual components, see their respective documentation pages.

JSON tokens

Styles reference tokens defined in defaultTokens.json. Each component has its own token groups for colors, spacing, and typography.

Semantic tokens

See also

• Button - Button component with predefined styles
• Badge - Badge component with themed styles
• Card - Card component with surface stylin