<div class="pattern-lab">
    
    <div class="pattern-lab__section colors">
        
        <h3 class="pattern-lab__title">Colors</h3>
        
        <ul>
            <li>$off-white</li>
            <li>$grey-light</li>
            <li>$grey-dark</li>
            <li>$teal</li>
            <li>$grey-lightest</li>
            <li>$pink</li>
            <li>$pink-dark</li>
            <li>$yellow</li>
        </ul>
        
    </div>
    
     <div class="pattern-lab__section headings">
        
        <h3 class="pattern-lab__title">headings</h3>

        <h1>Heading Example #1; Crimson Text</h1>
         <h1><em>Heading Example #1; Crimson Text (italic)</em></h1>
         <h1><strong>Heading Example #1; Crimson Text (bold)</strong></h1>
         <br />

        <h2>Heading Example #2; Source Sans Pro</h2>
         <h2><em>Heading Example #2; Source Sans Pro (italic)</em></h2>
         <h2><strong>Heading Example #2; Source Sans Pro (bold)</strong></h2>
         <br />

        <h3>Heading Example #3; Source Sans Pro</h3>
        <h3><em>Heading Example #3; Source Sans Pro (italic)</em></h3>
        <h3><strong>Heading Example #3; Source Sans Pro (bold)</strong></h3>
         <br />
         
        <h4>Heading Example #4; Source Sans Pro</h4>
        <h4><em>Heading Example #4; Source Sans Pro (italic)</em></h4>
        <h4><strong>Heading Example #4; Source Sans Pro (bold)</strong></h4>
         <br />

        <h5>Heading Example #5; Source Sans Pro</h5>
         <h5><em>Heading Example #5; Source Sans Pro (italic)</em></h5>
         <h5><strong>Heading Example #5; Source Sans Pro (strong)</strong></h5>
         <br />

        <h6>Heading Example #6; Georgia</h6>
         <h6><em>Heading Example #6; Georgia (italic)</em></h6>
         <h6><strong>Heading Example #6; Georgia (bold) </strong></h6>
         
    </div>
    
    <div class="pattern-lab__section paragraph">
        
        <h3 class="pattern-lab__title">paragraph styles</h3>
        
        <p>Last night I dreamt I went to Manderley again. It seemed to me I stood by the iron gate leading to the drive, and for a while I could not enter, for the way was barred to me.</p> 
        
        <p><em>Then, like all dreamers, I was possessed of a sudden with supernatural powers and passed like a spirit through the barrier before me.</em></p> 
        
        <p><strong>The drive wound away in front of me, twisting and turning as it had always done.</strong></p> 
        
        <p>But as I advanced, I was aware that a change had come upon it. <a href="#">Nature had come into her own again</a> and little by little had encroached upon the drive with long tenacious fingers, on and on the poor thread that had once been our drive.</p> 
        
        <p>And finally, there was <a href="#">Manderley</a>, Manderley, secretive and silent. Time could not mar the perfect symmetry of those walls. Moonlight can play odd tricks upon the fancy, and suddenly it seemed to me that light came from the windows. And then a cloud came upon the moon and hovered an instant like a dark hand before a face. The illusion went with it. I looked upon a desolate shell, with no whisper of a past about its staring walls. We can never go back to Manderley again.</p>

    </div>
    
    <div class="pattern-lab__section blockquote">
        
        <h3 class="pattern-lab__title">blockquote</h3>
        
        <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore placeat, minima molestiae vel, laboriosam repellendus officiis magnam nihil eligendi nobis in. Modi nihil hic placeat, tenetur itaque vitae libero earum.</blockquote>
        
    </div>
</div>
// Colors
$off-white: #F5F4EF;
$grey-light: #c9c9c9;
$grey-dark: #3e403e;
$teal: #51a6b0;
$grey-lightest: #edebe9;
$pink: #f15675;
$pink-dark: #c6445e;
$yellow: #ffe289;

//UI Colors
$body-background: $off-white;
$box-background: $grey-dark;
$box-font: $off-white;
$font-primary: $grey-dark;
$link-primary: $teal;
$link-hover: $grey-dark;

//Spacing 
$global-spacer: 10px;

body {
    background: $body-background;
}

.pattern-lab {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    
    &__title {
        display: block;
        width: 100%;
        margin-bottom: $global-spacer*3;
        padding-left: $global-spacer*2;
        padding-bottom: $global-spacer;
        font-family: 'Source Sans Pro', Arial, sans-serif;
        font-size: 12px;
        color: $grey-light;
        text-transform: lowercase;
        border-left: 10px double $grey-light;
        border-bottom: 10px double $grey-light;
    }
    
    &__section {
        margin-bottom: $global-spacer*5;
    }   
}

.colors {
    
    ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }
    
    li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border-radius: 200px;
        list-style-type: none;
        
        &:nth-child(1) {
            background: $body-background;
            border: 2px solid $box-background;
        }
        
        &:nth-child(2) {
            color: $body-background;
            background: $grey-light;
        }
        
        &:nth-child(3) {
            color: $body-background;
            background: $grey-dark;
        }
        
        &:nth-child(4) {
            background: $teal;
        }
        
        &:nth-child(5) {
            background: $grey-lightest;
        }
        
        &:nth-child(6) {
            color: $body-background;
            background: $pink;
        }
        
        &:nth-child(7) {
            color: $body-background;
            background: $pink-dark;
        }
        
        &:nth-child(8) {
            color: $grey-dark;
            background: $yellow;
        }
    }
}

.headings {
    
    h1 {
        font-family: 'Crimson Text', Georgia, serif;
        color: $font-primary;
    }
    
    h2 {
        font-family: 'Crimson Text', Georgia, serif;
        color: $font-primary;
    }
    
    h3 {
        font-family: 'Source Sans Pro', Arial, sans-serif;
        color: $font-primary;
        text-transform: uppercase;
    }
    
    h4 {
        font-family: 'Source Sans Pro', Arial, sans-serif;
        color: $font-primary;
    }
    
    h5 {
        font-family: 'Source Sans Pro', Arial, sans-serif;
        color: $grey-light;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    h6 {
        font-family: Georgia, serif;
        font-size: 20px;
        line-height: 34px;
        padding-bottom: 20px;
    }
}

.paragraph {
    
    p {
        margin-bottom: $global-spacer*2;
        font-family: Georgia, serif;
        font-size: 17px;
        line-height: 27px;
        color: $font-primary;
    }
    
    a {
        color: $link-primary;

        &:hover,
        &:focus {
            color: $link-hover;
        }
    }
}

blockquote {
    font-family: Georgia, serif;
    font-size: 17px;
    line-height: 27px;
    color: $pink;
    font-style: italic;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
  2. https://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600,600italic,700,700italic
  3. https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic,900,900italic,300italic,300,200italic,200

External JavaScript

This Pen doesn't use any external JavaScript resources.