Style Guide: Difference between revisions
Created page with "A long time ago, I created a script that would parse a CSS file and generate the unwritten style guide that's embodied in it. Until I resurrect that script, you might need to..." |
No edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
A Style Guide addresses the [[Fonts]], colors, layout and other design aspects of your branding. The scope of your Style Guide might be very broad, or it may just focus on the company website elements. | |||
A long time ago, I created a script that would parse a CSS file and generate the unwritten style guide that's embodied in it. Until I resurrect that script, you might need to refer to other helpful resources on creating a [http://designmodo.com/create-style-guides/ Style Guide] | A long time ago, I created a script that would parse a CSS file and generate the unwritten style guide that's embodied in it. Until I resurrect that script, you might need to refer to other helpful resources on creating a [http://designmodo.com/create-style-guides/ Style Guide] | ||
== Really Simple Example == | |||
<html> | |||
<div style="background-color:#212121; | |||
padding-bottom: 9px; | |||
padding-left: 12px; | |||
padding-right: 12px; | |||
padding-top: 9px;"> | |||
<span style="color:white;">This is a navline, or header with background-color:#212121</span></div> | |||
<h2 style="color: #2c2c2c; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 19px; font-weight: bold;">Heading color #2c2c2c</h2> | |||
<p style="color: #464946; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is paragraph text in #464946. Links within the text <a href="#" style="color: rgb(6, 51, 96);">are colored rgb(6, 51, 96) or #063360, and decorated for email</a></p> | |||
<p style="color: #333333; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is darker text in #333333</p> | |||
</html> | |||
== Typography == | |||
[[File:Eqt.logo.png|thumb|right|Linux Libertine O]] | |||
Currently using these free fonts | |||
*<span style="font-family:linux libertine O;font-size:2em;">Linux Libertine O: eQuality Technology</span> | |||
*<span style="font-family:georgia bold;font-size:2em;">Georgia Bold: eQuality Technology</span> | |||
*<span style="font-family:gillius ADF;font-size:2em;">Gillius ADF: enterprise quality = technology freedom</span> | |||
To learn more about GilliusADF, see the [[Fonts]] article | |||
[[Category:Design]] | [[Category:Design]] | ||
[[Category:Marketing]] | [[Category:Marketing]] | ||
[[Category:Style]] | |||