Websites/Mozilla.org/One Mozilla/Style Guide
< Websites | Mozilla.org | One Mozilla
Jump to navigation
Jump to search
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
- [DONE] Complete temporary Persona and Marketplace mini-style guides (4/13)
- Each team to confirm a basic outline of must-have project guidelines for phase 1
- Finalize phase 1 content outline
- Create initial layout and design for guide using existing content
- Gather phase 1 content from product teams
- Begin layout and design for guide using all content
- Finalize layout and design in pdf form
- Begin development phase
- Development complete
assets repository promotion
Content Outline
Intro
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
Products
Products
Firefox
overall design guidelines
phone (subcases: android, b2g)
tablet (subcases: android, metro, possibly kindle)
desktop (subcases: mac, win, linux)
- also, I have the beginnings of a document about this I can share
Thunderbird
Guidelines
Persona
Guidelines
Marketplace
Guidelines
App submission Marketplace graphics requirements/dimensions
App browsing grid styles
Standard glyphs
Default layout theme (color/typography/grain/gradients)
UI elements
B2G "Gaia" (This would go live in the fall)
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
Others/Experiments/Research Projects
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