I am following examples from Lightning COmponent developer guide, but looks like all style and design are missing there? When I am trying simple examples these all show very odd? Any suggestion what needs to be followed?

for example If I follow these examples,
it shows everything looks in very bad UI most of thing don't render as expected.

for example I am just using below code :

<aura:component >
    <aura:attribute name="myTitle" type="String" default="My Card Title"/>
    BreadCrumb:
    <lightning:breadcrumbs >
        <lightning:breadcrumb label="Parent Account" href="https://vyaslirik-dev-ed.lightning.force.com/one/one.app#/sObject/5007F000001hWVgQAM/view"/>
        <lightning:breadcrumb label="Case" href="https://vyaslirik-dev-ed.lightning.force.com/one/one.app#/sObject/5007F000001hWVgQAM/view"/>
    </lightning:breadcrumbs>
	<lightning:icon iconName="utility:error" variant="error"/>
   Avatar : <lightning:avatar src="{!$Resource.Images + '/Images/lightning.png'}" initials="Sa" 
      fallbackIconName="standard:account" alternativeText="Salesforce"/>    
	<lightning:pill label="hello pill" onremove="{! c.handleRemoveOnly }" onclick="{! c.handleClick }">
    	<aura:set attribute="media">
            <lightning:icon iconName="standard:account"  alternativeText="Account"/>
        </aura:set>
    </lightning:pill>
3
    <lightning:card title="{!v.myTitle}" footer="Card Footer">
        <aura:set attribute="actions">
            <lightning:button label="New"/>
        </aura:set>
        <p class="slds-p-horizontal--small">
            Card Body (custom component)
        </p>
    </lightning:card>
    
    <div class="c-container">
        <lightning:layout horizontalAlign="end" verticalAlign="center">
            <lightning:layoutItem flexibility="auto" padding="around-small">
               <lightning:formattedNumber value="12.34" style="currency" 
                     currencyCode="EUR" currencyDisplayAs="symbol"/>
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <lightning:input type="number" name="percentVal" label="Enter a percentage value" formatter="percent" step="0.01" />
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <lightning:input type="number" name="currencyVal" label="Enter a dollar amount" formatter="currency" step="0.01" />
            </lightning:layoutItem>
            <lightning:layoutItem flexibility="auto" padding="around-small">
                4
            </lightning:layoutItem>
        </lightning:layout>
    </div>

	<lightning:button label="Toggle" variant="brand" onclick="{!c.toggle}"/>
    <div class="exampleHolder">
        <lightning:spinner aura:id="mySpinner" />
    </div>
     <form>
      <fieldset>
        <legend>Select your favorite color:</legend>
        <lightning:input type="checkbox" label="Red" 
            name="color1" value="1" aura:id="colors"/>
        <lightning:input type="checkbox" label="Blue" 
            name="color2" value="2" aura:id="colors"/>
        <lightning:input type="checkbox" label="Green" 
            name="color3" value="3" aura:id="colors"/>
      </fieldset>
    <lightning:tabset>
      <lightning:tab onactive="{! c.handleActive }" label="Tab 1" id="tab1" />
      <lightning:tab onactive="{! c.handleActive }" label="Tab 2" id="tab2" />
    </lightning:tabset>
    </form>
</aura:component>