Style Guide Documentation

about

Living Style Guide of Animated Typeface Project by students at VFS Digital Design.

Foundation

colors

Main Colors

#2b2a2a
#b7b5b5
#a40f34

Complementary Colors

#ffe72e
#2a74ba
#79004d
#cf9
#ec47af
#c9dff2
#0D5B74
#94ff80
#33c5f3
#066
#639
#fb9917
#ade736
#f15f2e

grid

image 1
image 2
image 3
image 4
image 5
image 6
credits col 1
credits col 2

The imagery above displays the rough structure of the site.

Note: Images span from a row of 5 - 6 depending on the screen size. Credits at the bottom of website is 2 columns with 1vw column gap.

typography

Font Stacks

Helvetica, Arial, sans-serif;

'Fanwood Text', Georgia, Helvetica, Arial, sans-serif;

Raleway, Helvetica, Arial, sans-serif;

'Goudy Bookletter 1911', Georgia, Helvetica, Arial, sans-serif;

leaguemono, Helvetica, Arial, sans-serif;

Sniglet, Helvetica, Arial, sans-serif;

'Sorts Mill Goudy', Georgia, Helvetica, Arial, sans-serif;

ostrich, Helvetica, Arial, sans-serif;

junction, Helvetica, Arial, sans-serif;

Orbitron, Helvetica, Arial, sans-serif;

leaguespartan, Helvetica, Arial, sans-serif;

Knewave, Helvetica, Arial, sans-serif;

leaguegothic, Helvetica, Arial, sans-serif

blackoutmidnight, Helvetica, Arial, sans-serif

chunkfiveroman, Helvetica, Arial, sans-serif;

Base Styles

headings

Example

Primary Font Headings

h1. Header 1

h2. Header 2

h3. Header 3

h4. Header 4

h5. Header 5
h6. Header 6
Copy Source
                        
<h1 class="page-header">Primary Font Headings</h1>

<h1>h1. Header 1</h1>
<h2>h2. Header 2</h2>
<h3>h3. Header 3</h3>
<h4>h4. Header 4</h4>
<h5>h5. Header 5</h5>
<h6>h6. Header 6</h6>
                    

images

Example

Thumbnail Animations

letter animation

Social Icons

Copy Source
                            
<p>Thumbnail Animations</p>

<section class="clearfix">
    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">
</section>

<p>Social Icons</p>

<div class="social">
    <a href="https://www.facebook.com/VFSDigitalDesign" target="_blank">
        <i class="fa fa-facebook-official"></i>
    </a>
    <a href="https://www.youtube.com/playlist?list=PL0BB77C52358480F9" target="_blank">
        <i class="fa fa-youtube-square "></i>
    </a>
</div>
                        

text elements

Example

Example body text

Animated Typeface is a collaborative project by students of the VFS Digital Design program. In Term 3, they create 3-4 glyph sequences for the typeface. To visit our community site, visit VFS Oomph . To find out more about the VFS Digital Design program and what we offer, visit VFS Digital Design Program .

©2019 VFS Digital Design. All Rights Reserved.
Copy Source
                                
<h2>Example body text</h2>

<p>Animated Typeface is a collaborative project by students of the VFS Digital Design program. In Term 3, they create 3-4 glyph sequences for the typeface. To visit our community site, visit <a style="color: #33c5f3;" target="_blank" href="http://community.vfs.com/oomph">VFS Oomph</a>. To find out more about the VFS Digital Design program and what we offer, visit <a style="color: #33c5f3;" target="_blank" href="https://vfs.edu/programs/digital-design">VFS Digital Design Program</a>.</p>

<div class="copy" style="font-size: 0.75em">&copy;2019 VFS Digital Design. All Rights Reserved.<div>
                            

Patterns- Design and mark-up patterns

hero

Example

Copy Source
                                    
<img class="hero" src="https://placehold.it/967x200">
                                

navs

Copy Source
                                        
<h3>Vertical Navigation</h3 >

<nav>
    <ul>
        <li class="tab4" style="font-weight: 700; list-style-type: none; text-transform: uppercase; display: block; padding-right: 0.9em;">
            <a class="sg-spartan" href="dd34-leaguespartan.html">>League Spartan</a>
        </li>

        <li class="tab4" style="font-weight: 700; list-style-type: none; text-transform: uppercase; display: block; padding-right: 0.9em;">
            <a class="sg-knewave" href="dd33-knewave.html">Knewave</a>
        </li>

        <li class="tab3 "style="font-weight: 700; list-style-type: none; text-transform: uppercase; display: block; padding-right: 0.9em;">
            <a class="sg-gothic" href="dd32-leaguegothic.html">League Gothic</a>
        </li>

        <li class="tab2 "style="font-weight: 700; list-style-type: none; text-transform: uppercase; display: block; padding-right: 0.9em;">
            <a class="sg-blackout" href="dd31-blackout.html">Blackout Midnight </a >
        </li >

        <li class="tab1 "style="font-weight: 700; list-style-type: none; text-transform: uppercase; display: block; padding-right: 0.9em;">
            <a class="sg-chunkfive" href="dd30-chunkfive.html">Chunk Five </a >
        </li>
    </ul>
</nav>
                                    

thumbnails

Example

letter animation letter animation letter animation letter animation letter animation letter animation letter animation letter animation
Copy Source
                                            
<section class="clearfix specialBG">
    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">

    <img class="item" src="https://placehold.it/167x200" alt="letter animation" width="167" height="200">
</section>