Using SLDS in Visualforce page

You don’t have to upload the Lightning Design System as a static resource. That means you can keep the syntax of your page simple and stay under the 250-MB static resource limit.

To use Lightning Design System stylesheets in your Visualforce page:

1. Add <apex:slds /> anywhere in your page markup.

2. Set the <apex:page> applyBodyTag or applyHtmlTag attribute to false.

3. Include the slds-scope class on any SLDS style or asset parent element

4. Do not to wrap any of Visualforce tags in the slds-scope element.

5. To reference assets in the Lightning Design System, such as SVG icons and images, use the URLFOR() formula function and the $Asset global variable. Use the following markup, for example, to reference the SVG account icon. Eg: In the VF page: <!-- PAGE HEADER --> <p class="slds-text-title_caps slds-line-height--reset">Accounts</p> <h1 class="slds-page-header__title slds-truncate" title="My Accounts">{! Account.Name }</h1> <span class="slds-icon_container slds-icon-standard-account" title="Account Standard Icon"> <svg class="slds-icon slds-page-header__icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}" /> </svg> </span> <!--  HEADING AREA --> <div class="slds-col slds-no-flex slds-grid slds-align-top"> <button class="slds-button slds-button--neutral">New Account</button> </div> <!--  PAGE HEADER -->
   

---

<apex:page standardController="Account" applyBodyTag="false">

<apex:slds />

<!-- any Visualforce component should be outside SLDS scoping element -->

<apex:outputField value="{!Account.OwnerId}" />

<div class="slds-scope">

<!-- SLDS markup here -->

</div>

</apex:page>

Check the following for the implementation - https://github.com/JohnsonTitus/vfPageInLEX.git

https://www.mstsolutions.com/technical/lightning-design-system-for-visualforce-page/

To style your Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce app, set lightningStylesheets="true" in the <apex:page> tag. When the page is viewed in Salesforce Classic, it doesn’t get Lightning Experience styling.

<apex:page lightningStylesheets="true"> To include custom SLDS components that aren’t part of the Visualforce component library, use the <apex:slds/> tag with the code and the lightningStylesheets attribute.

Visualforce components that support the lightningStylesheets attribute or don’t require styling - https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm

https://trailhead.salesforce.com/content/learn/modules/lightning_design_system