1. FIREFOX OS GUIDELINESANDREEA POPESCU, 31 OCTOBER 2014, DESIGN JAM

2. @andreea_popescu 3. Sections:ColorPaletteTypefaceHeaders BackgroundsLists ButtonsTab Bars,Toolbars andFiltersInputSwitches, AreasCheckBoxes andSlidersAppIconsActionIcons 4. I. COLOR PALETTE 5. Main ColorsRecommended Gradients 6. Examples 7. II. TYPEFACE 8. Fira Sans LightFira Sans RegularFira Sans MediumFira Sans Bold 9. Examples 10. III. HEADERS 11. Elements of a header1. The left hand side area of the header is reserved for very specificactions: the back navigation button, cancel button and drawer displaybutton. This area is darker and separated from the rest of the header by afull length vertical divider.2. The title is always left aligned while leaving space on the left handside for the button even in the cases where it is not present.3. The right hand side is reserved for action buttons which are divided bya shorter vertical divider. 12. Do vs DontvsExamples 13. IV. BACKGROUNDS 14. backgrounds and headers on Firefox OS screensvary based on the type of screen content.there are two main groups:light screens: communication apps (email,contacts, SMS, etc.)dark screens: media apps (camera, photos,music, etc.)and two system groups:utilitarian screens: settings throughout OSedit mode: whenever an app is in edit mode 15. Examples 16. V. LISTS 17. Common ListsNotificationsDrawer 18. Examples 19. VI. BUTTONS 20. Action ButtonsList ButtonsSpecial Buttons 21. Examples 22. VII. TAB BARS, TOOLBARSAND FILTERS 23. Tab Bars, Toolbars and Filters are main navigationelements affecting the contents of the screen theyare used on.by design they are as neutral and simple aspossible assuring both clarity and legibility.the background of Tab Bars and Filters are opaqueas they change the content view of the screen. Incontrast, Toolbars employ a slightly transparentbackground allowing the content to subtly be seenunderneath.action icons are used on Toolbars which affect thatcontent on screen. 24. Tab BarToolbarFilters 25. VIII. INPUT AREAS 26. Input Text Areasare placed above the keyboard in its active state.Search Areasare background sensitive and have been designedfor implementation with both light and dark apps.They are placed just below the header.Form Fieldsare created when different elements such as valueselectors, input fields and buttons are groupedtogether. 27. Examples 28. IX. SWITCHES, CHECK BOXESAND SLIDERS 29. Checkboxescheck boxes are used to select multiple items within alist while editing.a variety of actions can be applied to selected itemssuch as, marking, moving, downloading, etc.check boxes appear in blue( ) for these types ofactions. When used to select items to be deleted theyare red( ).check boxes are usually located on the left side of thescreen. 30. Radio Buttonsare used as unique selectors on a list. ()Toogle Butttonsturn options and preferences ON and OFF.Ticksare mainly used on selection overlays. The ON state isdenoted with a check mark, while the OFF state is invisible.Sliders and Handlerscan be used to control functions where values increase/decrease such as volume and brightness. Handlers areoutlined in blue when pressed. 31. X. APP ICONS 32. for a Firefox OS app: 60x60 pixel image provided in 24-bitPNG format;each of the standard OS application icons is containedwithin or underlayed with a 58 pixel diameter circle shape.a drop shadow is automatically generated based on theicons silhouette shape;it is recommended that you either:crop your icon with a circle shape;use a circle shape as a backdrop (you can find somecircle shapes provided by Mozilla). 33. Correct vs Incorrectvsvs vsExamplesvs 34. XI. ACTION ICONS 35. a Firefox OS action icon is a 30x30 image provided in 24-bitPNG format. In some places, the dimensions can vary. Forexample, active call action icons are 40x40 pixel.action Icons should look both:confident means action-oriented and trustworthy;approachable means friendly, inviting the user to touch.it is recommended that you either:crop your icon with a circle shape;use a circle shape as a backdrop.designers should re-use existing components whereverpossible, to maintain maximum consistency. For example, ifyou need an X or a + in your icon, reuse one previouslydesigned. 36. Icons- bookmarked - markedExamples 37. QUESTIONS? 38. CREDITS:MOZILLA.ORG/EN-US/STYLEGUIDE/PRODUCTS/FIREFOX-OS