OpenMRS RAP Style Guide

Customize your OpenMRS application with reusable fragments.


This is OpenMRS color palette. You can alter the following variables to add you own palette.

OpenMRS Colors

  • #F26522

  • #5B57A6"

  • #EEA616

  • #009384

  • #231F20

  1. $highlight: #30984
  2. $text: #30984


The default OpenMRS font family is Open Sans. You can change your application fonts by altering the following variables.

Deleting a variable may cause the application to crash.

  1. $primaryFont: "OpenSans";
  2. $primaryBoldFont: "OpenSansBold";
  3. $primaryLightFont: "OpenSansLight";
  4. $primaryItalicFont: "OpenSansItalic";


Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Title font weight

Body font weight

Small font weight

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Emphasized text Emphasized text Emphasized text
Strong text Strong text Strong text Strong text
Small text Small text Small text Small text Small


Every icon in the OpenMRS Application comes from a font called Font Awesome.

Some advantages of using a font for the icons are:

  • Easily style icon color, size, shadow, and anything that's possible with CSS.
  • Scalable vector graphics means every icon looks awesome at any size.
  • A font file is smaller than images.

If you need more icons, you can create your own font-family and add it in the variables. A good option for creating an icon font is IconMoon.

  1. // Below is the variable for the icon font
  2. // It is located in reference/_variable.scss.
  3. $iconFont: "FontAwesome";
  4. // This is how you insert an icon:
  5. <a class="button" href="#">
  6.      <i class="icon-home"></i>
  7.      Button with a home icon
  8. </a>

Here are the icons that you should use for specific purposes, for consistency across the reference application

Usage Icon
Modifying an existing piece of data
Add a new piece of data (e.g. to a list)
Delete / Remove
Delete an item or remove it from a list
Patient is admitted to inpatient care
Patient is transferred between two locations in the facility
Exit / Discharge
Patient is discharged from inpatient care (may be okay to use for exits for reasons other than discharge)
Vital Signs
Referring to or capturing a patient's vital signs
Clinical encounter with provider
Referring to or capturing encounters where providers record clinical data about the patient (e.g. writing visit notes, or consultation notes)

How to override variables in your project

In order to override variables you need to add the file customVariables.scss to your project.

The first thing you need to do is import the variables.scss file from RAP sass framework. After that you can start overwriting the variables you want.


  1. @import "variables";
  2. //override variables
  3. $text: #003F5E;
  4. $highlight: #501D3D;

The next thing to do is to import customVariables.scss to your sass and after that import the RAP sass framework.


  1. @import "customVariables";
  2. @import "reference";


There are 4 ways to get a button style in the OpenMRS Application:

  • By a class;
  • By a submit input;
  • By a button input;
  • By a button tag.
  1. // By a class:
  2. <a class="buttonhref="#">
  3.    This is a button
  4. </a>
  5. // By a submit input:
  6. <input type="submit" value="Submit Button" />
  7. // By a button input:
  8. <input type="button" value="Input Button" />
  9. // By a button tag:
  10. <button>
  11.    This is a button
  12. </button>

Customized buttons

Customized buttons are additional classes you can use to indicate types of buttons in the interface:

  • For actions: .confirm, .cancel
  • For icon sizes: .big, .medium
    • This will affect the icon size, not the button itself, but should be applied to the button level.
  • .disabled
    • Use it when a button in in an inactive mode, for example if the user needs to fill in an input to proceed.
  • .app
    • To create the apps buttons, all sized the same. Must come together with the .big class.
  • .task
    • For task buttons such as "Record Vitals". Usually used in the Patient Dashboard.
  • .arrow
    • For action buttons that needs a sense of direction. Usually used in the Archives room.

Button Groups

Button groups can achieve the same purpose as radio buttons or checkboxes, but they are often user-friendlier in interfaces intended to be managed by touch or mouse (but not keyboard).

The visual effect comes from marking one button with the "active" class. The actual behavior requires JavaScript, and works with AngularJS and ui-bootstrap.

  1. <div class="button-group">
  2.    <label class="button" ng-model="propertyToSet" btn-radio="valueToSetItTo"> Display </label>
  3.    <label class="button" ng-model="propertyToSet" btn-radio="anotherValueToSetItTo"> Another </label>
  4. </div>


Request Paper Record

Please confirm:

  • Patient
    Paul, Petter
  • ER
Confirm Cancel

Send Paper Record

This paper record isn't in the queue. If you want to proceed please select a location:

  • Patient
    Paul, Petter
Confirm Cancel


Nom d'utilisateur ou mot de passe incorrect!

Nom d'utilisateur ou mot de passe incorrect!

Nom d'utilisateur ou mot de passe incorrect!

Toast Messages

Jquery Toastmessage

The selected record(s) have been assigned

The selected record(s) haven't been assigned

The selected record(s) haven't been assigned

Send to: Emergency Dossier id: A166009



  • Use top-aligned labels for input fields.
  • Use (required) after a label for required fields if the majority of the fields are optional.
  • Use (optional) after a label for optional fields if the majority of the fields are required.
  • If all your fields are either mandatory or optional, don't mark any.
  • Length of input fields should communicate the intended content.
  • Fields don't need to all be the same length. Mix long and short field length according to the content it is used for.


  • Use double visual emphasys for errors - Example: error message + red background in input.
  • Use descriptive error messages bellow the input fields.
  • if form is too long provide a summary of the errors on the top of the form.

Validation Short Forms

For short form validation use double visual emphasis on the input.

Input is required

Validation Long Forms

For long form validation use double visual emphasis on the input and also provide a summary error message on the top.

First Name is required
Surname is required
Provider Type is required

Input is required


Everything inside tag <form> is auto styled to follow this styleguide rules.
The html structure is basically this: <form>
      <i class="icon-class-if-needed"></i>
      Fieldset title if needed
    <p class="input-position-class">
      <label name="input-id">Input label</label>
      <input id="input-id"/>


  1. Always group a <label> and its <input> inside a <p/> tag;
  2. Always link the <label> name to its <input> id;
  3. Add class "left" for each <p/> tag if side-by-side inputs are needed;
  4. <legend> tag is only necessary if a fieldset title is needed;

Form Elements

  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option
  • An Option

Form Entry UI

  • Vitals
    • Height
    • Weight
    • (Calculated) BMI
    • Temperature
    • Heart Rate
    • Respiratory Rate
    • Blood Pressure
    • O2 Sat
  • Confirm






Tables in the application are automatically styled with zebra-striping. Make sure you use <thead> and <tbody> sections around your rows.

If each of a table rows have multiple possible actions associated with them, use an "Actions" column with icons for those actions. You should describe the action with a tooltip via the title attribute, rather than repeating words in every row of the table.

Table Header Table Header Table Header Table Header Actions
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data

Status Container

Vizit aktiv Te kòmanse nan 06 May 2013 05:35 PM

Date Format Guidelines

There is two kinds of data formats for two different scenarios. One is specific for viewing date information and the other one is for editing a date on an input.

Viewing date

6 May 2013 05:35 PM

Editing date

06-05-2013 17:35

Usage Examples

Login Page