Moon Society 2019 Branding

From Lunarpedia
Revision as of 10:47, 23 September 2019 by Tycho>Strangelv (→‎Candidate Typefaces: Renaming section.)
Jump to: navigation, search

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.

TODO:

  • Finalize typeface choices
  • 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

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
 
PENDING (cyan?) PENDING
 
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 harkens back to the later WSD (2003-2013) website background
113C (light gold)
  1. FAE053
 
Harkens back to Coriolis (2013-2018) website details
116C (medium gold)
  1. FFCD00
 
Harkens back to Coriolis (2013-2018) website details
7555C (dark gold)
  1. D29F13
 
Harkens back to Coriolis (2013-2018) website details
7558C (brownish gold)
  1. 967126
 
Harkens back to Coriolis (2013-2018) website details
Warm Gray 1C
  1. D7D2CB
 
Warm Gray 7C
  1. 968C83
 
411C (grayish brown)
  1. 5E514D
 
412C (brown)
  1. 382F2D
 
663C (pinkish off-white)
  1. E5E1E6
 
435C (chaise mauve)
  1. C1B2B6
 
437C (lavender)
  1. 7B6469
 
439C (dark cherry)
  1. 453536
 

Typefaces

  • General purpose serif and possibly logo/title: Palatino/Palladio, with Tex Gyre Pagella as a FOSS and redistributable implementation.
  • 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.
  • MMM Headlines and decorative headlines: Gizmo. Will be only one font (Infinite Loop Gizmo), whose development is a pending action item.
  • Body text and general purpose sans serif: Noto Sans, which harkens 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).

Font Stacks and CSS

Palatino/Palladio

.pagella
   {
    font-family: Palatino, "Palatino Linotype", "Palatino LT STD", Palladio, "URW Palladio L", "Palatino Novo", "TeX Gyre Pagella", "Palazzo Original", "Marathon Serial", "Book Antiqua", "Zapf Calligraphic", "FPL Neu", Libertine, "Linux Libertine", Perpetua, Garamond, serif
    }

Noto Sans

FONT STACK IS PENDING

Spartan

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; 
    }

Inconsolata

.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;
    }