-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle-guide.html
executable file
·120 lines (102 loc) · 8.15 KB
/
style-guide.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!-- @include _top-home.html -->
<!-- @include _nav.html -->
<!-- @stylesheet style_guide -->
<div class="main_content style-guide"> <!-- use the article tag if appropriate -->
<div class="row">
<div class="columns large-12">
<h1 class="page_title">Lighthouse School Style Guide</h1>
</div>
</div>
<div class="row">
<div class="columns large-10">
<div class="section-container tabs" data-section="tabs">
<section class="active">
<p class="title" data-section-title><a href="#">Digital</a></p>
<div class="content guide" data-section-content>
<h2>Fonts</h2>
<p class="instructions">The fonts selected to tell the story of the Lighthouse School were carefully chosen for legibility and character. Using them consistently and with minimal variation establishes a trustworthy and familiar identity for the organization.</p>
<div class="row">
<div class="columns large-6">
<h3>Mrs. Eaves</h3>
<h4 class="note">Example</h4>
<h2 style="border-bottom:0 none;">Mrs. Eaves is used for headlines</h2>
<p><a href="http://www.myfonts.com/fonts/emigre/mrs-eaves-ot/" class="button radius secondary">Download</a></p>
</div>
<div class="columns large-6">
<h3>Muli</h3>
<h4 class="note">Example</h4>
<p>Muli is used for the primary body text. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a href="http://www.google.com/fonts/specimen/Muli" class="button radius secondary">Download</a></p>
</div>
</div>
<h2>Colors</h2>
<h4 class="note">Background</h4>
<ul class="large-block-grid-6 small-block-grid-3 guide-colors">
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#f7f6e7;"></div><figcaption>#f7f6e7</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#eeecd9;"></div><figcaption>#eeecd9</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#c4d9de;"></div><figcaption>#c4d9de</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#add5e0;"></div><figcaption>#add5e0</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#7bc0d3;"></div><figcaption>#7bc0d3</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#4dadc8;"></div><figcaption>#4dadc8</figcaption></figure></li>
</ul>
<h4 class="note">Text</h4>
<ul class="large-block-grid-6 small-block-grid-3 guide-colors">
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#b7b19f;"></div><figcaption>#b7b19f</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#52504b;"></div><figcaption>#52504b</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#413e37;"></div><figcaption>#413e37</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#5bb8a5;"></div><figcaption>#5bb8a5</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#115467;"></div><figcaption>#115467</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#e97b04;"></div><figcaption>#e97b04</figcaption></figure></li>
</ul>
<h2>Logo</h2>
<p class="instructions">The Lighthouse woodcut was created by David Lazurus. The handmade details reflect the school's artistic, hands-on ethos. Some of the linework is quite fine, so it's important to follow several guidelines when using the logo online:</p>
<ol class="instructions">
<li>Minimum dimensions: 140px wide x 54px tall</li>
<li>The lighthouse mark can be used alone, but no smaller than 50px x 50px</li>
<li>Try to keep a margin around the logo and never have it bumping against another graphic or text. The recommended amount of margin is equal to the width of the "L" in Lighthouse.</li>
</ol>
<h3>Files</h3>
<p class="instructions">Right-click the image to download. These are just thumbnails; a much larger image will download, which you can resize as needed.</p>
<ul class="large-block-grid-4 logo-files">
<li><a href="<!-- @path large-blue.png -->"><img src="<!-- @path large-blue.png -->"></a></li>
<li><a href="<!-- @path large-white.png -->"><img src="<!-- @path large-white.png -->"></a></li>
<li><a href="<!-- @path mark-600x600.png -->"><img src="<!-- @path mark-600x600.png -->"></a></li>
<li><a href="<!-- @path different-kind-of-school.png -->"><img src="<!-- @path different-kind-of-school.png -->"></a></li>
</ul>
</div>
</section>
<section>
<p class="title" data-section-title><a href="#">Print</a></p>
<div class="content" data-section-content>
<h2>Fonts</h2>
<p class="instructions">The fonts selected to tell the story of the Lighthouse School were carefully chosen for legibility and character. Using them consistently and with minimal variation establishes a trustworthy and familiar identity for the organization.</p>
<div class="row">
<div class="columns large-6">
<h3>Mrs. Eaves</h3>
<h4 class="note">Example</h4>
<h2 style="border-bottom:0 none;">Mrs. Eaves is used for headlines</h2>
<p><a href="http://www.myfonts.com/fonts/emigre/mrs-eaves-ot/" class="button radius secondary">Download</a></p>
</div>
<div class="columns large-6">
<h3>Muli</h3>
<h4 class="note">Example</h4>
<p>Muli is used for the primary body text. Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<p><a href="http://www.google.com/fonts/specimen/Muli" class="button radius secondary">Download</a></p>
</div>
</div>
<h2>Colors</h2>
<h4 class="note">These are the PMS ink colors for professional printing.</h4>
<ul class="large-block-grid-6 small-block-grid-3 guide-colors">
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#45a7c5;"></div><figcaption>PMS 7702</figcaption></figure></li>
<li><figure class="swatch-wrap"><div class="swatch-holder" style="background:#012939;"></div><figcaption>PMS 303</figcaption></figure></li>
</ul>
<h2>Logo</h2>
<p class="instructions">Here is the original Adobe Illustrator logo file which you may provide to a designer or printer for professional use. (1.6mb)</p>
<p><img src="<!-- @path large-blue.png -->"><a href="<!-- @path final-master.ai -->" class="button radius secondary">Download</a></p>
</div>
</section>
</div>
</div>
</div>
<!-- @include _footer.html -->
<!-- @include _bottom.html -->