You can apply Salesforce Lightning Design System (SLDS) to Visualforce pages that are created by SkyVisualEditor. 

You can show Visualforce page on the new User Interface Lightning Experience. However, there is a designing tool SLDS available to create a new design to your page. However, Salesforce provides a designing tool SLDS to create and design a genuine Lightning Experience page. 

We will provide a file package including fonts, font size, input field frame design and buttons to apply SLDS onto the SkyVisualEditor page. This package is a sample which is not completely compatible with the SLDS. There are parts where CSS is applied to improve the page design (eg: font size is Meiryo UI).

Please feel free to modify the file provided in the package.

Most of the original property setting (field width and color, etc) in the Studio will be inherited. Therefore, some parts may look different from the SLDS. Please check and modify the page if necessary.
Please see the below link for more information on the Salesforc Lightning Design System

https://www.lightningdesignsystem.com/

1.Examples

【Example 1: Salesforce Layout Page】

【Example 2: Search Templage Page】

 2.Settings

Please take the folllowing steps.

1. Upload SLDS to static resource
   1. Download SLDS
      Download SLDS Zip file provided by Salesforce.
      Go to the link below and click ”Download Design System (0.12.2)” to download the file "salesforce-lightning-design-system-0.12.2.zip".
      http://design-system-v-0-12-2.herokuapp.com/resources/downloads/
      
      This package has been tested with SLDS Version 0.12.2. Please run a test in advance if you are going to use a different version.
      
      
   2. Upload the file to static resource
      Upload the file to static resource. Set the resource name as SLDS012.
      
      
2. Upload the package to static resource
   1. Download the package
      Go to the link below and download the file SVE2SLDS.zip.
      https://s3.amazonaws.com/www.skyvisualeditor.com/SLDS/SVE2SLDS.zip
      
   2. Upload the file to static resource
      Upload the file to static resource. Set the resource name as SVE2SLDS.
      
      
3. Set the SkyVisualEditor page from Studio Page Setting
   

   1. Include setting for JavaScript
      You can code from Script Include Setting.

      {!URLFOR($Resource.SVE2SLDS, 'sve2slds.js')} 

      
      
      

   2. Stylesheet Include Setting
      Code the two scripts below from the Stylesheet Include Setting menu.

      {!URLFOR($Resource.SLDS012, 'assets/styles/salesforce-lightning-design-system-vf.css')}
      {!URLFOR($Resource.SVE2SLDS,'sve2slds.css')}   

      
      
      

   3. Settings for each tables
      If there are tables in the page, only the tables within the page may be re-read depending on the process. Please code the below scripts for each table's property "JavaScript" to apply the design.

      input2slds(jQuery('[id$=Component138]'));
      （*note: "Component138" is a property ID value for the table）

      
      
      

   4. Important button colors
      You can emphasize important buttons by coloring it to blue. Go to the button's StyleClass property and code the below/
      -----
      slds-button--brand
      -----
      

3.The changes in the component

There will be a change to every page as below. This section will go over the distinctive changes in SkyVisualEditor's component.

• • Font style will change 
  • Font size will enlarge
  • Input size will enlarge

Please be aware that the page layout, size, and visual may alter depending on the design.

Component/Other		Comment
Object Field	Text	The input size will be larger for every Object fields. The frame color will change to blue when selected.
	Pick list (multiple)	The text size will enlarge and will not show. You will need to change the component's width size.
	Date	The text size is too large to fit in the field. Please change the component's width size.
SVE Component	Tab	The default tab color for SLDS is white based. However, the color specified in the Studio will be the dominant color.
	Data Table	JavaScript setting is required
	Data table to show multiple rows	JavaScript setting is required
	Events Join Table	JavaScript setting is required
	Buttons	The text size will expand. If you have set the width, the text may not fit in. Please deactivate the width setting to avoid this error. You can change the color of the button.

4. Inapplicable SkyVisualEditor Components

The below components are inapplicable.