Can we use the Lightning Design System in Visualforce pages but have the Lightning Experience disabled?

Salesforce Lightning Design system is implemented for Visualforce as a CSS library that you would include in your VF page as a static resource. In the same way you could include any other CSS library as a static resource, you can do the same with SLDS.

As such, there is absolutely no dependency between enabling Lightning Experience and using the raw design system CSS.

The Lightning Design System website gives some quickstarts on using it for Lightning Components, web pages (most likely running on Heroku), and Visualforce. Where it describes how to use it.

Alternatively, you could go get the Trailhead badge which also walks you though using it in a variety of contexts. There is a project, which focuses specifically on using SLDS with Visualforce.

* UPDATE * Based on new features it seems worthwhile to mention some items that make the "problem" of Lightning and SLDS in Visualforce much easier.

To import the SLDS stylesheets manually into your Visualforce page today, you can now use the <apex:slds/> tag in your Visualforce markup. To avoid clashes with the "classic" UI you probably would be best advised to also turn off those stylesheets.

And if you want your Visualforce pageBlock markup to function both in Lightning and in Classic, as of Winter 18 (available very soon) release we have added a new apex:page attribute called lightningstylesheets. Here is a Visualforce page in Lightning: VF Page with PageBlock in Lightning

In Classic: VF Page with PageBlock in Classic

And this is the code:

<apex:page lightningStylesheets="true" controller="DreamhouseProspects">
  <apex:sectionHeader title="Leads" subtitle="Home"/>    
  <apex:form >
    <apex:pageBlock >
      <apex:pageBlockButtons location="top">
        <apex:outputLabel value="Sort: " for="sortList" />
        <apex:selectList value="{! sortOrder}" size="1" id="sortList">
          <apex:selectOption itemvalue="LastName" />
          <apex:selectOption itemvalue="FirstName" />
        </apex:selectList>
        <apex:commandButton value="Sort Table" action="{!sortList}" reRender="leads_list"/>
        <apex:commandButton action="{!URLFOR($Action.Lead.New)}" value="New"/>
      </apex:pageBlockButtons>
      <apex:pageBlockTable value="{! leads }" var="ct" id="leads_list">
        <apex:column headerValue="First Name">
          <apex:outputLink value="/{! ct.Id}">{! ct.FirstName }</apex:outputLink>
        </apex:column>
        <apex:column value="{! ct.LastName }"/>
        <apex:column value="{! ct.Email }"/>
        <apex:column value="{! ct.Phone }"/>
      </apex:pageBlockTable>              
    </apex:pageBlock>
  </apex:form>
</apex:page>

The only things required to make this work are a page that makes use of the core pageBlock tags as the primary way that things are displayed and the use of the lightningStylesheets="true" attribute in the apex:page tag.


Lightning design system is all about the standard css framework which define the UI inside Salesforce so yes it is possible to include that in visualforce pages without enabling Lightning Experience enabled.

You can follow below steps

  1. Add Lightning design system css into your org as static resource and include that in your page.

  2. Include css into your page and wrap items around slds class

<apex:page sidebar="false" standardStylesheets="false"> 
<apex:stylesheet value="/resource/SLDS0102/assets/styles/salesforce-lightning-design-system-ltng.css"/>

<div class="slds">
 <div class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture" role="alert">
 <span class="slds-assistive-text">Info</span>
 <h2>Success Message</h2>
</div>
</div>
</apex:page>