Typeface

Open Sans is an extremely versatile Humanist Sans-Serif typeface designed by Steve Matteson. Delivering a crystal clear look and feel, Open Sans enables users to quickly navigate the software without any clutter. The strengths of this typeface surpass both web and print applications offering excellent legibility for both forms of media. Open Sans is a widely available free font offered through Google Fonts and is widely seen as a web standard face.

Please see References - Open Sans for license information.

   font-weight: 300;
   font-style: normal;

   font-weight: 300;
   font-style: italic;

   font-weight: 400;
   font-style: normal;

   font-weight: 400;
   font-style: italic;

   font-weight: 600;
   font-style: normal;

   font-weight: 600;
   font-style: italic;

   font-weight: 700;
   font-style: normal;

   font-weight: 700;
   font-style: italic;

   font-weight: 800;
   font-style: normal;

   font-weight: 800;
   font-style: italic;

Usage

body {
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}

Header Bar and Navigation

#user-dd {
  /* [ User Profile ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff;  /* rgb(255, 255, 255) */
}

button {
  /* [ Action Button ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: #ffffff; /* rgb(255, 255, 255) */
}

nav a {
  /*  [ Navigation Link - standard ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  color: #5d7589; /* rgb(93,​ 117,​ 137) */
}

nav a.active {
  /*  [ Navigation Link - current / active ] */
  color: #fafafa; /* rgb(250,​ 250,​ 250) */
}

Table View

h1 {
  /* [ Table Header ] */
  font-size: 23px;
  font-weight: 100;
  font-style: normal;
  color: #46647e; /* rgb(70,​ 100,​ 126) */
}

h4 {
  /* [ Table sub-heading ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: #666666; /* rgb(102,​ 102,​ 102) */
}

.filters {
  /*  [ Filter text ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  color: #666666; /* rgb(102,​ 102,​ 102) */
}

input#search  {
  /*  [ search input box ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: #666666; /* rgb(102,​ 102,​ 102) */
}

.filters .ng-multi-value  {
  /*  [ value to be filtered by ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 11px;
  font-weight: 400;
  font-style: normal;
  color: #ffffff; /* rgb(255, 255, 255) */
}

th {
  /*  [ Table header ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 13px;
  font-weight: 600;
  font-style: normal;
  color: #666666; /* rgb(102,​ 102,​ 102) */
}

td {
  /*  [ table data / cell ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  color: #666666; /* rgb(102,​ 102,​ 102) */
}

.action-bar a  {
  /*  [ Edit button on table header ] */
  font-family: "Open Sans",Helvetica,sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: #3aa5ef; /* rgb(58,​ 165,​ 239) */
}