Print this page

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:

p {
    font-family: "ProximaNovaSoft-Regular", Calibri,
        "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI",
         Arial, sans-serif;

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:

    html, body, p {
        font-family: "ProximaNovaSoft-Regular", Calibri,
            "Gill Sans", "Gill Sans MT", Candara, Segoe,
            "Segoe UI", Arial, sans-serif;
        font-size: 110%;
    input { font-size: 95%; }

Salesforce1 CSS:

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:

A direct link to the github to clone or download is located here:
*Please note that these are not official Salesforce files and will not be supported as such.*

Custom CSS for Salesforce1:

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. 

promote demote