Asset Library / Style Guide Template

1. Branding

Original Vector File

Invert Vector File

2. Layout

12 Grid system


                        <div class="grid1">Grid1</div>
                        <div class="grid2">Grid2</div>
                        <div class="grid3">Grid3</div>
                        <div class="grid4">Grid4</div>
                        <div class="grid5">Grid5</div>
                        <div class="grid6">Grid6</div>
                        <div class="grid7">Grid7</div>
                        <div class="grid8">Grid8</div>
                        <div class="grid9">Grid9</div>
                        <div class="grid10">Grid10</div>
                        <div class="grid11">Grid11</div>
                        <div class="grid12">Grid12</div>

Explain how to use grid system properly.

3. Colors

Accent#CA6DD0

Secondary#AADA4B

Background#C7B489

Additional#97A7F1

Gray#CCC

Explain how to use color set.

4. Typography

Heading font: Montserrat

Body font: Cutive+Mono

Add your note about typography.

5. Buttons


                        <button type="button" class="btn c1">Accent</button>
                        <button type="button" class="btn c2">Secondary</button>
                        <button type="button" class="btn c3">Background</button>
                        <button type="button" class="btn c4">Additional</button>
                        <button type="button" class="btn c5">Gray</button>

Explain how to use button set.

6. Icons

Font Awesome


                        <i class="fa fa-envelope-o"></i>
                        <i class="fa fa-desktop"></i>

Here are some examples...

7. Form

Text input

Password input

Select

Multiple select

Textarea

File

Radio button Radio 1 Radio 2

Checkbox Check 1 Check 2


                       
<form class="sample">
    <fieldset>
        <label for="text">Text input</label>
        <input type="text" id="text" placeholder="Text Input" />
    </fieldset>

    <fieldset>
        <label for="password">Password input</label>
        <input type="password" id="password" placeholder="Password Input" />
    </fieldset>

    <fieldset>
        <label for="select">Select</label>
        <select id="select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </fieldset>

    <fieldset>
        <label for="m_select">Multiple select</label>
        <select multiple id="m_select">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select>
    </fieldset>

    <fieldset>
        <label for="textarea">Textarea</label>
        <textarea id="textarea"></textarea>
    </fieldset>

    <fieldset>
        <label for="file">File</label>
        <input type="file" id="file" />
    </fieldset>

    <fieldset>
        <label>Radio button</label>
        <input type="radio" name="optionsRadios" value="option1"> Radio 1
        <input type="radio" name="optionsRadios" value="option2"> Radio 2
    </fieldset>

     <fieldset>
        <label>Checkbox</label>
        <input type="checkbox"> Check 1
        <input type="checkbox"> Check 2
    </fieldset>

    <fieldset>
        <button type="button" class="btn c1">Submit</button>
    </fieldset>
</form>