Persona

Style primer

Your design resource destination for all things Marketplace.

Branding

Logo and wordmark

back to top

Typeface

Open Sans

back to top

Type examples

body text

body {font: 14px/21px 'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}

Global headline style

.headline-main, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75); color: rgb(66,79,90);}

Main header

.headline-main {font-size: 48px; letter-spacing: -2px; line-height: 100%;}

headline 1

h1 {font-size: 36px; letter-spacing: -1.5px; line-height: 100%;}

headline (white)

h1 {font-size: 36px; letter-spacing: -1.5px; line-height: 100%;}
.white {color: rgba(255,255,255,1); text-shadow: 0px 1px 0px rgba(0,0,0,0.25);}

headline 2

h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}

headline 3

h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}

headline 4

h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}

small

.small, small { font-size: 12px; line-height: 100%;}

Font Download

Download Open Sans - Light, Regular, Bold

UI elements

Buttons and glyphs

back to top

Tone

Copy examples

back to top

Marketing

One liner:
"Sign into sites across the Web quickly and easily with a single email of your choice."

Base description:
"Mozilla Persona makes it easy to sign into sites across the Web with a single email of your choice and enables you to decide what information you want to share and what you'd prefer to keep private. It's part of our mission to keep you in control of your online experiences and to put the power of the Web in your hands."

A note on naming and usage:

Persona is the user-facing name of the sign-in service powered by Browser ID. While Browser ID remains as a term that developers see, it should never be used in any consumer facing touchpoints. In use on the Web, Persona is the only term a user should ever encounter. The name is to be used in all languages, never localized or translated.

Layout

Design PSDs

back to top