Websites/Mozilla.org/One Mozilla/Style Guide
< Websites | Mozilla.org | One Mozilla
Goal
Codify a common visual language for Mozilla to be used everywhere we connect with users (product, websites, marketing, etc).
Overview
The Team:
- Responsible: Sean Martell
- Accountable: John Slater
- Support: Stephen Horlander, Patryk Adamczyk, Josh Carpenter, Matej Novak
- Consulted: Madhava Enros, Ian Barlow, Ty Flanagan, Lee Tom, Bryan Clark, Crystal Beasley, Jason Grlicky, Chris Appleton, Blake Winton
- Informed: Pete Scanlon, Jinghua Zhang
IRC: #style
Target Audience:
Action Plan
- (4/13) Complete temporary Persona and Marketplace mini-style guides [DONE]
- (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
(DRAFT: APRIL 17)
Intro
- What the guide is
- How to use it
Identity
- Brands
- Mozilla
- Visual identity
- Brand platform (if there is one)
- Sub-brands (Webmaker, Popcorn, Spaces, etc)
- Firefox
- Visual identity
- Brand platform
- Marketplace
- etc
- Mozilla
- Typography
- Artwork
- Copy
Brand/Identity
- Brand Platform
- Promise
- Positioning
- Pillars
- Voice
- Manifesto
- Visual Identity
- Guidelines
- Logos
- Wordmarks
- Typography
- Typefaces
- Common Styles
- Alternates
- Artwork
- Standard device illustrations
- Gear
- Copy
- Tone
- Rules
- Localization info
Websites
- Sandstone overview
- Responsive grid
- Tabzilla
- Backgrounds
- Typography
- Button styles
- Examples gallery
- URL structure
Product Design
- Firefox
- Overall design guidelines
- Mobile (Smartphones, 7" & 10" Tablets: Android, B2G, Metro, Kindle Fire)
- TITLE BAR
- Primary controls (Back / Forward / Stop / Refresh / Bookmark
- URL Bar with Title
- Indicators (Addons / ID / Security)
- Site ID Menu
- Overflow Menu
- AWESOMEBAR
- Top Sites tab
- History tab
- Bookmarks tab
- Search suggest
- TABS
- Local / Remote tabs
- New / close / Undo close tabs
- IN-CONTENT UI
- Basic styling
- 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
- TITLE BAR
- Desktop (Windows, Mac, Linux)
- Thunderbird
- Guidelines
- Marketplace
- Guidelines
- App submission Marketplace graphics requirements/dimensions
- App browsing grid styles
- Standard glyphs
- Default layout theme (color/typography/grain/gradients)
- UI elements
- Persona
- Guidelines
- Default layout theme (color/typography/grain/gradients)
- UI elements
- B2G (Gaia)
- 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
- Patterns
- 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: