Rendering Visualforce pages with Lightning Experience Stylesheets

With the latest release (Winter 18) of Salesforce, a new feature has been added to help style a Visualforce page to Lightning Design with only a single attribute to add on the apex:page xml tag. It will only be viewable under Lightning Experience or on the Salesforce app (formerly known as Salesforce1). If viewed on Salesforce Classic, the styling won't work.

Add the attribute LightningStylesheet and Salesforce get the work done for you.

Here is a sample page I made to illustrate the changes in Salesforce Classic and Lightning Experience.

Salesforce Classic 

Lightning Experience

Salesforce Classic with Inputs

Lightning Experience with Inputs

Note:

• This is a beta version of the feature. It is still under development by the Salesforce team. 
• You can also use the apex:slds tag for creating custom component
• It is only available in the Winter 18 api (41). You will have this error with older api version: "Unsupported attribute lightningstylesheets in <apex:page>"

Additional Resources:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm