Salesforce Lightning

Automatically Style Existing Visualforce Pages with Lightning Experience Stylesheets(Winter 18 Beta)

To style your Visualforce page to match the Lightning Experience UI when viewed in Lightning Experience or the Salesforce1 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 standardController="Opportunity"  lightningStylesheets="true">
    <apex:form>
        <apex:pageBlock >
            <apex:pageBlockSection title="New Opportunity">
                <apex:inputField value="{!Opportunity.Name}"/>
                <apex:inputField value="{!Opportunity.AccountId}"/>
                <apex:inputField value="{!Opportunity.Type}"/>
                <apex:inputField value="{!Opportunity.Amount}"/>
                <apex:inputField value="{!Opportunity.CloseDate}"/>
                <apex:inputField value="{!Opportunity.StageName}"/>
                <apex:inputField value="{!Opportunity.Description}"/> 
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>

</apex:page>

New Opportunity Visualforce page in Salesforce Classic

New Opportunity Visualforce Page in Lightning Experience