Difference between revisions of "Style Guide"
Jump to navigation
Jump to search
| (5 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] | ||
| Line 8: | Line 10: | ||
padding-right: 12px; | padding-right: 12px; | ||
padding-top: 9px;"> | padding-top: 9px;"> | ||
| − | <span style="color:white;">This is a navline, or header</span></div> | + | <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</h2> | + | <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</p> | + | <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> | </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]] | ||
Latest revision as of 13:20, 5 January 2017
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 Style Guide
Really Simple Example[edit | edit source]
This is a navline, or header with background-color:#212121
Heading color #2c2c2c
This is paragraph text in #464946. Links within the text are colored rgb(6, 51, 96) or #063360, and decorated for email
This is darker text in #333333
Typography[edit | edit source]
Currently using these free fonts
- Linux Libertine O: eQuality Technology
- Georgia Bold: eQuality Technology
- Gillius ADF: enterprise quality = technology freedom
To learn more about GilliusADF, see the Fonts article
