scipion logo

General Style

Branding Guidelines



The icon set used in the project is Font Awesome. Font Awesome is fully open source and is GPL compatible. In the web the icons are defined through a css class while in the desktop app any new icon has to be generated from the Font Awesome Cheatsheet. In order to generate these icons you will have to install the FontAwesome.otf and copy&paste the icons in Photoshop. A brief explanation can be found in the link aforementioned.


The default font type and family to be used is Helvetica. Font sizes and decorations can be used to emphasize when required (using bold and/or italics). The default size is 11 and the font style is plain. However if needed it can be changed to emphasize, as well.

Color Palette

These are the main colors you should use in Scipion. Although you can find some other colors in Scipion they are usually used with purpose design. Therefore you should not use these or any other new colors unless it was extremely necessary.


Firebrick (b22222): Red color for background label

F3CBCB: Very light red for row selection

EAEBFF: Very light blue for even rows

EAEBEC: Light grey for background color in form, protocol, table header and west container

F2F2F2: Very light grey for odd rows, input background, etc

6E6E6E: Very dark grey for project title, tubes, etc


Error messages

The message must explain the error cause or description and give some hints to solve the problem. In case a non expected or non controlled error happens and none hint can be given, the message must give some information contact and optionally a technical description instead. The title of the window must provide a general description telling at least the task that has caused the problem.

Format 1:

  • Title: General Description

  • First Paragraph: Error cause or description

  • Second Paragraph: Hints to solve the error

Format 2:

  • Title: General Description

  • First Paragraph: Error cause

  • Second Paragraph: Information contact

  • Third Paragraph*: Technical Description

Example 1:

  • Title: Open Project Failure

  • First Paragraph: No project found

  • Second Paragraph: Select a project to load.

Example 2:

  • Title: Save Project Failure

  • First Paragraph: Communication error with the database

  • Second Paragraph: Try it later or contact your db administrator <email>

Warning messages

The warning message will be used to warn about an action that can be performed although it is not recommended.

Format 1:

  • Title: General Description

  • First Paragraph: Warn cause and a explanation giving the reason why it is not recommended

  • Second Paragraph: Hints about how to change this status

Example 1:

  • Title: Delete Read Permission Warning

  • First Paragraph: You are going to remove the read permission for <name>. <name> will not be able to access the project.

  • Second Paragraph: If you want to change permissions, go to File>Properties.

Information messages

The information message will be used to inform about an action.

Format 1:

  • Title: General Description

  • First Paragraph: Information for user.

Example 1:

  • Title: Save Project Success

  • First Paragraph: Project “Scipion Project” was successfully created.

Confirmation messages

The confirmation message will be used to ask about an action to be performed.

Format 1:

  • Title: General Description

  • First Paragraph: Information about an action.

  • Second Paragraph: Question to perform o not to perform the action.

Example 1:

  • Title: The project name already exists

  • First Paragraph: There is another project named “Scipion Project”.

  • Second Paragraph: Do you want to create the project anyway?.


Popup messages code is centralized in utils.js and are based on javascript messi library. Depending on the kind of message you would like to show you will have to call:

  • Info and help messages -> infoPopup

  • Warning message -> warningPopup

  • Error message -> errorPopup

Further information describing input and output parameter and functionality can be found in utils.js file.


Buttons classes can be found in the general_style.css: btn(general class for all buttons), buttonGrey, buttonRed, etc. Most of the bottom will use buttonGrey class however if you want to highlight one or some buttons in a button menu you can use the buttonRed class.

Buttons are declared as a href with btn and button color class associated. It can also contains an icon inside. Go to code for several example.