Drumbeat/styleguide: Difference between revisions
Theinterned (talk | contribs) (Created page with '== Drumbeat: Style Guide == === Logo === === Typography ===') |
Theinterned (talk | contribs) (→Logo) |
||
| (32 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
= Drumbeat: Style Guide = | |||
== Logo == | |||
Logo with title | |||
=== Typography === | [[Image:Drumbeatlogo.png|700px]] | ||
Logo sans title | |||
[[File:Drumbeat_logo.png|140px]] | |||
40x50 Logo for Firefox Start Page Snippet: | |||
[[File:Drumbeat_logo_40x50.png]] | |||
'''Font:''' [http://typekit.com/fonts/512|FF Meta / FF MetaBold] | |||
'''Font Colour:''' #4C4C4C | |||
== Grid == | |||
The Drumbeat site is designed on a typographic grid: | |||
the vertical grid is set on a text line-height of 20px. | |||
in the horizontal I am working with alternating 20px/60px columns; 12 columns of 60px separated by 20px gutters. | |||
[[File:Drumbeat_grid.jpg|756px]] | |||
== Typography == | |||
=== FontFont Meta === | |||
The main title font is [http://typekit.com/fonts/512|FF Meta] Bold. The great news is that FF Meta is now available to license through Typekit for use in web sites: [http://blog.typekit.com/2009/11/18/fontfont-library-now-on-typekit/|http://blog.typekit.com/2009/11/18/fontfont-library-now-on-typekit/] meaning we could license the font for use in the site (no image-based titles!) | |||
=== CSS Font-Stacks === | |||
You can use the following font-stacks in your css typography. You can also go down this list to pick an appropriate font for your non-html based design needs. | |||
==== Sans-Serif font ==== | |||
font-family: MetaBook-Roman, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |||
==== Serif font ==== | |||
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; | |||
==Colours== | |||
Hex values of Drumbeat theme: | |||
* Main background beige: #F8F1DD | |||
* Secondary background beige: #F1E2C5 | |||
* Body text: #4C4C4C | |||
* Main Heading Brown: #66401A | |||
* Secondary Heading Green: #5A8013 | |||
* Tertiary Heading Grey: #4C4C4C | |||
* Link orange: #C36931 | |||
Latest revision as of 17:16, 19 November 2010
Drumbeat: Style Guide
Logo
Logo with title
Logo sans title
40x50 Logo for Firefox Start Page Snippet:
Font: Meta / FF MetaBold
Font Colour: #4C4C4C
Grid
The Drumbeat site is designed on a typographic grid:
the vertical grid is set on a text line-height of 20px.
in the horizontal I am working with alternating 20px/60px columns; 12 columns of 60px separated by 20px gutters.
Typography
FontFont Meta
The main title font is Meta Bold. The great news is that FF Meta is now available to license through Typekit for use in web sites: [1] meaning we could license the font for use in the site (no image-based titles!)
CSS Font-Stacks
You can use the following font-stacks in your css typography. You can also go down this list to pick an appropriate font for your non-html based design needs.
Sans-Serif font
font-family: MetaBook-Roman, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, Arial, sans-serif;
Serif font
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
Colours
Hex values of Drumbeat theme:
- Main background beige: #F8F1DD
- Secondary background beige: #F1E2C5
- Body text: #4C4C4C
- Main Heading Brown: #66401A
- Secondary Heading Green: #5A8013
- Tertiary Heading Grey: #4C4C4C
- Link orange: #C36931