This is our primary logo. Use it 99% of the time to represent the brand.
This logo should only be used in contexts where the primary logo will not work. When the presentation is square or circular the primary logo can appear too small. For example, this version is what we tend to use as our social media avatar.
Note: The chat bubble is slightly thinner on the secondary logo.
Red
red
ms-red
#c52f31
rgb(197,47,49)
Dark Red
red-dark
ms-dark-red
#8e232d
rgb(142,35,45)
Blue
blue
ms-primary-blue
#435573
Navy
navy
ms-navy2
#303b4e
rgb(48,59,78)
Used in footers and headers on web
Dark Navy
navy-dark
ms-navy
#222c3c
rgb(34,44,60)
Brave version; logo
Lightest Blue
blue-lightest
ms-lightest-blue
#e8f2f9
rgb(232,242,249)
Light Blue
blue-light
ms-light-blue
#83b8d1
rgb(131,184,209)
Teal
Accent Only
teal
ms-teal
#417e96
rgb(65,126,150)
Lightest Grey
grey-lightest
ms-grey-1
#eaebeb
Lighter Grey
grey-lighter
ms-grey-2
#bcbcbc
rgb(188,188,188)
Light Grey
grey-light
ms-grey-3
#929291
rgb(146,146,145)
Grey
grey
ms-grey-4
#545555
rgb(84,85,85)
Standard font color
Black
black
ms-black
#292929
rgb(41,41,41)
White
white
#ffffff
rgb(255,255,255)
* see notes on pantone from Casey
Not a true typographic scale. This is combination the Tachyons scale, the styleguide from the designer, and what actually got used on the web.
| We are the Mods | 60px | ms-60 | text-7xl |
| We are the Mods | 48px | f1 | text-6xl |
| We are the Mods | 40px | ms-40 | text-5xl |
| We are the Mods | 36px | f2 | text-4xl |
| We are the Mods | 28px | ms-28 | text-3xl |
| We are the Mods | 24px | f3 | text-2xl |
| We are the Mods | 20px | f4 | text-xl |
| We are the Mods | 18px | ms-18 | text-lg |
| We are the Mods | 16px | f5 | text-base |
| We are the Mods | 14px | f6 | text-sm |
We have two primary fonts: Futura and Proxima Nova. Both are served by Adobe Typekit on the web.
Primarily used as a headline font in all uppercase with a bit of tracking. It breaks down when headlines get long — use your judgement.
We are the Mods
We are the Mods
Standard Classes: uppercase, tracking-wide
Availible Weights
| We are the Mods weights | 400 | normal |
| We are the Mods weights | 700 | bold |
Can be used in subheadings and for headlines when all cap Futura gets unweildy.
We are the Mods
Availible Weights
| We are the Mods weights | 100 | hairline |
| We are the Mods weights | 300 | light |
| We are the Mods weights | 400 | normal |
| We are the Mods weights | 600 | semibold |
| We are the Mods weights | 700 | bold |
Paragraphs are set it Proxima Nova at 16px (font-base). Initial line height was 2 (tw: leading-loose), but we've been scaling that down to a more readable 1.5 (leading-normal). Initial design didn't settle on a specific measure. Newer pages try to keep the line length at a reasonable measure.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
| We are the Mods weights | 100 | hairline | |
| We are the Mods weights | 200 | thin | x |
| We are the Mods weights | 300 | light | |
| We are the Mods weights | 400 | normal | |
| We are the Mods weights | 500 | medium | x |
| We are the Mods weights | 600 | semibold | |
| We are the Mods weights | 700 | bold | |
| We are the Mods weights | 800 | extrabold | x |
| We are the Mods weights | 900 | black | x |
| We are the Mods weights | 100 | hairline | x |
| We are the Mods weights | 200 | thin | x |
| We are the Mods weights | 300 | light | x |
| We are the Mods weights | 400 | normal | |
| We are the Mods weights | 500 | medium | x |
| We are the Mods weights | 600 | semibold | x |
| We are the Mods weights | 700 | bold | |
| We are the Mods weights | 800 | extrabold | x |
| We are the Mods weights | 900 | black | x |