Difference between revisions of "Moon Society 2019 Branding"
(→Noto Sans Font Stack Notes: Typo) |
m (Added link to page with social media image sizes) |
||
(14 intermediate revisions by 2 users not shown) | |||
Line 2: | Line 2: | ||
This is a branding standard that hearkens back to what we have used historically, while tying all colors to official Pantone Coated sRGB values and providing freely redistributable fonts for all typefaces. | This is a branding standard that hearkens back to what we have used historically, while tying all colors to official Pantone Coated sRGB values and providing freely redistributable fonts for all typefaces. | ||
+ | The intended audience for this page is normal people and graphic artists who will be creating simple web pages, print ads, and other rendered art. If you are a CSS developer, you may find Moon Society 2019 Branding Font Stacks of interest. Do not use fonts from low in the stacks for "normal" branding work. | ||
+ | |||
+ | <BR clear="all" /> | ||
==Colors== | ==Colors== | ||
{| role="presentation" | {| role="presentation" | ||
− | | White | + | | '''White''' |
|{{White}} | |{{White}} | ||
+ | | | ||
| <DIV style="background:{{White}}; height:2em; width:2em; height:calc(2em-2px); width:calc(2em-2px); border:1px solid {{CG2C}}"> </DIV> | | <DIV style="background:{{White}}; height:2em; width:2em; height:calc(2em-2px); width:calc(2em-2px); border:1px solid {{CG2C}}"> </DIV> | ||
| | | | ||
Line 11: | Line 15: | ||
| '''Cool Gray 2C''' | | '''Cool Gray 2C''' | ||
|{{CG2C}} | |{{CG2C}} | ||
+ | | | ||
| <DIV style="background:{{CG2C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{CG2C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 16: | Line 21: | ||
| '''Cool Gray 5C''' | | '''Cool Gray 5C''' | ||
|{{CG5C}} | |{{CG5C}} | ||
+ | | | ||
| <DIV style="background:{{CG5C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{CG5C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 21: | Line 27: | ||
| '''Cool Gray 8C''' | | '''Cool Gray 8C''' | ||
|{{CG8C}} | |{{CG8C}} | ||
+ | | | ||
| <DIV style="background:{{CG8C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{CG8C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 26: | Line 33: | ||
| '''Cool Gray 11C''' | | '''Cool Gray 11C''' | ||
| {{CG11C}} | | {{CG11C}} | ||
+ | | | ||
| <DIV style="background:{{CG11C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{CG11C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 31: | Line 39: | ||
| '''433C''' (near-black gray) | | '''433C''' (near-black gray) | ||
| {{433C}} | | {{433C}} | ||
+ | | | ||
| <DIV style="background:{{433C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{433C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 36: | Line 45: | ||
| Black | | Black | ||
| {{Black}} | | {{Black}} | ||
+ | | | ||
| <DIV style="background:{{Black}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{Black}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
|- | |- | ||
− | | ''' | + | | '''310C''' (proposed) |
− | | | + | | {{310C}} |
− | | <DIV style="background: | + | | |
+ | | <DIV style="background: {{310C}}; height:2em; width:2em"> </DIV> | ||
| Cyan to Cerlulean; lighter than MMM Cerulean | | Cyan to Cerlulean; lighter than MMM Cerulean | ||
|- | |- | ||
| '''299C''' (saturated cerulean) | | '''299C''' (saturated cerulean) | ||
| {{299C}} | | {{299C}} | ||
+ | | | ||
| <DIV style="background:{{299C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{299C}}; height:2em; width:2em"> </DIV> | ||
| Closest Pantone match to MMM's historical cerulean | | Closest Pantone match to MMM's historical cerulean | ||
Line 51: | Line 63: | ||
| '''7691C''' (blue) | | '''7691C''' (blue) | ||
| {{7691C}} | | {{7691C}} | ||
+ | | | ||
| <DIV style="background:{{7691C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{7691C}}; height:2em; width:2em"> </DIV> | ||
| Between Space Cadet Blue and MMM Cerulean | | Between Space Cadet Blue and MMM Cerulean | ||
Line 56: | Line 69: | ||
| '''2767C''' (Space Cadet Blue) | | '''2767C''' (Space Cadet Blue) | ||
| {{2767C}} | | {{2767C}} | ||
+ | | | ||
| <DIV style="background:{{2767C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{2767C}}; height:2em; width:2em"> </DIV> | ||
| Best Pantone match for Space Cadet Blue; also hearkens back to the later WSD (2003-2013) website background | | Best Pantone match for Space Cadet Blue; also hearkens back to the later WSD (2003-2013) website background | ||
Line 61: | Line 75: | ||
| '''113C''' (light gold) | | '''113C''' (light gold) | ||
| {{113C}} | | {{113C}} | ||
+ | |250 244 83 | ||
| <DIV style="background:{{113C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{113C}}; height:2em; width:2em"> </DIV> | ||
| hearkens back to Coriolis (2013-2018) website details | | hearkens back to Coriolis (2013-2018) website details | ||
Line 66: | Line 81: | ||
| '''116C''' (medium gold) | | '''116C''' (medium gold) | ||
| {{116C}} | | {{116C}} | ||
+ | |255 205 0 | ||
| <DIV style="background:{{116C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{116C}}; height:2em; width:2em"> </DIV> | ||
| hearkens back to Coriolis (2013-2018) website details | | hearkens back to Coriolis (2013-2018) website details | ||
Line 71: | Line 87: | ||
| '''7555C''' (dark gold) | | '''7555C''' (dark gold) | ||
| {{7555C}} | | {{7555C}} | ||
+ | |210 159 19 | ||
| <DIV style="background:{{7555C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{7555C}}; height:2em; width:2em"> </DIV> | ||
| hearkens back to Coriolis (2013-2018) website details | | hearkens back to Coriolis (2013-2018) website details | ||
Line 76: | Line 93: | ||
| '''7558C''' (brownish gold) | | '''7558C''' (brownish gold) | ||
|{{7558C}} | |{{7558C}} | ||
+ | |150 113 38 | ||
| <DIV style="background:{{7558C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{7558C}}; height:2em; width:2em"> </DIV> | ||
| hearkens back to Coriolis (2013-2018) website details | | hearkens back to Coriolis (2013-2018) website details | ||
Line 81: | Line 99: | ||
| '''Warm Gray 1C''' | | '''Warm Gray 1C''' | ||
| {{WG1C}} | | {{WG1C}} | ||
+ | |215 210 203 | ||
| <DIV style="background:{{WG1C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{WG1C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 86: | Line 105: | ||
| '''Warm Gray 7C''' | | '''Warm Gray 7C''' | ||
| {{WG7C}} | | {{WG7C}} | ||
+ | |150 140 131 | ||
| <DIV style="background:{{WG7C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{WG7C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 91: | Line 111: | ||
| '''411C''' (grayish brown) | | '''411C''' (grayish brown) | ||
| {{411C}} | | {{411C}} | ||
+ | |94 81 77 | ||
| <DIV style="background:{{411C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{411C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 96: | Line 117: | ||
| '''412C''' (brown) | | '''412C''' (brown) | ||
| {{412C}} | | {{412C}} | ||
+ | |56 47 45 | ||
| <DIV style="background:{{412C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{412C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 101: | Line 123: | ||
| '''663C''' (pinkish off-white) | | '''663C''' (pinkish off-white) | ||
| {{663C}} | | {{663C}} | ||
+ | |229 225 230 | ||
| <DIV style="background:{{663C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{663C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 106: | Line 129: | ||
| '''435C''' (chaise mauve) | | '''435C''' (chaise mauve) | ||
| {{435C}} | | {{435C}} | ||
+ | |193 178 182 | ||
| <DIV style="background:{{435C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{435C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 111: | Line 135: | ||
| '''437C''' (lavender) | | '''437C''' (lavender) | ||
| {{437C}} | | {{437C}} | ||
+ | |123 100 105 | ||
| <DIV style="background:{{437C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{437C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 116: | Line 141: | ||
| '''439C''' (dark cherry) | | '''439C''' (dark cherry) | ||
| {{439C}} | | {{439C}} | ||
+ | |69 53 54 | ||
| <DIV style="background:{{439C}}; height:2em; width:2em"> </DIV> | | <DIV style="background:{{439C}}; height:2em; width:2em"> </DIV> | ||
| | | | ||
Line 121: | Line 147: | ||
==Typefaces== | ==Typefaces== | ||
− | *General purpose serif and possibly logo/title: '''Palatino'''/'''Palladio''', with Tex Gyre Pagella as a FOSS and redistributable implementation. | + | *General purpose serif and possibly logo/title: '''Palatino'''/'''Palladio''', with Tex Gyre Pagella as a FOSS and redistributable implementation. It hearkens back to 1990s ASI and Artemis Project branding. |
*Headings and Headlines: '''Spartan''', with Spartan MB as a FOSS redistributable implementation. The League Spartan implementation has been used with MMM. This typeface hearkens back to Gizmo and should compliment it when we have a font. | *Headings and Headlines: '''Spartan''', with Spartan MB as a FOSS redistributable implementation. The League Spartan implementation has been used with MMM. This typeface hearkens back to Gizmo and should compliment it when we have a font. | ||
− | *MMM Headlines and decorative headlines: '''Gizmo'''. Will probably be only one font (Lunar Gizmo?), whose development is a pending action item. | + | *MMM Headlines and decorative headlines: '''Gizmo'''. Will probably be only one font (Lunar Gizmo?), whose development is a pending action item. The proprietary original font appears to be impossible to legitimately acquire, unfortunately. |
*Body text and general purpose sans serif: '''Noto Sans''', which hearkens to Verdana, which was used both on websites and in MMM. | *Body text and general purpose sans serif: '''Noto Sans''', which hearkens to Verdana, which was used both on websites and in MMM. | ||
*Monospace: '''Inconsolata''', which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis). | *Monospace: '''Inconsolata''', which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis). | ||
− | === | + | ==Logos== |
− | + | All logos are in [http://strabo.moonsociety.org/images/moonsoc-logo/ this directory]. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ==Resources== | |
− | + | [https://sproutsocial.com/insights/social-media-image-sizes-guide/ Image Sizes for Social Media] | |
− | : | ||
− | |||
− | |||
− | |||
− | |||
==TODO== | ==TODO== |
Latest revision as of 04:29, 26 March 2021
Contents
This is a branding standard that hearkens back to what we have used historically, while tying all colors to official Pantone Coated sRGB values and providing freely redistributable fonts for all typefaces.
The intended audience for this page is normal people and graphic artists who will be creating simple web pages, print ads, and other rendered art. If you are a CSS developer, you may find Moon Society 2019 Branding Font Stacks of interest. Do not use fonts from low in the stacks for "normal" branding work.
Colors
White |
|
|||
Cool Gray 2C |
|
|||
Cool Gray 5C |
|
|||
Cool Gray 8C |
|
|||
Cool Gray 11C |
|
|||
433C (near-black gray) |
|
|||
Black |
|
|||
310C (proposed) |
|
Cyan to Cerlulean; lighter than MMM Cerulean | ||
299C (saturated cerulean) |
|
Closest Pantone match to MMM's historical cerulean | ||
7691C (blue) |
|
Between Space Cadet Blue and MMM Cerulean | ||
2767C (Space Cadet Blue) |
|
Best Pantone match for Space Cadet Blue; also hearkens back to the later WSD (2003-2013) website background | ||
113C (light gold) |
|
250 244 83 | hearkens back to Coriolis (2013-2018) website details | |
116C (medium gold) |
|
255 205 0 | hearkens back to Coriolis (2013-2018) website details | |
7555C (dark gold) |
|
210 159 19 | hearkens back to Coriolis (2013-2018) website details | |
7558C (brownish gold) |
|
150 113 38 | hearkens back to Coriolis (2013-2018) website details | |
Warm Gray 1C |
|
215 210 203 | ||
Warm Gray 7C |
|
150 140 131 | ||
411C (grayish brown) |
|
94 81 77 | ||
412C (brown) |
|
56 47 45 | ||
663C (pinkish off-white) |
|
229 225 230 | ||
435C (chaise mauve) |
|
193 178 182 | ||
437C (lavender) |
|
123 100 105 | ||
439C (dark cherry) |
|
69 53 54 |
Typefaces
- General purpose serif and possibly logo/title: Palatino/Palladio, with Tex Gyre Pagella as a FOSS and redistributable implementation. It hearkens back to 1990s ASI and Artemis Project branding.
- Headings and Headlines: Spartan, with Spartan MB as a FOSS redistributable implementation. The League Spartan implementation has been used with MMM. This typeface hearkens back to Gizmo and should compliment it when we have a font.
- MMM Headlines and decorative headlines: Gizmo. Will probably be only one font (Lunar Gizmo?), whose development is a pending action item. The proprietary original font appears to be impossible to legitimately acquire, unfortunately.
- Body text and general purpose sans serif: Noto Sans, which hearkens to Verdana, which was used both on websites and in MMM.
- Monospace: Inconsolata, which has two FOSS fonts and was used on our 2013-2018 website design (Coriolis).
Logos
All logos are in this directory.
Resources
TODO
- Determine primary and secondary, and other specified colors from palette
- Wordpress theme for MMM
- Font repository (publicly accessible?)
- Revise branding for wikis and other websites
- Branding sheet