Websites/Mozilla.org/One Mozilla/Style Guide

Goal

Codify a common visual language for Mozilla to be used everywhere we connect with users (product, websites, marketing, etc).

Get Involved

Join the regular One Mozilla meetings to help us create this style guide.

• Time: Every Wednesday at 10:30 a.m. Pacific
• Dial-in: 1-800-707-2533, password 369, conference room 95704

You can also join the discussion at any time on our Mozilla chat server in #style. Learn more about how to use our chat server.

Overview

The Team:

• Responsible: Sean Martell
• Accountable: John Slater
• Support: Stephen Horlander, Patryk Adamczyk, Josh Carpenter, Matej Novak, Bryan Clark, Crystal Beasley
• Consulted: Madhava Enros, Ian Barlow, Ty Flanagan, Lee Tom, Jason Grlicky, Chris Appleton, Blake Winton
• Informed: Pete Scanlon, Jinghua Zhang

(RASCI background)

IRC: #style

Target Audience: Mozillians (paid and unpaid) looking to visually represent the brand in any form.

Action Plan

• (4/13) Complete temporary Persona and Marketplace mini-style guides [DONE]
  • Persona guide
  • Marketplace guide
• (4/20) Each team to confirm a basic outline of must-have project guidelines for phase 1
• (4/24) Finalize overall content outline
• (5/04) Create initial layout and design for guide using existing content
• (5/04) Gather initial content from product teams
• (5/07) Begin layout and design for guide using all content
• (5/11) Finalize harmonized content from product and marketing teams
• (5/28) Finalize layout and design in pdf form
• (5/30) Begin development phase
• (TBD) Launch assets repository
• (TBD) Development complete; launch guide
• (TBD) Evangelize guide to all Mozillians

Content Outline

Intro

• What the guide is
• How to use it

Identity

• Brands
  • Mozilla
    • Visual identity guidelines (includes building out a Mozilla style more than we've done in the past; also includes defining when the dino should and shouldn't be used) [Bug 749440, Bug 749442]
    • Brand platform (if there is one)
    • Sub-brands (Webmaker, Popcorn, Spaces, etc)
  • Firefox
    • Visual identity guidelines (inc. logos and wordmarks)
    • Brand platform
  • Marketplace
    • Visual identity guidelines (inc. logos and wordmarks)
  • Persona
    • Visual identity guidelines (inc. logos and wordmarks)
  • B2G
    • Visual identity guidelines (inc. logos and wordmarks)
• Typography
  • Typefaces
  • Common Styles
  • Alternates
• Communications materials
  • Standard device illustrations
  • Gear [Bug 749445]
  • Collateral (ex. sample banner for trade shows) [Bug 749443]
  • Corporate ID [Bug 749443]
  • Presentation templates [Bug 749443]
• Copy
  • Tone
  • Rules
  • Localization info
    • include info on which words are and aren't localized (ex. browser, themes, Persona, etc)

Websites

• Sandstone overview [Bug 749508]
  • Responsive grid
  • Tabzilla
  • Backgrounds
  • Typography
  • Button styles
  • Examples gallery (to provide guidance on how the style can be stretched, and what constitutes a Mozilla design)
• Direction on different styles (ex. orange download funnel pages vs blue informational pages on the Fx site) [Bug 749508]
• Blog templates and details [Bug 749508]
• URL structure

Product Design

Firefox (General)

[Bug 749509]

• Overall design principles
  • Beautiful Engaging Design
  • Soft, Friendly, Human
  • Distinctive and Unified

• Firefox Design forms
  • Tabs & Shapes
  • Colour
  • Texture
  • Basic icon style guide?

Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire)

[Bug 749510

• INTRODUCTION
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Layers
  • Screen sizes

• TITLE BAR
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Controls
    • URLBar
    • Indicators

• MENUS / PANELS
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Overflow Menu
    • Doorhanger notifications
    • Site ID Menu

• AWESOMEBAR
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Top Sites tab
    • History tab
    • Bookmarks tab
    • Search suggest

• TABS
  • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Controls (New / Close / Undo / Notifications)
    • Local / Remote tabs

• IN-CONTENT UI
  • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Start page
    • Blank page
    • Error pages
    • Channel-specific branding

• GESTURE SUPPORT
  • one-fingered dragging to scroll pages
  • double tap to zoom / unzoom
  • pinch to zoom
  • long press links for context menu (open in new tab, etc)
  • long press text to activate text selection mode
  • two-fingered side to side dragging for back / forward controls

Desktop (Windows, Mac, Linux)

[Bug 749511]

• INTRODUCTION
  • Overall UI
    • General (Colors / Textures / Forms)
  • Common Elements (Buttons / Fields / Shapes / Icons / Thumbnails)

• MAIN WINDOW
  • Overview (Key parts of the UI)
  • Parts (for each: Styles and Dimensions)
    • Window Frame
    • Tabs
    • NavBar
      • URL Bar
    • BookmarksBar
    • Additional Toolbars
    • Buttons, Controls and Icons
    • Indicators (Addons / ID / Security / Geolocation / Password / AppInstall)

• PANELS
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Types of Panels (Notifcation / Bookmarks / Downloads / General)
  • Parts (for each: Styles and Dimensions)
    • Panel Frame
    • Panel Areas (Notification Icon / Header / Toolbar)

• AWESOMEBAR
  • Overview (Key parts of the UI)
    • General (Colors / Textures / Forms)
  • Parts (for each: Styles and Dimensions)
    • Results (Normal / Bookmarked / Tabs / Search Suggest )

• TABS
  • Types (App Tabs/ Local / Remote)
  • Parts (New / Close / Undo / Tab Notifiactions)

• IN-CONTENT UI
  • Overview (Keys parts of the UI)
  • Types (Dashboard / Complex UI / Error)
  • Parts (for each: Styles and Dimensions)
    • Thumbnails
    • Categories
    • Notifications
    • Controls (Buttons / Fields / Widgets )

• SIDEBARS
  • Overview (Keys parts of the UI)
  • Types (History / Bookmarks)
  • Parts (for each: Styles and Dimensions)
    • Header
    • Search
    • List Items

Thunderbird

[Bug 749511]

• Guidelines

Marketplace

[Bug 749514]

• Guidelines
• App submission Marketplace graphics requirements/dimensions
• App browsing grid styles
• Standard glyphs
• Default layout theme (color/typography/grain/gradients)
• UI elements

Persona

[Bug 749516]

• Popup
  • Guidelines
  • Default layout theme (color/typography/grain/gradients)
  • UI elements
    • Primary button
    • Secondary button
    • Error styles
    • Default avatar
    • Lightbox style
• persona.org
  • Home page
  • Tour
  • Manage page
  • Apps dashboard
• Native UI
  • Sign into the browser
  • Sign into sites (mirrors the popup functionality)

B2G (Gaia)

[Bug 749517]

• Design principles
• Design framework
  • Patterns
    • Gestures
    • App structure
    • Navigation
    • Selection
    • Notifications
    • Flexibility
  • Building blocks
  • Tabs
    • Lists
    • Grid lists
    • Scrolling
    • Spinners
    • Choice selector
    • Buttons
    • Text fields
    • Seek, progress & activity
    • Switches
    • Dialogs
• Visual language
  • Devices and displays
  • Metrics and grids
  • Typography
  • Color
  • Iconography

Innovations

• • Pancake
  • WebFWD
  • Labs
  • Popcorn.js
  • etc

Assets (eventually using assets.mozilla.org as a common repository)

• Logos
• Fonts
• Code
  • Sandstone details
  • Tabzilla GitHub
  • Footer GitHub
• Useful marketing design PSDs
• Product design guides/PSDs

Miscellany

• Notes and ideas from kickoff meeting
• First pass at milestones
• Interesting references:
  • Android
  • Starbucks
  • gov.uk