Marketplace/Design Style Guide

From MozillaWiki
Jump to: navigation, search
Stop (medium size).png
The Marketplace has been placed into maintenance mode. It is no longer under active development. You can read complete details here.


The Design/UX team began a design style guide in July of 2014. This was to establish a design system that all Marketplace properties could use.

This is still a work-in-progress, and the design itself has evolved since the style guide was last updated.

The development effort of this style guide is an attempt to standardize the aesthetic in code at, and to work with UX to adjust the design components for feasibility of implementation.


  • consistent code for Marketplace properties, via shared components
  • ability to quickly bootstrap a new project
  • ease of developing, making a standard and common development approach for front-end

Implementation Plan

  1. Grid
  2. Media queries
  3. Header
  4. Footer
  5. Navigation
  6. Notifications
  7. Buttons
  8. Pills
  9. Forms (field types, fieldsets, errors, focus, labels, placeholder text)
  10. Elements (modals, tooltips, pagination)
  11. Tables
  12. Images
  13. Video
  14. Usage of z-index
  15. Feed


Initially, integrating it with the shared repositories (for all future projects):

And then, gradually, updating existing properties that use those components.