How to reproduce the look & feel of standard Salesforce1 in a visualforce page
|Knowledge Article Number||000206705|
Font & Styles:
If in your visualforce page, you are just wanting to implement the same Fonts and Style that are found in Salesforce1 you'll want to use Proxima Nova, a sans-serif typeface licensed specially for Salesforce1. People in your organization might not have the font installed on their devices, but the following CSS fonts will use the closest matching font available:
Change the selectors to match the appropriate text blocks and styles on your pages.
You might also consider slightly increasing the size of the font used for normal text and form elements. This makes them easier to read and, for form elements, to tap into. Here’s a complete style block to get you started:
Directly referencing Salesforce1 style sheets in your pages, or depending on styles found in them, isn’t supported. As Salesforce1 evolves, the styles will change in ways that you won’t expect. Pages that depend on unsupported styles may eventually break.
Developer Evangelist for Salesforce, Josh Birk, has written a jQuery plugin called OneStarter that includes customizable CSS files that emulate the look & feel of Salesforce1. Josh's writeup explaining how to use the OneStarter jquery plugin, located here: https://developer.salesforce.com/blogs/developer-relations/2014/03/styling-for-salesforce1-mobile-with-the-onestarter-jquery-plugin.html
We have the Salesforce1 Style Guide to help you in designing from the groundup the CSS you want to use for your visualforce pages in Salesforce1. http://sfdc-styleguide.herokuapp.com/