iOS

iOS

Use our iOS integration to style your native iOS applications to be consistent with the Salesforce Lightning Design System.

The Salesforce Lightning Design System iOS Static Library includes:

  • Compiled Design Tokens
  • The Salesforce Sans Font
  • The Salesforce Lightning Design System Icons
  • Helper Classes

SetupSetup

Add this to your Podfile:

pod 'DesignSystem'

Then run:

pod install

UsageUsage

While we encourage a holistic integration of the entire design system, you are free to include as many or as few of the following modules as you need in your app. Each module will import a small subset of design tokens or icons.

ColorsColors

Text Colors

#import <DesignSystem/DesignSystem.h>
...

UIColor* c = [UIColor sldsColorText:SLDSColorTextInverse];

Background Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsBackgroundColor:SLDSColorBackgroundAltInverse];

Border Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsBorderColor:SLDSColorBorderBrand];

Button Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsButtonColor:SLDSColorBtnBackgroundButtonBrand];

Input Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsInputColor:SLDSColorInputBackgroundInputActive];

Messaging Colors

#import <DesignSystem/DesignSystem.h>

...

UIColor* c = [UIColor sldsMessagingColor:SLDSColorMsgBackgroundSuccess];

Fonts and Text SizesFonts and Text Sizes

#import <DesignSystem/DesignSystem.h>

...

UIFont* lightFont = [UIFont sldsFontLightWithSize:SLDSFontSizeXLarge];

UIFont* regularFont = [UIFont sldsFontRegularWithSize:SLDSFontSizeXLarge];

UIFont* strongFont = [UIFont sldsFontStrongWithSize:SLDSFontSizeXLarge];

IconsIcons

Action Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* actionIcon = [UIImage sldsIconAction:SLDSIconActionApproval withSize:SLDSSquareIconSmall];

Custom Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* customIcon = [UIImage sldsIconCustom:SLDSIconCustom1 withSize:SLDSSquareIconSmall];

Standard Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* standardIcon = [UIImage sldsIconStandard:SLDSIconStandardAccount withSize:SLDSSquareIconSmall];

Utility Icons

#import <DesignSystem/DesignSystem.h>

...

UIImage* utilityIcon = [UIImage sldsIconUtility:SLDSIconUtilityAnnouncement withSize:SLDSSquareIconSmall];