Lightning Design in inline visualforce page

Question

I'm trying to render an Apex:outoutpanel with some Text based on certain criteria within an Inline VF page. I will be adding Lightning Design within this panel. But looks like it doesn't properly showing up. Here's my code:

<apex:form id="map_Form">

    <!--Displays the Map-->
        <apex:outputPanel rendered="false">
            <div style="width: 100%;" id="mapDiv">
                    <div id="map" style="width: 60%; height: 600px; float: left;margin:0px;color:black;"></div>
                    <div id="panel" style="width: 40%; float: left;margin:0px;"></div>
                </div>
    </apex:outputPanel>
        <!--End of the Map-->

        <!--Displays Validation message-->
        <apex:outputPanel rendered="true">
                <div class="slds-text-color--error">Error shows here!</div>
        </apex:outputPanel>  
        <!--End of the validation message--> 

</apex:form>

This 'Error shows here!' is still a plain text. Any thoughts??

Answer 1

Visualforce pages are served up in an iframe, and so do not inherit Lightning's CSS by default. You need to manually import SLDS if you intend to use it:

<apex:page>
<apex:slds />
<div class="slds-scope">
    <!-- your page here -->
</div>
</apex:page>

Answer 2

It is now possible for Visualforce pages within Lightning Experience to be automatically styled with Lightning Design System.

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

It takes your standard Visualforce components and re-styles them when viewed within Lightning Experience. This may be useful in scenarios such as these.