UI Guidelines

Follow these guidelines for iSHARE sign-in button

../_images/signin.png

iSHARE logo

The below URL should be used for the visual asset of the button. This allows us to approximate anonymized usage statistics of the logo.

https://so.ishareworks.org/isharelogo.svg

Also, you can use iSHARE SVG files that are available for download:

Equal prominence

The iSHARE Sign-In button must be displayed at least as prominently as other third party sign-in options. For example, buttons should be approximately the same size and have similar visual weight.

Matching your own app’s style

Using the standard iSHARE Sign-In button is strongly recommended as it enables iSHARE users to more quickly identify the iSHARE option. If you need to adapt the button to match your app design or translate the text “Sign in with” or “Sign in”, follow these guidelines.

Size

You can scale the button as needed for different devices and screen sizes, but you must preserve the aspect ratio so that the iSHARE logo is not stretched.

Text

To encourage users to click the button, we recommend the call-to-action text “Sign in with iSHARE”. It should be clear to the user that they are signing in to your app for your app with their iSHARE credentials.

“iSHARE” Text

You can use the word “iSHARE” by itself in the button if it is accompanied by adjacent text that makes it clear what the action is. For example:

../_images/do.png

Colour

The colour for an unpressed button is #FFFFFF (white). The colour of button text colour is #61385F (dark purple). The button must always include the standard colour iSHARE logo.

Note

Dark mode is not yet ready.

Font

The button font-family is Lato and font-weight is 700. Do not use other fonts on the button, except as noted for situations with Matching your own app’s style.

Padding

The padding to the left, right, top and bottom of the text should be 12px. The logo should be 25px size, text “iSHARE” should be 18px. There should be 12px space between the logo and the button text. If you need the sign-in button to be smaller or bigger, keep the same proportions.

iSHARE logo in the “Sign in with iSHARE” button

Regardless of the text, you can’t change the size or colour of the iSHARE logo. It must be the standard colour version and appear on a white background.

../_images/ishare_logo.png

Incorrect button design

• Do not use the iSHARE icon or logo by itself without the button boundary and without text to indicate the user action.

../_images/do_not_1.png

• Do not use an iSHARE icon by itself to represent iSHARE Sign-In.

../_images/ishare_logo.png

• Do not put the iSHARE icon on a coloured background.

../_images/do_not_2.png

• Do not create your own icon for the button.

../_images/do_not_3.png

• Do not recolour the icon of iSHARE

../_images/do_not_4.png