Difference between revisions of "Moon Society 2019 Branding"

From Lunarpedia
Jump to: navigation, search
Tycho>Strangelv
(→‎Noto Sans: Remembered to not use Droid Sans a it will result in Roboto, which is not a good match at all)
m (Added link to page with social media image sizes)
 
(24 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
<DIV style="float:right">__TOC__</DIV>
 
<DIV style="float:right">__TOC__</DIV>
−
This is a branding proposal that harkens 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.
  
−
TODO:
+
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.
−
*<S>Finalize typeface choices</S>
 
−
*<S>Working font stacks</S>
 
−
*Font repository (publicly accessible?)
 
−
*Finalize Cyan color
 
−
*Logo/wordmark revision
 
−
*Determine primary and secondary, and other specified colors from palette
 
−
*Revise branding for wikis and other websites
 
−
*Branding sheet
 
  
 +
<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}}">&nbsp;</DIV>
 
| <DIV style="background:{{White}}; height:2em; width:2em; height:calc(2em-2px); width:calc(2em-2px); border:1px solid {{CG2C}}">&nbsp;</DIV>
 
|  
 
|  
Line 21: Line 15:
 
| '''Cool Gray 2C'''
 
| '''Cool Gray 2C'''
 
|{{CG2C}}
 
|{{CG2C}}
 +
|
 
| <DIV style="background:{{CG2C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{CG2C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 26: Line 21:
 
| '''Cool Gray 5C'''
 
| '''Cool Gray 5C'''
 
|{{CG5C}}
 
|{{CG5C}}
 +
|
 
| <DIV style="background:{{CG5C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{CG5C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 31: Line 27:
 
| '''Cool Gray 8C'''
 
| '''Cool Gray 8C'''
 
|{{CG8C}}
 
|{{CG8C}}
 +
|
 
| <DIV style="background:{{CG8C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{CG8C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 36: Line 33:
 
| '''Cool Gray 11C'''
 
| '''Cool Gray 11C'''
 
| {{CG11C}}
 
| {{CG11C}}
 +
|
 
| <DIV style="background:{{CG11C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{CG11C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 41: Line 39:
 
| '''433C''' (near-black gray)
 
| '''433C''' (near-black gray)
 
| {{433C}}
 
| {{433C}}
 +
|
 
| <DIV style="background:{{433C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{433C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 46: Line 45:
 
| Black
 
| Black
 
| {{Black}}
 
| {{Black}}
 +
|
 
| <DIV style="background:{{Black}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{Black}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
 
|-
 
|-
−
| '''PENDING''' (cyan?)
+
| '''310C''' (proposed)
−
| PENDING
+
| {{310C}}
−
| <DIV style="background:#05C3DE; height:2em; width:2em">&nbsp;</DIV>
+
|
 +
| <DIV style="background: {{310C}}; height:2em; width:2em">&nbsp;</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">&nbsp;</DIV>
 
| <DIV style="background:{{299C}}; height:2em; width:2em">&nbsp;</DIV>
 
| Closest Pantone match to MMM's historical cerulean
 
| Closest Pantone match to MMM's historical cerulean
Line 61: Line 63:
 
| '''7691C''' (blue)
 
| '''7691C''' (blue)
 
| {{7691C}}
 
| {{7691C}}
 +
|
 
| <DIV style="background:{{7691C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{7691C}}; height:2em; width:2em">&nbsp;</DIV>
 
| Between Space Cadet Blue and MMM Cerulean
 
| Between Space Cadet Blue and MMM Cerulean
Line 66: Line 69:
 
| '''2767C''' (Space Cadet Blue)
 
| '''2767C''' (Space Cadet Blue)
 
| {{2767C}}
 
| {{2767C}}
 +
|
 
| <DIV style="background:{{2767C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{2767C}}; height:2em; width:2em">&nbsp;</DIV>
−
| Best Pantone match for Space Cadet Blue; also harkens 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
 
|-
 
|-
 
| '''113C''' (light gold)
 
| '''113C''' (light gold)
 
| {{113C}}
 
| {{113C}}
 +
|250 244 83
 
| <DIV style="background:{{113C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{113C}}; height:2em; width:2em">&nbsp;</DIV>
−
| Harkens back to Coriolis (2013-2018) website details
+
| hearkens back to Coriolis (2013-2018) website details
 
|-
 
|-
 
| '''116C''' (medium gold)
 
| '''116C''' (medium gold)
 
| {{116C}}
 
| {{116C}}
 +
|255 205 0
 
| <DIV style="background:{{116C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{116C}}; height:2em; width:2em">&nbsp;</DIV>
−
| Harkens back to Coriolis (2013-2018) website details
+
| hearkens back to Coriolis (2013-2018) website details
 
|-
 
|-
 
| '''7555C''' (dark gold)
 
| '''7555C''' (dark gold)
 
| {{7555C}}
 
| {{7555C}}
 +
|210 159 19
 
| <DIV style="background:{{7555C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{7555C}}; height:2em; width:2em">&nbsp;</DIV>
−
| Harkens back to Coriolis (2013-2018) website details
+
| hearkens back to Coriolis (2013-2018) website details
 
|-
 
|-
 
| '''7558C''' (brownish gold)
 
| '''7558C''' (brownish gold)
 
|{{7558C}}
 
|{{7558C}}
 +
|150 113 38
 
| <DIV style="background:{{7558C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{7558C}}; height:2em; width:2em">&nbsp;</DIV>
−
| Harkens back to Coriolis (2013-2018) website details
+
| hearkens back to Coriolis (2013-2018) website details
 
|-
 
|-
 
| '''Warm Gray 1C'''
 
| '''Warm Gray 1C'''
 
| {{WG1C}}
 
| {{WG1C}}
 +
|215 210 203
 
| <DIV style="background:{{WG1C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{WG1C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 96: Line 105:
 
| '''Warm Gray 7C'''
 
| '''Warm Gray 7C'''
 
| {{WG7C}}
 
| {{WG7C}}
 +
|150 140 131
 
| <DIV style="background:{{WG7C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{WG7C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 101: Line 111:
 
| '''411C''' (grayish brown)
 
| '''411C''' (grayish brown)
 
| {{411C}}
 
| {{411C}}
 +
|94 81 77
 
| <DIV style="background:{{411C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{411C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 106: Line 117:
 
| '''412C''' (brown)
 
| '''412C''' (brown)
 
| {{412C}}
 
| {{412C}}
 +
|56 47 45
 
| <DIV style="background:{{412C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{412C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 111: Line 123:
 
| '''663C''' (pinkish off-white)
 
| '''663C''' (pinkish off-white)
 
| {{663C}}
 
| {{663C}}
 +
|229 225 230
 
| <DIV style="background:{{663C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{663C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 116: Line 129:
 
| '''435C''' (chaise mauve)
 
| '''435C''' (chaise mauve)
 
| {{435C}}
 
| {{435C}}
 +
|193 178 182
 
| <DIV style="background:{{435C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{435C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 121: Line 135:
 
| '''437C''' (lavender)
 
| '''437C''' (lavender)
 
| {{437C}}
 
| {{437C}}
 +
|123 100 105
 
| <DIV style="background:{{437C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{437C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 126: Line 141:
 
| '''439C''' (dark cherry)
 
| '''439C''' (dark cherry)
 
| {{439C}}
 
| {{439C}}
 +
|69 53 54
 
| <DIV style="background:{{439C}}; height:2em; width:2em">&nbsp;</DIV>
 
| <DIV style="background:{{439C}}; height:2em; width:2em">&nbsp;</DIV>
 
|  
 
|  
Line 131: 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 harkens 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 be only one font (Infinite Loop 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 harkens 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).
  
−
===Font Stacks and CSS===
+
==Logos==
−
====Palatino/Palladio====
+
All logos are in [http://strabo.moonsociety.org/images/moonsoc-logo/ this directory].
−
<TT><PRE>
 
−
.pagella
 
−
  {
 
−
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", Palladio, "URW Palladio L", "Palatino Novo", "TeX Gyre Pagella", "Palazzo Original", "Marathon Serial", "Book Antiqua", "FPL Neu", Perpetua, Tinos, Libertine, "Linux Libertine", Garamond, serif
 
−
    }
 
−
</PRE></TT>
 
  
−
Present plan is to use just a font stack for web implementation.
+
==Resources==
−
=====Palatino/Palladio Font Stack Notes=====
+
[https://sproutsocial.com/insights/social-media-image-sizes-guide/ Image Sizes for Social Media]
−
'''Various Implementations of Palatino/Palladio.'''
 
−
*'''Palatino'''
 
−
*'''Palatino Linotype'''
 
−
*'''Palatino LT STD'''
 
−
*'''Palladio'''
 
−
*'''URW Palladio L'''
 
−
*'''Palatino Novo'''
 
−
*'''TeX Gyre Pagella'''
 
−
::A completely FOSS implementation that might be the basis for in-house custobmization.  Is often included with systems that include software that uses TeX as a dependency or just users and distros using the TeX Gyre fonts as a handy base.
 
−
*'''Palazzo Original'''
 
−
*'''Marathon Serial'''
 
−
*'''Book Antiqua'''
 
−
*'''FPL Neu'''
 
  
−
'''Misc'''
+
==TODO==
−
*'''Perpetua'''
+
*Determine primary and secondary, and other specified colors from palette
−
:: This is another typeface that appears to have been used historically, including the ARTEMIS logo.  It's arguably close enough to Palatino/Palladio.
+
*Wordpress theme for MMM
−
 
+
*Font repository (publicly accessible?)
−
'''Better than Most Possiblities'''
+
*Revise branding for wikis and other websites
−
*'''Libertine'''
+
*Branding sheet
−
*'''Linux Libertine'''
 
−
::Libertine/Linux Libertine is often bundled with Linux distros
 
−
*'''Tinos'''
 
−
::A variant of Libertine that is often found on Chromebooks
 
−
 
 
−
*'''Garamond'''
 
−
::A typeface with a lot of variants, some of which are closer to Palatino than others.  This is basically a Hail Mary pass before subjecting the visitor with whatever their serif default is.
 
−
 
 
−
====Noto Sans====
 
−
<TT><PRE>
 
−
.noto-sans
 
−
  {
 
−
    font-family: "Noto Sans", Verdana, "DejaVu Sans", "Bitstream Vera Sans", OpenSans, "Open Sans", SourceSans, SourceSansPro, "Source Sans", "Source Sans Pro", Carlito, sans-serif
 
−
    }
 
−
</PRE></TT>
 
−
 
 
−
Present plan is to use just a font stack for web implementation.
 
−
 
 
−
====Spartan====
 
−
<TT><PRE>
 
−
H1, H2, H3, H4, H5, H6
 
−
  {
 
−
    font-family: Webfont-Spartan, Spartan, "Spartan MB", "League Spartan", "Century Gothic", CenturyGothic, "Tw Cen MT", "Tw Cen", "Twentieth Century", Tw-Cen-MT, Tw-Cen, Twentieth-Century, Futura, Futura-Medium, "Futura Medium", "Futura PT", Avenir, AvenirNext, "Avenir Next", Insignia, "URW Gothic L", "Gothic L", "Avant Garde", AvantGarde, "Tex Gyre Adventor", TexGyreAdvendor, Circular, "GT Walsheim", Walsheim, Brown, "Harmonia Sans", HarmoniaSans, "Plate Gothic", sans-serif;
 
−
    }
 
−
 
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.black-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.black-webfont.woff') format('woff'),
 
−
        url('spartan-mb.black-webfont.ttf') format('truetype');
 
−
    font-weight: 900;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.extrabold-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.extrabold-webfont.woff') format('woff'),
 
−
        url('spartan-mb.extrabold-webfont.ttf') format('truetype');
 
−
    font-weight: 800;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.bold-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.bold-webfont.woff') format('woff'),
 
−
        url('spartan-mb.bold-webfont.ttf') format('truetype');
 
−
    font-weight: 700;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.semibold-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.semibold-webfont.woff') format('woff'),
 
−
        url('spartan-mb.semibold-webfont.ttf') format('truetype');
 
−
    font-weight: 600;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.regular-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.regular-webfont.woff') format('woff'),
 
−
        url('spartan-mb.regular-webfont.ttf') format('truetype');
 
−
    font-weight: 400;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.light-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.light-webfont.woff') format('woff'),
 
−
        url('spartan-mb.light-webfont.ttf') format('truetype');
 
−
    font-weight: 300;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Webfont-Spartan';
 
−
    src: url('spartan-mb.thin-webfont.woff2') format('woff2'),
 
−
        url('spartan-mb.thin-webfont.woff') format('woff'),
 
−
        url('spartan-mb.thin-webfont.ttf') format('truetype');
 
−
    font-weight: 100;
 
−
    font-style: normal;
 
−
    }
 
−
</PRE></TT>
 
  
−
====Inconsolata====
+
[[Category:Moon Society]]
−
<TT><PRE>
 
−
.inconsolata
 
−
  {
 
−
    font-family: Web_Inconsolata, Inconsolata, InconsolataMedium, Consolas, Menlo, Monaco, monospace;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Web_Inconsolata';
 
−
    src: url('inconsolata.bold-webfont.woff2') format('woff2'),
 
−
        url('inconsolata.bold-webfont.woff') format('woff'),
 
−
        url('inconsolata.bold-webfont.ttf') format('truetype');
 
−
    font-weight: 700;
 
−
    font-style: normal;
 
−
    }
 
−
@font-face
 
−
  {
 
−
    font-family: 'Web_Inconsolata';
 
−
    src: url('inconsolata-webfont.woff2') format('woff2'),
 
−
        url('inconsolata-webfont.woff') format('woff'),
 
−
        url('inconsolata-webfont.ttf') format('truetype');
 
−
    font-weight: 400;
 
−
    font-style: normal;
 
−
    }
 
−
</PRE></TT>
 

Latest revision as of 04:29, 26 March 2021

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
  1. FFFFFF
 
Cool Gray 2C
  1. D0D0CE
 
Cool Gray 5C
  1. B1B3B3
 
Cool Gray 8C
  1. 888B8D
 
Cool Gray 11C
  1. 53565A
 
433C (near-black gray)
  1. 1D252D
 
Black
  1. 000000
 
310C (proposed)
  1. 6AD1E3
 
 Cyan to Cerlulean; lighter than MMM Cerulean
299C (saturated cerulean)
  1. 00A3E0
 
 Closest Pantone match to MMM's historical cerulean
7691C (blue)
  1. 006298
 
 Between Space Cadet Blue and MMM Cerulean
2767C (Space Cadet Blue)
  1. 13294B
 
 Best Pantone match for Space Cadet Blue; also hearkens back to the later WSD (2003-2013) website background
113C (light gold)
  1. FAE053
 250 244 83
 
 hearkens back to Coriolis (2013-2018) website details
116C (medium gold)
  1. FFCD00
 255 205 0
 
 hearkens back to Coriolis (2013-2018) website details
7555C (dark gold)
  1. D29F13
 210 159 19
 
 hearkens back to Coriolis (2013-2018) website details
7558C (brownish gold)
  1. 967126
 150 113 38
 
 hearkens back to Coriolis (2013-2018) website details
Warm Gray 1C
  1. D7D2CB
 215 210 203
 
Warm Gray 7C
  1. 968C83
 150 140 131
 
411C (grayish brown)
  1. 5E514D
 94 81 77
 
412C (brown)
  1. 382F2D
 56 47 45
 
663C (pinkish off-white)
  1. E5E1E6
 229 225 230
 
435C (chaise mauve)
  1. C1B2B6
 193 178 182
 
437C (lavender)
  1. 7B6469
 123 100 105
 
439C (dark cherry)
  1. 453536
 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

Image Sizes for Social Media

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
Retrieved from "https://lunarpedia.org/index.php?title=Moon_Society_2019_Branding&oldid=116271"