This tutorial comprise Lightning Design System to display Contact of any Account using apex function in Visualforce page.

Apex Class

public with sharing class LdsController {

    public List<Contact> contactList{get;set;}
    public List<Account> accountList{get;set;}

    public LdsController()
    {
        contactList = new LIst<Contact>();    
        accountList = [select id,name from account];    
    }
    
    public void actionfunction()
    {
        contactList = [select id,name from contact where accountId = :   ApexPages.currentPage().getParameters().get('accountId')];

    }
}

Visual force page

<apex:page controller="LdsController" showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">    
<apex:remoteObjects >
  <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>    
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    

<head>
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <apex:stylesheet value="{!URLFOR($Resource.lds, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
  <script>
      function clickevent(myVal)
      {
          jsAction(myVal.value);
          return false;
      }
  </script>
</head>    

<body>    
<apex:form >

  <!-- REQUIRED SLDS WRAPPER -->
  <div class="slds">    

   

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">    

       <div class="slds-form-element">
    <label class="slds-form-element__label" for="select-01">Select Account</label>
    <div class="slds-form-element__control">
      <div class="slds-select_container">
        <select id="select-01" class="slds-select" onchange="return clickevent(this);">
        <option value="">Select Account</option>
        <apex:repeat value="{!accountList}" var="account">
            <option value="{!account.id}">{!account.name}</option>
        </apex:repeat>
        
        </select>
      </div>
    </div>
  </div>   

<fieldset class="slds-form-element">
    <legend class="form-element__legend slds-form-element__label">Contact</legend>
    <div class="slds-form-element__control">
    <apex:outputpanel id="out">
      <apex:repeat value="{!contactList}" var="contact">
      
      <label class="slds-checkbox">
        <input type="checkbox" name="options" id="checkbox-02"/>
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">{!contact.name}</span>
      </label>
      </apex:repeat>
      </apex:outputpanel>
    </div>
  </fieldset>

    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->    

  </div>
  <!-- / REQUIRED SLDS WRAPPER -->    
<apex:actionFunction name="jsAction" action="{!actionfunction}" rerender="out">
<apex:param name="accountId" value=""/>
</apex:actionfunction>
</apex:form>
</body>
</html>


</apex:page>